Charlezz

이제 몇 가지 기본 애니메이션 API에 익숙해졌으므로 더 복잡한 애니메이션을 만들 수 있는 Transition API를 살펴보자. 이 예에서는 탭 인디케이터를 커스터마이징 한다. 이는 현재 선택된 탭에 표시되는 사각형이다. HomeTabIndicator 컴포저블에서 TODO 4를 찾아 탭 인디케이터가 어떻게 구현되는지 확인해보자. 여기서 IndicatorLeft는 탭 행(tab row)에서 인디케이터의 왼쪽 테두리고, IndicatorRight는 인디케이터의 오른쪽 테두리다. 더보기…

앱은 여러 주제(topic)를 콘텐츠내에 보여준다. 그 중 하나를 클릭하면 해당 주제에 대한 본문이 열리고 표시된다. 본문이 표시되거나 숨겨지면 텍스트가 포함된 카드가 확장 및 축소된다. TopicRow 컴포저블에서 TODO 3에 대한 코드를 확인하자. 여기에서 Column 컴포저블은 내용이 변경되면 크기가 변경된다. animateContentSize 수정자를 추가하여 크기 변경을 애니메이션할 수 있다. 앱을 실행하고 주제 중 더보기…

앱의 콘텐츠를 스크롤하면 스크롤 방향에 따라 플로팅 액션 버튼이 확장되고 축소되는 것을 알 수 있다. TODO 2-1을 찾아서 이것이 어떻게 작동하는지 확인하자. HomeFloatingActionButton 컴포저블 안에 있다. “EDIT”라는 텍스트는 if 문을 사용하여 표시하거나 숨긴다. 이 가시성 변경에 애니메이션을 적용하는 것은 if를 AnimatedVisibility 컴포저블로 간단히 바꾸는 것뿐이다. 앱을 실행하고 지금 FAB(Floating Action 더보기…

컴포즈에서 가장 간단한 Animation API부터 시작하자. ‘start‘ configuration을 실행하고 상단에서 “Home” 및 “Work” 버튼을 클릭하여 탭을 전환해 보자. 실제로 탭 내용을 전환하지는 않지만 컨텐츠 배경색이 변경되는 것을 확인할 수 있다. TODO tool window에서 TODO 1을 클릭하고 이것이 어떻게 구현되는지 확인하자. Home 컴포저블 안에 있다. 여기서 tabPage는 State 객체에 의해 지원되는 더보기…

코드랩 코드를 다운로드 한다. 다음의 커맨드를 이용하여 리포지토리를 클론할 수 있다. 또는 zip 파일을 다운로드할 수 있다 . AnimationCodelab 프로젝트를 Android Studio로 불러온다. Note : 샘플을 만들 때 사용한 것보다 최신 버전의 Android Studio를 실행 중인 경우 Gradle 버전을 업데이트하라는 알림이 표시될 수 있다. 자유롭게 하거나 시간이 부족하면 건너뛰도록 하자. 프로젝트에는 여러 모듈이 있다. start모듈 : 코드랩의 시작 상태. 더보기…

이 코드랩에서는 Jetpack Compose에서 일부 애니메이션 API를 사용하는 방법을 배운다. Jetpack Compose는 UI 개발을 단순화하도록 설계된 최신 UI 툴킷이다. Jetpack Compose를 처음 사용하는 경우 이 코드랩보다 먼저 선핵되어야 할 여러 코드랩이 있다. Jetpack Compose 기본 사항 Jetpack Compose의 레이아웃 Jetpack Compose에서 상태 사용 우리가 배울 것 몇 가지 기본 애니메이션 API를 더보기…

컴포즈는 Android View 스타일 또는 CSS 스타일과 같은 컴포넌트 스타일을 추출하는 명시적인 방법을 제공하지 않는다. 모든 컴포즈 컴포넌트는 Kotlin으로 작성되므로 동일한 목표를 달성하는 다른 방법이 있다. 대신 커스터마이즈 된 컴포넌트들의 자체 라이브러리를 만들고 앱 전체에서 사용하자. 우리는 이미 우리 앱에 아래와 같은 코드 작업들을 해오고 있는 중이다. Header 컴포저블은 기본적으로 더보기…

컬러나 서체와 마찬가지로, 모양(shape) 테마를 설정하면 Material 컴포넌트에 반영된다. 예를 들어 Button은 작은 컴포넌트에 대해 설정된 모양을 선택한다. 색상과 마찬가지로 Material 컴포넌트는 기본 매개변수를 사용하므로, 컴포넌트가 사용할 모양(shape)의 카테고리를 확인하거나 대안을 제공하는 것이 간단하다. shape 카테고리에 대한 컴포넌트 전체는 공식문서를 확인하자. 일부 컴포넌트는 컨텍스트에 맞게 수정된 테마 shape을 사용한다. 예를 더보기…

텍스트로 작업할 때, Text 컴포저블을 사용하여 텍스트를 표시하고, 텍스트 입력을 위해 TextField 및 OutlinedTextField를 사용한다 그리고 텍스트에 단일 스타일을 적용하기 위해 TextStyle을 사용한다. AnnotatedString을 사용하여 텍스트에 여러 스타일을 적용할 수 있다. 이전 섹션의 색상에서 보았던 것처럼, 텍스트를 표시하는 머티리얼 컴포넌트는 커스터마이징 한 타이포그래피 테마를 선택한다. 이를 구현하는 것은 색상작업에서 봤던 더보기…

이전 단계에서는 앱의 색상, 서체 스타일 및 모양을 설정하기 위해 고유한 테마를 만드는 방법을 살펴보았다. 모든 Material 컴포넌트는 이러한 커스터마이징을 창조적으로 사용한다. 예를 들어 FloatingActionButton 컴포저블은 기본적으로 테마의 보조(secondary) 색상을 사용하지만, 이 매개변수에 다른 값을 지정하여 다른 색상을 설정할 수 있다. Note: 머티리얼 컴포넌트에서 사용하는 테마 색상을 확인하는 것은 컴포넌트의 더보기…