6. 레이아웃 Column과 Row (Jetpack Compose UI 코틀린 앱 개발)

---

<구글이 알려주는 앱 개발 무료 강의>

[Jetpack Compose] 가이드 맵 - 전체 보기

---

Jetpack Compose로 열과 행 만들기

Jetpack Compose를 사용하면 UI를 구성하는 데 사용되는 다양한 레이아웃 요소를 간편하게 만들 수 있습니다. 이번에는 Column과 Row을 사용하여 열과 행을 만드는 방법을 알아보겠습니다.

 

Column과 Row 소개

 

Column은 세로 방향으로 UI 요소를 배치할 때 사용되고, Row는 가로 방향으로 UI 요소를 배치할 때 사용됩니다. 각 요소는 구성 가능한 함수로, 내부에 배치할 항목을 넣을 수 있습니다.

 

 

 

열에 텍스트 요소 추가하기

기존의 Greeting 함수를 수정하여 두 개의 텍스트 리스트가 있는 열을 표시하도록 만들어보겠습니다.

 

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

 

 

결론

Jetpack Compose를 사용하면 간편하게 UI를 구성할 수 있습니다. Column과 Row을 이용하여 열과 행을 만들어 보았습니다. 이러한 기술을 응용하여 더 복잡한 UI를 만들어보세요!

 

---

• [Jetpack Compose] 가이드 맵으로 돌아가기