[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

이번 시간에는 요소들을 겹치게 하는 Box에 대하여 알아보겠습니다. 

---

목차

1. 샘플 박스 만들기

2. 미리 보기

3. Column 사용 방법

---

1. 샘플 박스 만들기

 - 설명

   - DummyBox(color: Color, dp: Dp)

     색상과 크기를 매개변수로 전달받는다. 

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

 

2. 미리 보기

 - 설명 

   - background(색상)

     배경색상 설정

   - fillMaxSize()

     전체 화면 꽉 차게 설정

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

        Box(modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        ){
            DummyBox(Color.Red, 200.dp)
            DummyBox(Color.Blue, 150.dp)
            DummyBox(Color.Green, 100.dp)
        }
    }
}

 

반응형

 

3. Box사용 방법

  3-1 컴포넌트 위치 - contentAlignment

   - 설명

     contentAlignment = Alignment.TopCenter

     - 상단 중앙

     contentAlignment = Alignment.TopEnd

     - 상단 오른쪽

     contentAlignment = Alignment.TopStart

     - 상단 왼쪽

     contentAlignment = Alignment.Center

     - 정중앙

     contentAlignment = Alignment.CenterEnd

     - 중앙 오른쪽

     contentAlignment = Alignment.CenterStart

     - 중앙 왼쪽

     contentAlignment = Alignment.BottomCenter

     - 하단 중앙

     contentAlignment = Alignment.BottomStart

     - 하단 왼쪽

     contentAlignment = Alignment.BottomEnd

     - 하단 오른쪽

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

        Box(modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
            contentAlignment = Alignment.TopStart
        ){
            DummyBox(Color.Red, 200.dp)
            DummyBox(Color.Blue, 150.dp)
            DummyBox(Color.Green, 100.dp)
        }
    }
}

 

 

 

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

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

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

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