Jetpack Compose의 등장과 중요성
Jetpack Compose는 Android의 차세대 UI라이브러리로 직관적인 코드를 통해 UI를 그려줄 수 있다는 점과, Stateless한 UI를 그려줄 수 있다는 점을 특징으로 가지고 있다. Google에서는 Kotlin이 안드로이드의 공식 언어로 지정되었을 때만큼 Compose를 밀어주고 있으며 이후 모든 안드로이드의 UI 코드는 Compose로 작성될 것이 명확해 보인다.
하지만 Compose는 나온지 오랜 시간이 되지 않아 양질의 자료를 찾아보기가 힘들다. 영문으로도 양질의 자료를 찾아보기 힘든데, 한글로 된 양질의 자료는 없다시피 하다. 현재 구글에 검색하면 나오는 자료들은 모두 Codelab을 따라하는 문서들 뿐 Compose에 대해 자세히 다룬 문서가 없다. 어느 정도 경력이 있는 안드로이드 개발자라면 이해하기가 편하겠지만, 새로 입문하거나 경력이 적은 안드로이드 개발자들이 Compose에 입문하는데 어려움이 있을 것이라 본다.
이에 따라 많은 한국인 안드로이드 개발자들이 참조할 Compose 문서를 작성해야 할 필요성을 느꼈고, 이번 정리 글을 작성하게 되었다.
아직 시리즈를 작성 중이며 점점 내용을 채워나갈 예정이다.
Compose Layout
모든 UI라이브러리의 시작은 Layout이다. Compose의 레이아웃에 대해 살펴보자.
[Android Compose Layout] 1. Column, Row, Box, ConstraintLayout 정리
[Android Compose Layout] 1. Column, Row, Box, BoxWithConstraints, ConstraintLayout 의 차이점 살펴보기
Jetpack Compose 레이아웃 시작하기 Jetpack Compose는 UI를 위한 라이브러리이므로, UI컴포넌트를 화면상에 배치하기 위한 Layout이 존재한다. 만약 Layout을 지정하지 않고 이모지와 텍스트를 써보면 다음
kotlinworld.com
[Android Compose Layout] 2. Column Layout 정리
[Android Compose Layout] 2. Compose Column 사용법 정리
Column 내부 살펴보기 Column은 Child Widget이 들어오면 수직으로 배치되는 레이아웃이다. 자 먼저 Column은 어떤 변수를 받을 수 있는지 내부를 살펴보자. @Composable inline fun Column( modifier: Modifier..
kotlinworld.com
[Android Compose Layout] 3. Row Layout 정리
[Android Compose Layout] 3. Compose Row 사용법 정리
Row Layout 내부 살펴보기 Row는 수평 배치를 지원하는 레이아웃이다. @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun TestView() { Row() { Text(text = "Kotlin") Text(text..
kotlinworld.com
[Android Compose Layout] 4. Box Layout 정리
[Android Compose Layout] 4. Compose Box 사용법 정리
Box Layout이란? Box Layout은 여러 위젯를 겹쳐서 놓을 수 있는 레이아웃이다. Box 내부의 Child Compose들은 Modifier.align에 자신의 위치를 지정함으로써 Box 내부의 어떤 공간에 보여질지를 결정할 수 있다.
kotlinworld.com
[Android Compose Layout] 5. BoxWithConstraints Layout 정리
[Android Compose Layout] 5. Compose BoxWithConstraints 사용법 정리
BoxWithConstraints Layout이란? BoxWithConstraints Layout은 Box Layout의 SuperSet Layout으로 Box의 기능을 모두 포함하면서 Layout의 Constraint에 접근할 수 있도록 만들어진 layout이다. *Constraint란 Box..
kotlinworld.com
[Android Compose Layout] 6. ConstraintLayout 정리
[Android] Compose에서ConstraintLayout을 쓰는 것이 권장 사항이 아닌 이유
ConstraintLayout이란? ConstraintLayout이란 Layout속의 View들간에 제약조건(Constraints)을 설정함으로써 복잡한 뷰를 만들 수 있도록 설계된 레이아웃이다. 과거 xml에서는 Constraint Layout을 쓰는 것이 권..
kotlinworld.com
Compose Layout Column
[Android Compose] Column verticalArrangement 사용법
[Android Compose Column] Column verticalArrangement 사용법
Arrangement 란? Jetpack Compose의 Arrangement란 View의 배치(Arrangement)을 지원해주는 변수이다. Column에서는 Arrangement.Vertical을 상속받는 아래 6가지 Arrangement를 사용할 수 있다. Arrangement.Top..
kotlinworld.com
[Android Compose] Column horizontalAlignment 사용법
[Android Compose Column] horizontalAlignment 사용법
Alignment란? Jetpack Compose의 Alignment란 View의 정렬을 지원해주는 변수이다. 즉, 모든 View가 동일한 x축 혹은 y축을 기준으로 정렬되도록 만드는 변수이다. Column의 Alignment Column의 자식 View들은 수..
kotlinworld.com
Compose Layout Row
[Android Compose] Row horizontalArrangement 사용법
[Android Compose Row] horizontalArrangement 사용법
Row의 Arrangement Row는 수평방향으로 자식 컴포넌트들을 순서대로 배치하는 레이아웃이다. 이때 어떤 방식으로 자식 컴포넌트들을 배치할지를 Row의 horizontalArrangement가 결정한다. 예를 들어 3개의 Te
kotlinworld.com
[Android Compose] Row verticalAlignment 사용법
[Android Compose Row] verticalAlignment 사용법
Row의 Alignment Row의 자식 View들은 수평으로 배치되므로 수직으로 정렬(horizontalAlignemnt)이 지원되는데 수직 정렬은 모든 자식 View들의 y위치가 동일하도록 만들어주는 정렬이다. 따라서 같은 x축 상
kotlinworld.com
Compose Lists
[Android Compose Lists] 1. Compose Column과 ScrollState를 이용해 Scroll View만들기 + 사용법 정리
[Android Compose Lists] 1. Compose Column과 ScrollState를 이용해 Scroll View만들기 + 사용법 정리
Compose의 Lists란 무엇인가? Compose의 Lists란 컴포넌트들을 Scrollable하게 수직 또는 수평으로 배치하는 Composable을 뜻한다. 이를 만들기 위해서는 Column 혹은 Row를 사용할 수 있다. 이번 글에서는 Column..
kotlinworld.com
[Android Compose Lists] 2. Compose LazyColumn을 이용해 RecyclerView 만들기 + item, items, itemsIndexed사용법 정리
LazyColumn이란? LazyColumn은 화면에 보여지는 컴포저블만을 표시하는 scrollable한 Column이다. LazyColumn은 화면에 보여지는 컴포저블만을 표시하기 때문에 화면 로딩 시간을 최적화 시킬 수 있어 많은 아
kotlinworld.com
Compose Material
[Android Compose Material] 1. Compose에서 Snackbar을 만드는 방법 : Scaffold를 이용해 Snackbar만들기
[Android Compose Material] 1. Compose에서 Snackbar을 만드는 방법 : Scaffold를 이용해 Snackbar만들기
Scaffold란? Snackbar을 원하는대로 만들기 위해서는 Scaffold Layout을 알아야 한다. Scaffold란 Material Component들을 편하게 사용할 수 있도록 하기 위해 미리 디자인된 레이아웃이다. Snackbar도 Material C..
kotlinworld.com
[Android Compose Material] 2. Compose TextField 이용해 텍스트 출력하기 : Stateless한 Compose에서 TextField는 어
Stateless한 Compose의 TextField TextField란 텍스트를 입력하는 UI이다. 이 UI는 두가지 부분으로 구성된다. 텍스트를 입력하는 부분(User Interaction) 텍스트를 저장하는 부분(State) 텍스트를 입력하려면 T..
kotlinworld.com
Compose Modifier
[Android Compose Modifier] 1. Modifier로 크기(너비, 높이) 조절하기
[Android Compose Modifier] 1. Modifier로 크기(너비, 높이) 조절하기
크기를 조절하는 Modifier 크기를 조절하기 위해서는 다음의 Modifier 구성요소들을 사용할 수 있다. 이 Modifier은 모든 Compose Component에 대해 사용 가능하다. Modifier.width(width: Dp) : 너비를 width.dp..
kotlinworld.com
[Android Compose Modifier] 2. padding, offset 이용하여 컴포넌트간 여유공간 만들기
[Android Compose Modifier] 2. padding, offset 이용하여 컴포넌트간 여유공간 만들기
Compose에서 제공하는 여유공간 변수 compose에서는 Modifier에서 여유공간을 만들기 padding, offset을 지원한다. xml에서 자주 쓰였던 margin은 제공되지 않는다. padding : 자신을 기준으로 안쪽으로 얼만큼
kotlinworld.com
[Android Compose Modifier] 3. Modifier.background로 배경색 설정하고 라운딩 처리하기
[Android Compose Modifier] 3. Modifier.background로 배경색 설정하고 라운딩 처리하기
Modifier.background 내부 살펴보기 Modifier.background에서는 두가지 방법으로 background를 설정하는 방법을 지원한다. color과 shape을 이용해 배경색과 모양 만들기 brush와 shape, alpha를 이용해 그라데이..
kotlinworld.com
[Android Compose Modifier] 4. Modifier.background에서 Brush 다루기 : 그라데이션 만들기
[Android Compose Modifier] 4. Modifier.background에서 Brush 다루기 : 그라데이션 만들기
background에 brush를 이용해서 그라데이션(Gradient) 만들기 그라데이션 처리는 아래 그림과 같이 여러개의 색을 섞어 그라데이션을 만드는 것을 뜻한다. Modifier에서는 파라미커로 Brush를 받을 수 있는
kotlinworld.com
[Android Compose Modifier] 5. Color에 alpha 적용해 투명도 설정하기
[Android Compose Modifier] 5. Color에 alpha 적용해 투명도 설정하기
alpha란? alpha란 불투명도를 설정하는 float값이다. alpha가 1에 가까워질수록 불투명해지며 0에 가까워질 수록 투명해진다. alpha = 1f : default값. 불투명 alpha = 0f : 완전 투명 alpha란 무엇인가를 한 눈에.
kotlinworld.com
[Android Compose Modifier] 6. border을 이용해 테두리 만들기
[Android Compose Modifier] 6. border을 이용해 테두리 만들기
border border은 border의 너비(width) 색상(color) 모양(shape)을 설정함으로써 설정 가능하다. fun Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape) = border(width, SolidColor(colo..
kotlinworld.com
[Android Compose Modifier] 7. padding과 border을 조합하여 중첩 테두리 만들기(Multiple Border)
[Android Compose Modifier] 7. padding과 border을 조합하여 중첩 테두리 만들기(Multiple Border)
이번 글에서는 하나의 modifier에서 여러개의 border을 만드는 방법을 살펴본다. Modifier에 중첩 border만들기 하나의 Modifier에 여러개의 border을 적용시키는 방법은 간단하다. border사이에 padding을 주면
kotlinworld.com
Compose State
[Android Compose State] MutableState을 remember과 함께 다루는 다양한 방법 : 구조분해, by 키워드(Delegation) 사용
[Android Compose State] MutableState을 remember과 함께 다루는 다양한 방법 : 구조분해, by 키워드(Delegation)
remember이란 Compose는 State값이 바뀌면 Recomposition(재구성)이 일어난다. 이때 이전 State를 기억해야 하는 경우 remember을 이용해 값을 저장할 수 있다. 예를 들어 아래와 같이 remember 없이 textState를..
kotlinworld.com
Compose 기타
[Jetpack Compose] Compose 란?
Jetpack Compose Jetpack Compose는 안드로이드 앱의 UI를 쉽게 디자인하고 빌드하기 위한 라이브러리이다. Compose가 만들어진 목표는 다음과 같다. 맞춤 레이아웃을 쉽게 작성 고성능을 발휘 맞춤 레이아
kotlinworld.com
[Jetpack Compose] State의 관점에서 본 Compose의 이해
[Jetpack Compose] State의 관점에서 본 Compose의 이해
기존 명령형 패러다임을 이용하여 UI를 그릴 때의 한계점 기존 안드로이드는 xml을 이용한 명령형 프로그래밍 패러다임을 따르는 UI Kit을 이용하여 UI를 그리고 있었다. 우리는 안드로이드 위젯
kotlinworld.com
Compose에서 ConstraintLayout을 쓰는 것을 권장하지 않는 이유
[Android] Compose에서ConstraintLayout을 쓰는 것이 권장 사항이 아닌 이유
ConstraintLayout이란? ConstraintLayout이란 Layout속의 View들간에 제약조건(Constraints)을 설정함으로써 복잡한 뷰를 만들 수 있도록 설계된 레이아웃이다. 과거 xml에서는 Constraint Layout을 쓰는 것이 권..
kotlinworld.com
*위 글의 저작권은 모두 KotlinWorld Blog 주인에게 있습니다. 무단 복제나, 복사는 허용하지 않습니다.
