modifier의 기본적인 내용, 커스텀 컴포저블을 생성하는 방법, 하위요소들을 수동으로 측정하고 배치하는 방법에 대해서 알았으므로 modifier가 내부에서 어떻게 작동하는지 더 잘 이해할 수 있을 것이다. 요약하자면, modifier들은 우리가 컴포저블의 행동을 커스텀 할 수 있도록 한다. 다양한 modifier들을 체이닝하여 함께 결합할 수 있다. 여러가지 형식의 modifier들이 있지만, 이번 섹션에서는 UI 컴포넌트가 측정되고 더보기…
Layout의 기초를 다뤄 보았다면, API의 유연성을 보여줄만한 더 복잡한 예제를 만들자. 다음 나오는 사진의 중앙에 있는 Material Study Owl의 커스텀 staggered grid를 만들어 보자. Owl의 staggered grid는 아이템을 수직적으로 전개하고, 하나의 열에 주어진 n개의 행을 채워 넣는다. Row에 Column들을 채우는 방식으로는 staggered grid 레이아웃을 구성할 수 없다. 만약 준비된 데이터를 더보기…
컴포즈는 Column, Row 또는 Box와 같은 기본 제공하는 컴포저블들을 통해 작은 단위의 커스텀 레이아웃으로 만들어 재사용성을 높일 수 있도록 한다. 하지만, 수동으로 하위 컴포저블의 사이즈를 측정하고 배치해야 하는 것처럼, 무언가 앱에서 특별한 것을 만들어야 할 때가 있다. Note : View 시스템에서 커스텀 레이아웃을 만드려면, ViewGroup을 확장하고 onMeasure 및 onLayout과 같은 더보기…
애플리케이션에서 아이템 목록을 표현하는 것은 일반적인 패턴이다. Jetpack Compose는 이 패턴을 Row와 Column을 사용하여 좀 더 쉽게 구현할 수 있도록 도와준다. 또한 현재 보여지는 아이템들에 대해서만 조합하고 전개하도록 하는 lazy 목록도 제공한다. Column 컴포저블을 사용하여 100개의 아이템을 갖는 수직형 목록을 생성해보자. Column은 기본적으로 스크롤은 다루지 않기 때문에, 몇몇 아이템은 화면 더보기…
컴포즈에는 앱을 만드는데 필요한 개발자가 사용할 수 있는 머테리얼 컴포넌트 컴포저블이 딸려있다. 가장 높은 수준의 컴포저블은 Scaffold다. Scaffold Scaffold(발판)는 기초적인 머테리얼 디자인 레이아웃 구조를 구현할 수 있도록 도와준다. TopAppBar, BottomAppBar, FloatingActionButton 및 Drawer와 같은 가장 일반적인 최상위 머테리얼 컴포넌트에 대한 Slot을 제공한다. Scaffold를 사용하면 이러한 컴포넌트들을 배치하고 올바르게 동작하도록 한다. 더보기…
컴포즈는 UI를 만들 때 사용할 수 있는 고수준의 머테리얼 컴포넌트 컴포저블을 제공한다. Slot API는 컴포저블에 사용자 정의 계층을 얹기 위한 패턴이다. 이 유즈케이스는 Material Componts 컴포저블을 사용한다. Note: 이번 섹션은 이론적인 내용만 있으므로, 여기 있는 코드를 안드로이드 스튜디오에서 사용하지 말자. 예제를 살펴보자. 머테리얼 버튼에 대해 생각해보면, 버튼이 어떻게 보여지고, 버튼이 무엇을 더보기…
Modifier를 사용하면 컴포저블을 꾸밀 수 있다. 동작, 모양을 변경하고, 접근성 레이블과 같은 정보를 추가하고, 사용자 입력을 처리하거나, 클릭, 스크롤, 드래그 또는 확대/축소 가능 항목을 만드는 것과 같은 고급 상호 작용을 추가할 수도 있다. Modifier는 일반 Kotlin 객체다. 변수에 할당하고 재사용할 수 있다. 여러 Modifier를 차례로 연결하여 구성할 수도 있다. 이전 더보기…
새 Compose 프로젝트를 시작하려면 Android Studio Arctic Fox를 열고 아래와 같이 새 Android Studio 프로젝트 시작을 선택한다. 이 화면이 나타나지 않는다면, File > New > New Project로 가자. 새로운 프로젝트를 생성할 때, Empty Compose Activity를 사용가능한 템플릿으로 부터 선택한다. Next를 클릭하고 평소와 같이 프로젝트를 구성한다. minimumSdkVersion을 컴포즈가 지원하는 최소 API레벨인 더보기…
Jetpack Compose basics 코드랩을 통해 간단한 UI를 컴포즈로 만들어 보았다. 화면에 아이템(세로 및 가로, 제각기)을 배치하고 그 안에 있는 요소의 정렬을 구성할 수 있는 Column 및 Row와 같은 유연한 레이아웃 컴포저블 뿐만 아니라 Text와 같은 컴포저블 함수를 사용하여 Compose로 간단한 UI를 구축하는 방법을 배웠다. 반면에 아이템이 세로 또는 가로로 표시되는 더보기…
이번 과정에서는 이미 알고있는 것들을 적용하고 몇가지 힌트와 함께 새로운 개념을 배우것이다. 이 화면을 만들어 보자. 버튼을 아이콘으로 교체하기 하위 Icon과 IconButton 컴포저블을 함께 사용한다. 아이콘 리소스는 material-icons-extended 아티팩트에서 사용가능한 Icons.Filled.ExpandLess 및 Icons.Filled.ExpandMore를 사용한다. 다음의 코드라인을 app/build.gradle 파일의 의존성으로 추가한다. padding을 수정하여 정렬한다. 접근성을 위해 content description을 추가하자. 문자열 리소스 더보기…