이미지, 텍스트로 아이템 디자인

• Column, Image, Text 사용
• size, clip 수정자로 모양과 크기를 조정

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale

@Composable
fun AlignYourBodyElement(
   modifier: Modifier = Modifier
) {
   Column( //Column 사용
       modifier = modifier
   ) {
       Image( // Image 사용
           painter = painterResource(R.drawable.ab1_inversions),
           contentDescription = null,
           contentScale = ContentScale.Crop,
           modifier = Modifier
               .size(88.dp) //size로 크기 수정
               .clip(CircleShape) // clip으로 모양 수정
       )
       Text( text = stringResource(R.string.ab1_inversions) ) // Text 사용
   }
}

---

이미지의 크기를 수정하기 위해 Crop 유형을 사용하도록 추가

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale

@Composable
fun AlignYourBodyElement(
   modifier: Modifier = Modifier
) {
   Column(
       modifier = modifier
   ) {
       Image(
           painter = painterResource(R.drawable.ab1_inversions),
           contentDescription = null,
           contentScale = ContentScale.Crop, // Crop 사용
           modifier = Modifier
               .size(88.dp)
               .clip(CircleShape)
       )
       Text( text = stringResource(R.string.ab1_inversions) )
   }
}

---

Cloumn, Row, Box 모두 하위요소를 정렬할 옵션을 고를 수 있다

• Column
  • Start
  • CenterHorizontally
  • End
• Row
  • Top
  • CenterVertically
  • Bottom
• Box
  • TopStart
  • TopCenter
  • TopEnd
  • CenterStart
  • Center
  • CenterEnd
  • BottomStart
  • BottomCenter
  • BottomEnd

import androidx.compose.ui.Alignment

@Composable
fun AlignYourBodyElement(
   modifier: Modifier = Modifier
) {
   Column(
       horizontalAlignment = Alignment.CenterHorizontally,
       modifier = modifier
   ) {
       Image(
           //..
       )
       Text(
           //..
       )
   }
}