컴포즈는 Android View 스타일 또는 CSS 스타일과 같은 컴포넌트 스타일을 추출하는 명시적인 방법을 제공하지 않는다. 모든 컴포즈 컴포넌트는 Kotlin으로 작성되므로 동일한 목표를 달성하는 다른 방법이 있다. 대신 커스터마이즈 된 컴포넌트들의 자체 라이브러리를 만들고 앱 전체에서 사용하자. 우리는 이미 우리 앱에 아래와 같은 코드 작업들을 해오고 있는 중이다. Header 컴포저블은 기본적으로 더보기…
컬러나 서체와 마찬가지로, 모양(shape) 테마를 설정하면 Material 컴포넌트에 반영된다. 예를 들어 Button은 작은 컴포넌트에 대해 설정된 모양을 선택한다. 색상과 마찬가지로 Material 컴포넌트는 기본 매개변수를 사용하므로, 컴포넌트가 사용할 모양(shape)의 카테고리를 확인하거나 대안을 제공하는 것이 간단하다. shape 카테고리에 대한 컴포넌트 전체는 공식문서를 확인하자. 일부 컴포넌트는 컨텍스트에 맞게 수정된 테마 shape을 사용한다. 예를 더보기…
텍스트로 작업할 때, Text 컴포저블을 사용하여 텍스트를 표시하고, 텍스트 입력을 위해 TextField 및 OutlinedTextField를 사용한다 그리고 텍스트에 단일 스타일을 적용하기 위해 TextStyle을 사용한다. AnnotatedString을 사용하여 텍스트에 여러 스타일을 적용할 수 있다. 이전 섹션의 색상에서 보았던 것처럼, 텍스트를 표시하는 머티리얼 컴포넌트는 커스터마이징 한 타이포그래피 테마를 선택한다. 이를 구현하는 것은 색상작업에서 봤던 더보기…
이전 단계에서는 앱의 색상, 서체 스타일 및 모양을 설정하기 위해 고유한 테마를 만드는 방법을 살펴보았다. 모든 Material 컴포넌트는 이러한 커스터마이징을 창조적으로 사용한다. 예를 들어 FloatingActionButton 컴포저블은 기본적으로 테마의 보조(secondary) 색상을 사용하지만, 이 매개변수에 다른 값을 지정하여 다른 색상을 설정할 수 있다. Note: 머티리얼 컴포넌트에서 사용하는 테마 색상을 확인하는 것은 컴포넌트의 더보기…
머티리얼 테마 Jetpack Compose에서 테마를 구현하기 위한 핵심 요소는 MaterialTheme 컴포저블 함수다. 이 컴포저블을 컴포즈 계층에 배치하면 그 안의 모든 컴포넌트에 대한 색상, 유형 및 모양에 대한 커스터마이징을 할 수 있다. 이 컴포저블이 라이브러리에서 정의되는 방법은 다음과 같다. 나중에 색상, 타이포그래피 및 모양 속성을 노출하는 MaterialTheme 객체를 사용하여, 이 컴포저블에 전달된 매개변수를 개선할 더보기…
Jetpack Compose는 디지털 인터페이스를 만들기 위한 종합적인 디자인 시스템인 Material Design 의 구현을 제공한다. 머티리얼 디자인 컴포넌트 (Button, Card, Switch 등)는 머티리얼 테마를 기반으로 구축되며 이는 머티리얼 디자인을 커스터마이즈 하여 제품 브랜드를 더 잘 반영 하는 체계적인 방법이다. 머티리얼 테마는 색상 , 타이포그래피 및 모양 속성으로 구성된다. 이를 커스터마이즈하면 앱을 빌드하는 데 사용하는 컴포넌트들에 자동으로 반영된다. Material Theming을 이해하면 Jetpack Compose 앱의 테마를 지정하는 방법을 이해하는 데 도움이 되고, 그래서 개념에 더보기…
이 단계에서는 스타일링 할 간단한 뉴스 리더 앱으로 구성된 코드를 다운로드한다. 필요한 것 Android Studio Arctic Fox 코드 다운로드 git이 설치되어 있으면 아래 명령을 실행하면 된다. git이 설치되어 있는지 확인하려면 터미널 또는 명령줄에 git –version 입력하고 올바르게 실행되는지 확인한다. git이 없는 경우 다음 버튼을 클릭하여 이 코드랩의 모든 코드를 다운로드할 수 더보기…
1. 소개 이 코드랩에서는 Jetpack Compose 의 테마 API를 사용하여 애플리케이션의 스타일을 지정 하는 방법을 배운다. 밝고 어두운 테마와 같은 여러 테마를 지원하여 애플리케이션 전체에서 일관되게 사용되도록 색상, 모양 및 타이포그래피를 사용자 지정하는 방법을 살펴보자. 무엇을 배울 것인가 이 코드랩에서는 다음의 내용을 배운다. 머티리얼 디자인 입문 및 브랜드에 맞게 커스터마이징 하는 법 컴포즈가 머티리얼 더보기…
복잡한 UI를 표시하는 stateless 컴포저블에는 많은 매개변수가 포함될 수 있다. 매개변수가 많지 않고, 매개변수가 직접적으로 컴포저블을 설정하는 경우, 이건 괜찮다. 그러나 때로는 하위 컴포저블을 설정하기 위해 매개변수를 전달해야 한다. 우리의 네오-모던 인터렉티브 디자인에서는 디자이너가 Add 버튼을 상단에 유지하고, 인라인 에디터에는 두개의 이모지 버튼으로 교체하기를 원한다. 이 경우를 처리하기 위해 TodoItemInput에 더보기…
드디어 네오-모던 인터랙티브 디자인을 구현할 준비가 되었다! 참고로, 우리가 구축하려고 하는 것은 다음과 같다. TodoScreen에 state 및 event 전달하기 TodoViewModel에서 이 화면에 필요한 모든 state와 event 정의를 끝냈다. 이제 TodoScreen을 업데이트하여 화면을 표시하는 데 필요한 state와 event를 가져온다. TodoScreen.kt를 열고 TodoScreen의 메서드 시그니쳐를 변경하여 추가하자. 현재 편집 중인 항목: currentEditing: 더보기…