[안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

안녕하세요.

이번 시간에는 컴포넌트들을 가로 정렬하는 Row에 대하여 알아보겠습니다. 

---

목차

1. 샘플 박스 만들기

2. 미리 보기

3. Row 사용 방법

---

1. 샘플 박스 만들기

 - 설명

   - background

     배경색상 설정

   - size(80.dp)

     가로, 세로 길이 80으로 설정

@Composable
fun DummyBox(color: Color){
    Box(modifier = Modifier
        .background(color)
        .size(80.dp)
    )
}

 

2. 미리 보기

 - 설명 

   - background(색상)

     배경색상 설정

   - fillMaxSize()

     전체 화면 꽉 차게 설정

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Row(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }
    }
}

 

반응형

 

3. Row 사용 방법

 3-1 컴포넌트 정렬 - horizontalArrangement

  - 설명

   - horizontalArrangement = Arrangement.Start

     컴포넌트 왼쪽으로 정렬

   - horizontalArrangement = Arrangement.Center

     컴포넌트 중간으로 정렬

   - horizontalArrangement = Arrangement.End

     컴포넌트 오른쪽으로 정렬

   - horizontalArrangement = Arrangement.SpaceAround

     컴포넌트 간의  동일한 간격 주기(양쪽 끝 간격은 컴포넌트 간의 간격 절반

   - horizontalArrangement = Arrangement.SpaceBetween

     컴포넌트간의 간격 주기(양쪽 끝 간격 없음)

   - horizontalArrangement = Arrangement.SpaceEvenly

     컴포넌트간의 간격과 양쪽 끝 간격 동일

        Row(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
            horizontalArrangement = Arrangement.Start,
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }
    }

 

 3-2 컴포넌트 위치 - verticalAlignment

  - 설명

   - verticalAlignment = Alignment.Top

     가로 정렬된 컴포넌트 세로 위치를 맨 위로 이동

   - verticalAlignment = Alignment.CenterVertically

     가로 정렬된 컴포넌트 세로 위치를 중간으로 이동

   - verticalAlignment = Alignment.Bottom

     가로 정렬된 컴포넌트 세로 위치를 맨 아래로 이동

        Row(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
            verticalAlignment = Alignment.Bottom
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }

 

2023.04.24 - [안드로이드] - [안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

[안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

 

 

 

2023.04.24 - [안드로이드] - [안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

[안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기