Rally는 초기에 Navigation을 사용하지 않는 기존 앱이다. 네비게이션으로 마이그레이션하는 몇 가지 단계는 다음과 같다. 네비게이션 의존성 추가 NavController 및 NavHost 설정하기 목적지 루트 준비하기 기존 목적지 메커니즘을 네비게이션 루트로 변경하기 네비게이션 의존성 추가하기 app/build.gradle 찾아서 열자. dependencies 부분에 navigation-compose 의존성을 추가하자. 최신버전은 공식문서를 참조하자 dependencies { implementation “androidx.navigation:navigation-compose:2.4.0-beta04” … } 더보기…
Jetpack Compose 소개 필요한 것 최신 Android 스튜디오 Arctic Fox 코틀린 지식 컴포즈에에 대한 기본적인 이해(예: @Composable 애노테이션) 이 코드랩 이전에 Jetpack Compose basics 코드랩을 먼저 보는 것을 고려하자. Compose와 함께 네비게이팅 Navigation은 특정 경로를 따라 앱 내의 한 대상에서 다른 대상으로 네비게이팅(= 탐색 or 이동) 할 수 있게 해주는 Jetpack 라이브러리다. Navigation 더보기…
이 마지막 섹션에서는 터치 입력을 기반으로 애니메이션을 실행하는 방법에 대해 알아보자. 이 시나리오에서 고려해야 할 몇 가지 고유한 사항이 있다. 첫째, 진행 중인 애니메이션이 터치 이벤트에 의해 가로챌 수 있다. 둘째, 애니메이션 값이 유일한 정보 소스가 아닐 수도 있다. 즉, 애니메이션 값을 터치 이벤트에서 오는 값과 동기화해야 할 수도 있습니다. 더보기…
현재 온도 옆에 있는 새로 고침 아이콘 버튼을 클릭해 보자. 앱이 최신 날씨 정보를 로드를 시작(하는 척) 한다. 로딩이 완료될 때까지 회색 원과 막대인 로딩 인디케이터가 나타난다. 이 인디케이터 알파 값(투명도) 애니메이션을 적용하여 프로세스가 진행 중임을 더 명확하게 표시해 보자. LoadingRow 컴포저블에서 TODO 5를 찾자. 이 값을 0f와 1f 사이에서 더보기…
이제 몇 가지 기본 애니메이션 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를 더보기…