Note: 이 코드랩에서는 컴포즈 테스트의 기본적인 내용을 알려주지 않는다. 이를 알아보려면 컴포즈 레이아웃 테스트 문서 또는 Testing in Jetpack Compose Codelab을 참조하자. TestNavHostController 사용과 같은 네비게이션 코드의 고급 테스트에 대해 자세히 알아보려면 Test Navigation 문서를 참조하자. 이 코드랩의 시작부터 우리는 navController를 컴포저블에 직접 전달하지 않고 대신 콜백을 매개변수로 전달했다. 즉, 더보기…
이제 NavHost를 완성했다. RallyApp 컴포저블로부터 NavHost를 추출하여 자신만의 함수로 만들 수 있고, 이를 RallyNavHost라고 부르자. 이는 navController와 직접 작업해야 하는 유일한 컴포저블이 될것이다. RallyNavHost 내에서 navController를 생성하지 않음으로써 RallyApp 내에서 상위 구조 일부인 탭 선택을 만드는 데 계속 사용할 수 있다. 또한 원래 NavHost를 호출 하던 곳에서 RallyNavHost(navController)로 교체하여 의도한 더보기…
인자 외에도 딥 링크를 사용하여 앱의 목적지를 다른 앱에 노출할 수 있다. 이 섹션에서는 이전 섹션에서 생성한 경로에 대한 새로운 딥 링크를 추가하여, 앱 외부에서 ‘이름’을 통해 직접 개별 계좌로의 딥 링크를 활성화한다. 인텐트 필터 추가하기 시작하려면 AndroidManifest.xml에 딥 링크를 추가하자. VIEW 작업과 BROWSABLE 및 DEFAULT <category>를 사용하여 RallyActivity에 대한 더보기…
Rally에 몇 가지 새로운 기능을 추가해 보자. Row(행)을 클릭하면 개별 계좌의 세부 정보를 표시하는 Account 화면을 추가하자. Navigation 인자는 경로를 동적으로 만든다. 네비게이션 인자는 하나 이상의 인자를 경로에 전달하고, 인자 타입 또는 기본값을 조정하여 경로 이동 동작을 동적으로 만드는 매우 강력한 도구다. Note: 명명된 인자는 {argument}와 같이 중괄호로 묶여 경로 더보기…
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 수정자를 추가하여 크기 변경을 애니메이션할 수 있다. 앱을 실행하고 주제 중 더보기…