열과 행 만들기

Compose 세 가지 기본 표준 레이아웃 요소

• Column
• Row
• Box

 

이런 요소는 내부에 항목을 배치할 수 있다

예를 들어 Column 내부의 각 하위 요소는 세로로 배치된다

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.background
    ) {
        Column() { // Column 사용
            Greeting("Hello")
            Greeting("Android")
        }
    }
}

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

Preview 모습

 

아직 크기를 설정하지 않았거나 컴포저블 크기에 제약사항을 추가하지 않았으므로 각 행은 사용할 수 있는 최소 공간만을 차지한다

@Preview 주석에 widthDp 매개변수를 추가하여 소형 스마트폰의 일반적인 너비인 320dp로 에뮬레이션 해본다

@Preview(showBackground = true, widthDp = 320) // 너비 추가
@Composable
fun GreetingPreview() {
    BasicsCodelabTheme {
        MyApp()
    }
}

widthDp가 추가된 Preview 모습

---

Column에 fillMaxWidth와 padding 수정자 속성 추가하기

 

아래와 같이 이미지를 도출하도록 수정해 보았다

 

코드 내용

• fillMaxWidth()를 이용해  폭에 꽉 차도록 수정했다

@Composable
fun MyApp(modifier: Modifier = Modifier, names: List<String> = listOf("World", "Compose")) { // 리스트 추가
    Column(modifier = modifier.padding(vertical = 4.dp)) { 
        for(name in names) { // Cloumn을 반복 생성
            Greeting(name = name)
        }
    }
}

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

---

각 행에 버튼 기능 추가

• Row를 추가해서 Text와 Button을 나란히 표시하도록 만들어본다

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(
        color = MaterialTheme.colorScheme.primary, 
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)) {

        Row(modifier = Modifier.padding(24.dp)) { // Row 추가
            Column(modifier = Modifier.weight(1f)) { // Column weight를 이용
                Text(text = "Hello")
                Text( text = "$name")
            }
            ElevatedButton(onClick = { /*TODO*/ }) { // Button 추가
                Text(text = "See more")
            }
        }

    }
}