Android Jetpack Compose UI/Compose Layout
[Compose Layout] 4. Compose Box 사용법 정리
Box Layout이란? Box Layout은 여러 위젯를 겹쳐서 놓을 수 있는 레이아웃이다. Box 내부의 Child Compose들은 Modifier.align에 자신의 위치를 지정함으로써 Box 내부의 어떤 공간에 보여질지를 결정할 수 있다. 두개의 위젯을 같은 위치로 설정하면 위젯 위에 다른 위젯 겹쳐 지는 것 또한 가능하다. Box Layout은 기존 Frame Layout과 동작이 동일한데, 화면 오른쪽 아래 버튼을 만들거나 할 때 유용하다. 예를 들어 아래 코드와 같이 Box 내부에 다음과 같이 align이 없는 상태로 Text를 쓰게되면 @Preview(showBackground = true, widthDp = 120, heightDp = 200) @Composable fun KotlinW..
[Compose Layout] 3. Compose Row 사용법 정리
Row Layout 내부 살펴보기 Row는 수평 배치를 지원하는 레이아웃이다. @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun TestView() { Row() { Text(text = "Kotlin") Text(text = "World") Text(text = "Blog") } } 예를들어 위와 이 Row 안에 세개의 Text 위젯 을 배치한다고 해보자. 그러면 아래와 같이 텍스트가 배치된다. 자 이제 이러한 Row Layout을 그리기 위해 Row Layout은 어떤 변수를 받을 수 있는지 내부를 살펴보자.예를들어 @Composable inline fun Row( modifier: Modifier = Modi..
[Compose Layout] 2. Column 사용법 정리
Column 내부 살펴보기 Column은 Child Widget이 들어오면 수직으로 배치되는 레이아웃이다. 자 먼저 Column은 어떤 변수를 받을 수 있는지 내부를 살펴보자. @Composable inline fun Column( modifier: Modifier = Modifier, verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalAlignment: Alignment.Horizontal = Alignment.Start, content: @Composable ColumnScope.() -> Unit ) { val measurePolicy = columnMeasurePolicy(verticalArrangement, horizo..
[Android Compose Layout] 1. Column, Row, Box, BoxWithConstraints, ConstraintLayout 의 차이점 살펴보기
Jetpack Compose 레이아웃 시작하기 Jetpack Compose는 UI를 위한 라이브러리이므로, UI컴포넌트를 화면상에 배치하기 위한 Layout이 존재한다. 만약 Layout을 지정하지 않고 이모지와 텍스트를 써보면 다음과 같이 나타난다. @Preview @Composable fun TestView(){ EmojiView() TitleView() } 우리는 여기에 Column 레이아웃을 추가하여 다음과 같이 바꿀 수 있다. @Preview @Composable fun TestView(){ Column() { EmojiView() TitleView() } } 레이아웃은 위젯을 원하는 위치에 배치시켜 자신이 원하는 뷰를 만들기 위한 필수 사항이다. 자 이제 Compose에는 어떤 레이아웃이 지원..