Compose Row & Column

정용우·2023년 7월 13일
0

Compose

목록 보기
2/8
post-thumbnail

Column: 요소들을 세로로 배치

Row: 요소들을 가로로 배치


  • arrangement: 요소들을 어떤식으로 배열할지 지정

    • css의 flex와 유사
    • 컨테이너 성격의 Composable에서 요소들의 아이템을 정렬할 때 사용
    • row: horizontalArrangement
    • column: verticalArrangement

    • Arrangement.Start(Top): 왼쪽으로(위로)
    • Arrangement.End(Bottom): 오른쪽으로(아래로)
    • Arrangement.Center: 중앙으로
    • Arrangement.SpaceBetween: 공간 모두 차지
    • Arrangement.SpaceAround: 요소 당 일정한 빈 공간 차지
    • Arrangement.SpaceEvenly: 요소들 사이 및 바깥에 빈 공간을 같게 하기
  • alignment: 해당 컨테이너 안에 들어있는 요소의 위치를 어떤 방향으로 둘지 지정

    • LinearLayout에서 gravity와 같음
    • row: verticalAlignment
    • column: horizontalAlignment

    • Alignment.Top(Start): 컨테이너 위(왼쪽)에 두기
    • Alignment.Bottom(End): 컨테이너 아래(오른쪽)에 두기
    • Alignment.CenterVertically(CenterHorizontally): 컨테이너의 수직방향으로 중앙에 두기

예시코드

Row

@Composable
fun RowContainer() {
    Row(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
    	/* 요소 입력 */
    }
}

Column

@Composable
fun ColumnContainer() {
    Column(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.End
    ) {
    	/* 요소 입력 */
    }
}

0개의 댓글