[Jetpack Compose] Box

Box

이전에 배운 Column과 Row는 LinearLayout에 속한다. 

하지만 Box는 FrameLayout계층이다. 그렇기 때문에 중복되게 표현해주는 특징으로 인해 한개의 Box에 여러개의 텍스트를 넣어주게 되면 겹쳐서 나타나게 된다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(){
                Text("Hello")
                Text("ABCDEFGHIJKLMNOP")
            }
        }
    }
}

이처럼 하나의 박스 내부에 2개 이상의 텍스트를 넣어주게 되면 겹쳐서 출력된다. 이를 해결하는 방법은 Box의 활용법을 설명한 후 이어서 설명하겠다.

 

Box도 이전에 배운 Column, Row와 마찬가지로 내부에 modifier를 통해 다양한 설정이 가능하다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxSize() // 화면 전체 적용
                    .fillMaxHeight() // 세로 전체 적용
                    .fillMaxWidth() // 가로 전체 적용
                    .height(200.dp) // 세로 특정 길이만큼 적용
                    .width(200.dp), // 가로 특정 길이만큼 적용
                    .padding(16.dp), // 패딩 설정
                contentAlignment = Alignment.TopEnd // 글자 정렬 방향
            ) {
                Text("Hello")
            }
        }
    }
}

fillMaxSize()를 사용할 경우 화면 전체가 녹색으로 채워지고, fillMaxHeight를 사용하면 box의 가로 크기만큼의 모든 세로가 녹색으로 채워지며, fillMaxWidth를 사용하면 box의 세로 크기만큼 모든 가로가 녹색으로 채워진다. 

만약, 모든 가로 혹은 세로를 다 채우는 것이 아니라 일부만 채우고 싶다면 height와 width를 사용하면 된다. 이전에 배웠던 .dp를 활용해서 길이를 지정해준다면 해당 길이만큼 box의 크기가 설정될 것이다. 

 

contentAlignment의 경우에는 글자의 정렬을 할때 사용된다. 

Alignment.뒤에는 다양한 값이 올 수 있다. 예시에 작성되어있는 TopEnd의 경우 우측 상단으로 글자가 정렬되고, BottomEnd의 경우에는 우측 하단으로 글자가 정렬된다. 이 외에도 다양한 정렬 방법이 있으니 필요에 따라 활용하면 된다. 

 

padding의 경우에는 쉽게 말하면 여백이다. 글자가 너무 붙어있으면 보기에 불편하니까 약간의 여백을 주는 것이다.

 

그럼 이런 방식으로 정렬을 하면 하나의 box 안에 여러개의 text를 사용할 수 있다고 생각할 수 있다.

하지만, 위와 같은 방식을 사용하게 되면 해당 박스 내부에 있는 모든 요소에 적용되기 때문에 겹쳐진 글자가 위치만 바뀌어서 정렬되는 것을 볼 수 있을것이다.

 

 

그럼 어떻게 할까?

답은 간단하다. 이시간에 배웠던 코드를 활용하면 된다

box 내부에 Column과 Row를 넣으면 된다.

내부 문법은 이전에 배웠던 것과 똑같다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier
                    .background(color = Color.Green)
                    .height(200.dp) // 세로 특정 길이만큼 적용
                    .width(200.dp), // 가로 특정 길이만큼 적용
                    .padding(16.dp), // 패딩 설정
                contentAlignment = Alignment.TopEnd // 글자 정렬 방향
            ) {
                Column() {
                    Text("Hello")
                    Text("hi")
                }
            }
        }
    }
}

요렇게.

 

Column이랑 Row가 Box에 들어가는데 Box도 Box안에 들어갈 수 있을까?

당연하다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth()
                    .height(200.dp),
                contentAlignment = Alignment.TopEnd // 글자 정렬 방향
            ) {
                Text("Hello")
                Box(
                    modifier = Modifier.fillMaxSize()
                        .padding(16.dp),
                    contentAlignment = Alignment.BottomEnd
                ){
                    Text("ABCDEFGHIJKLMNOP")
                }

            }
        }
    }
}

Box 내부에 Box를 넣을 수 있다. 단, 내부에 있는 Box는 절대 상위 Box보다 커질 수 없다.