Fake it till you make it

컴포즈는 Column, Row 또는 Box와 같은 기본 제공하는 컴포저블들을 통해 작은 단위의 커스텀 레이아웃으로 만들어 재사용성을 높일 수 있도록 한다. 하지만, 수동으로 하위 컴포저블의 사이즈를 측정하고 배치해야 하는 것처럼, 무언가 앱에서 특별한 것을 만들어야 할 때가 있다. Note : View 더보기…

애플리케이션에서 아이템 목록을 표현하는 것은 일반적인 패턴이다. Jetpack Compose는 이 패턴을 Row와 Column을 사용하여 좀 더 쉽게 구현할 수 있도록 도와준다. 또한 현재 보여지는 아이템들에 대해서만 조합하고 전개하도록 하는 lazy 목록도 제공한다. Column 컴포저블을 사용하여 100개의 아이템을 갖는 수직형 목록을 더보기…

컴포즈에는 앱을 만드는데 필요한 개발자가 사용할 수 있는 머테리얼 컴포넌트 컴포저블이 딸려있다. 가장 높은 수준의 컴포저블은 Scaffold다. Scaffold Scaffold(발판)는 기초적인 머테리얼 디자인 레이아웃 구조를 구현할 수 있도록 도와준다. TopAppBar, BottomAppBar, FloatingActionButton 및 Drawer와 같은 가장 일반적인 최상위 머테리얼 컴포넌트에 대한 더보기…

컴포즈는 UI를 만들 때 사용할 수 있는 고수준의 머테리얼 컴포넌트 컴포저블을 제공한다. Slot API는 컴포저블에 사용자 정의 계층을 얹기 위한 패턴이다. 이 유즈케이스는 Material Componts 컴포저블을 사용한다. Note: 이번 섹션은 이론적인 내용만 있으므로, 여기 있는 코드를 안드로이드 스튜디오에서 사용하지 말자. 예제를 더보기…

Modifier를 사용하면 컴포저블을 꾸밀 수 있다. 동작, 모양을 변경하고, 접근성 레이블과 같은 정보를 추가하고, 사용자 입력을 처리하거나, 클릭, 스크롤, 드래그 또는 확대/축소 가능 항목을 만드는 것과 같은 고급 상호 작용을 추가할 수도 있다. Modifier는 일반 Kotlin 객체다. 변수에 할당하고 재사용할 더보기…

새 Compose 프로젝트를 시작하려면 Android Studio Arctic Fox를 열고 아래와 같이 새 Android Studio 프로젝트 시작을 선택한다. 이 화면이 나타나지 않는다면, File > New > New Project로 가자. 새로운 프로젝트를 생성할 때, Empty Compose Activity를 사용가능한 템플릿으로 부터 선택한다. Next를 더보기…

Jetpack Compose basics 코드랩을 통해 간단한 UI를 컴포즈로 만들어 보았다. 화면에 아이템(세로 및 가로, 제각기)을 배치하고 그 안에 있는 요소의 정렬을 구성할 수 있는 Column 및 Row와 같은 유연한 레이아웃 컴포저블 뿐만 아니라 Text와 같은 컴포저블 함수를 사용하여 Compose로 간단한 더보기…

이번 과정에서는 이미 알고있는 것들을 적용하고 몇가지 힌트와 함께 새로운 개념을 배우것이다. 이 화면을 만들어 보자. 버튼을 아이콘으로 교체하기 하위 Icon과 IconButton 컴포저블을 함께 사용한다. 아이콘 리소스는 material-icons-extended 아티팩트에서 사용가능한 Icons.Filled.ExpandLess 및 Icons.Filled.ExpandMore를 사용한다. 다음의 코드라인을 app/build.gradle 파일의 의존성으로 추가한다. 더보기…

지금까지는 컴포저블 함수에 어떠한 스타일도 적용하지 않았고, 다크모드 지원을 포함하는 적당한 기본값으로만 코드를 작성했다. BasicsCodelabTheme과 MaterialTheme을 내부를 살펴보자. ui/Theme.kt 파일을 열어보면 BasicsCodelabTheme이 MaterialTheme을 사용하여 구현한 것을 확인할 수 있다. MaterialTheme은 컴포저블 함수로 머테리얼 디자인 가이드로부터 스타일링 원칙들을 반영하고 있다. 해당 더보기…

컴포즈에서 여러 방법으로 UI에 애니메이션을 적용할 수 있다. 간단한 애니메이션을 위한 고수준의 API 부터 전체를 제어하고 복잡한 트렌지션을 위한 저수준의 API까지 있다. 자세한 내용은 문서를 참조하자. 애니메이션을 구현하기 위해 animateDpAsState라는 컴포저블 함수를 사용해볼 것이다. 이 함수는 애니메이션이 끝날 때까지 값이 더보기…