분류 전체보기

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..

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..

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..

Jetpack Compose 레이아웃 시작하기 Jetpack Compose는 UI를 위한 라이브러리이므로, UI컴포넌트를 화면상에 배치하기 위한 Layout이 존재한다. 만약 Layout을 지정하지 않고 이모지와 텍스트를 써보면 다음과 같이 나타난다. @Preview @Composable fun TestView(){ EmojiView() TitleView() } 우리는 여기에 Column 레이아웃을 추가하여 다음과 같이 바꿀 수 있다. @Preview @Composable fun TestView(){ Column() { EmojiView() TitleView() } } 레이아웃은 위젯을 원하는 위치에 배치시켜 자신이 원하는 뷰를 만들기 위한 필수 사항이다. 자 이제 Compose에는 어떤 레이아웃이 지원..

기존 명령형 패러다임을 이용하여 UI를 그릴 때의 한계점 기존 안드로이드는 xml을 이용한 명령형 프로그래밍 패러다임을 따르는 UI Kit을 이용하여 UI를 그리고 있었다. 우리는 안드로이드 위젯을 업데이트 하기 위해서 아래와 같은 findViewById()와 같은 함수를 이용하여 트리를 탐색한 후 setter을 호출하여 위젯을 변경하였다. findViewById(R.id.blog_title_text).text = "Kotlin World" 위 코드가 실행되면 TextView는 text 프로퍼티에 Kotlin World라는 State를 직접 가지고 있게 된다. 이렇게 View가 직접 State를 가지고 있는 것을 Stateful하다고 한다. 하지만 이러한 방식의 뷰 조작은 오류를 발생할 가능성을 높인다...