[Jetpack Compose] 3. Box

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=kFOZKIwn5KU&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=3 

 

---

FrameLayout

Box Composable 객체는 FrameLayout과 유사함

(FrameLayout : 겹치는걸 허용함)

@Preview(showBackground = true)
@Composable
fun TestView() {
    Box(modifier = Modifier
        .background(color = Color.Green)) {
        Text("Hello")
        Text("Kang")
    }
}

---

크기

fillMaxWidth() : 가로가 채워짐

fillMaxHeight() : 세로가 채워짐

fillMaxSize() : 가로, 세로 둘 다 채워짐

@Preview(showBackground = true)
@Composable
fun TestView() {
    Box(modifier = Modifier
        .background(color = Color.Green)
        .fillMaxHeight()
		) {
        Text("Hello")
        Text("Kang")
    }
}

---

정렬

contentAlignment를 사용

 

TopEnd : 제일 위 & 오른쪽에 위치

BottomEnd : 제일 아래 & 오른쪽에 위치

@Preview(showBackground = true)
@Composable
fun TestView() {
    Box(modifier = Modifier
        .background(color = Color.Green)
        .fillMaxSize(),
        contentAlignment = Alignment.TopEnd
    ) {
        Text("Hello")
        Text("Kang")
    }
}

Text 2개가 같이 움직여서 여전히 겹침

다른 Box로 감싸서 방향을 다르게 준다면 안 겹침

@Preview(showBackground = true)
@Composable
fun TestView() {
    Box(modifier = Modifier
        .background(color = Color.Green)
        .fillMaxSize()
    ) {
        Text("Hello")
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.BottomEnd
        ) {
            Text("Kang")
        }
    }
}

---

Padding

Modifier를 쓸 수 있으니 당연히 Padding도 가능

@Preview(showBackground = true)
@Composable
fun TestView() {
    Box(modifier = Modifier
        .background(color = Color.Green)
        .fillMaxSize()
    ) {
        Text("Hello")
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            contentAlignment = Alignment.BottomEnd
        ) {
            Text("Kang")
        }
    }
}

---

높이, 너비 지정

Modifier 안의 속성으로 가능

.width() ⇒ 너비 지정

.height() ⇒ 높이 지정

@Preview(showBackground = true)
@Composable
fun TestView() {
    Box(modifier = Modifier
        .background(color = Color.Green)
        .width(100.dp)
        .height(80.dp)
    ) {
        Text("Hello")
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            contentAlignment = Alignment.BottomEnd
        ) {
            Text("Kang")
        }
    }
}