[Jetpack Compose] Column, Row, Box

https://developer.android.com/codelabs/jetpack-compose-basics#5

Column과 Row는 LinearLayout와 비슷해 보이고 Box는 RelativeLayout이나 ConstraintLayout과 비슷해 보인다.

import androidx.compose.foundation.layout.Column
...

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Column(modifier = Modifier.padding(24.dp)) {
            Text(text = "Hello,")
            Text(text = name)
        }
    }
}

Column의 파라미터에도 Modifier를 넣어서 padding 등의 속성을 줄 수 있는 것으로 보인다.

 

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    Column {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

위와 같이 Composable Function은 보통 코틀린에서의 함수들처럼 사용이 가능한 것으로 보인다. for문을 통해 Column에 추가가 가능하게 하는 예제문이다. 

 

@Preview(showBackground = true, widthDp = 320)
@Composable
fun DefaultPreview() {
    BasicsCodelabTheme {
        MyApp()
    }
}

@Preview 어노테이션에 widthDp 파라미터를 추가하여 가로를 설정할 수 있다. 

 

Button을 통해 버튼을 만들수 있다.

Button은 Material Design Buttons spec 에서 Button, OutlinedButton, TextButton의 세 타입을 갖는 것을 알 수 있다.

 

import androidx.compose.material.Button
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
...

@Composable
private fun Greeting(name: String) {

    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            OutlinedButton(
                onClick = { /* TODO */ }
            ) {
                Text("Show more")
            }
        }
    }
}

 Row를 통해 한 행에 여러 요소를 넣을 수 있다. alignEnd와 같이 행의 마지막에 배치하는 식의 속성은 없고 weigth를 통해 채울 수 있는 공간에 대해 가로의 비율을 정할 수 있다. Column과 OutlinedButton 중 Column만 weight을 주었더니 OutlinedButton은 기존의 wrapContent처럼 보여졌다. 

@Composable
private fun Greeting(name: String) {

    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            OutlinedButton(
                onClick = { /* TODO */ }
            ) {
                Text("Show more1")
            }
            OutlinedButton(modifier = Modifier.wrapContentWidth(),
                onClick = { /* TODO */ }
            ) {
                Text("Show more2")
            }
        }
    }
}

Row에 Column과 2개의 OutlinedButton을 두고 Modifer.weight를 주거나 안 주거나 wrapContent속성을 주어 테스트 해보니 따로 weight속성을 주지 않은 건 wrapContent와 같게 나타났고 Modifer.weight를 준 요소들은 남은 공간에서 weight만큼 비율로 나타나는 것을 확인할 수 있었다. 

즉 Modifier에 weight 속성을 모두 써주면 각각 weight만큼 비율로 그려지고 써주지 않은 요소가 있을 땐 wrapContent로 나타나고 나머지 weigth 속성이 쓰인 요소들은 나머지 공간을 해당 비율로 나눠 나타나는 것으로 보인다. 

 

https://developer.android.com/codelabs/jetpack-compose-basics#5

Jetpack Compose basics  |  Android Developers

 

---

출처 : https://eshc1.tistory.com/89

안드로이드 Jetpack Compose - 4