안드로이드 JetPack Compose 알아보기 (2)

UI 조정

• 기존에 정의한 Text를 보여주는 Composable 함수에 배경 색상을 적용하려면 Surface로 래핑합니다.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

• 기존에 XML내에 정의하던 뷰의 속성들은 Modifer라는 것을 통해서 접근할 수 있습니다. 아래는 Text에 Padding을 추가하는 예시입니다.

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

• Composable함수는 함수간 재사용이 가능하므로 함수가 매우 커지지 않도록 재사용하는 것이 좋습니다.

Column, Row, Box

• 기존에 LinearLayout형태로 배치했던 뷰들을 Column, Row로 대체하고 겹치는 뷰를 처리할때는 Box를 사용합니다.

• Column을 사용하여 두 텍스트를 Vertical로 배치하려면 아래와 같이 사용합니다.

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

• Column에는 Modifer.fillMaxWidth()로 너비를 채울 수 있습니다. 또한 for문도 사용이 가능합니다.

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    Column(modifier = Modifier.padding(vertical = 4.dp)) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

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

버튼

아래와 같이 Row, Column과 Button을 활용하여 레이아웃을 구성할 수 있습니다.

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    Column(modifier = Modifier.padding(vertical = 4.dp)) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

@Composable
private fun Greeting(name: String) {
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            OutlinedButton(
                onClick = { /*TODO*/ }
            ) {
                Text(text = "Button")
            }
        }
    }
}