식물의 이름을 마이그레이션하는 것으로 시작해보자. 보다 정확하게는 fragment_plant_detail.xml에서 제거한 @+id/plant_detail_name의 id를 가진 TextView다. 다음은 XML 코드다. textAppearanceHeadline5 스타일이 있고, 가로 여백이 8.dp이고, 화면의 가로 중앙에 어떻게 배치되는지 확인하자. 단, 표시할 제목은 리포지토리 계층에서 가져온 PlantDetailViewModel에 의해 노출된 LiveData에서 관찰(observe)된다. LiveData 더보기…
식물 세부 정보 화면에서 전체 화면 구조는 그대로 두고 식물에 대한 설명을 컴포즈로 마이그레이션하려 한다. 여기에서는 마이그레이션 계획 섹션에서 언급된 ‘컴포즈 및 View 함께 사용하기’ 마이그레이션 전략을 따르게 된다. 컴포즈는 UI를 렌더링하기 위해 호스트 액티비티 또는 프레그먼트가 필요하다. Sunflower에서는 모든 더보기…
컴포즈는 main 브랜치에서 다운로드한 코드에 이미 추가되어 있다. 그러나 컴포즈가 작동하려면 무엇이 필요한지 살펴보도록 하자. app/build.gradle(또는 build.gradle(모듈: compose-migration.app)) 파일을 열면, 이 파일이 컴포즈 종속성을 가져오는 방법과 Android Studio가 buildFeatures { compose true } 플래그를 사용하여 컴포즈와 함께 작동할 수 있도록 더보기…
코드 얻기 Github로 부터 코드랩 코드를 얻자. $ git clone https://github.com/googlecodelabs/android-compose-codelabs 또는 저장소를 Zip 파일로 다운로드할 수 있다. 안드로이드 스튜디오 열기 이 코드랩에는 최신 버전의 Android Studio Arctic Fox가 필요하다. 샘플 앱 실행하기 방금 다운로드한 코드에는 사용 가능한 모든 컴포즈 더보기…
소개 컴포즈와 View 시스템은 함께 상호운용할 수 있다. 이 코드랩에서는 Sunflower의 식물 세부 정보 화면의 일부를 컴포즈로 마이그레이션한다. 현실적인 앱을 컴포즈로 마이그레이션할 수 있도록 프로젝트 사본을 만들었다. 코드랩이 끝나고, 마이그레이션을 계속해서 할 수 있고, Sunflower의 나머지 화면을 변환할 수 있다. 더보기…
이 단계에서는 액션(Action)을 사용하여 RallyTopAppBar의 다른 탭을 클릭하면 선택 항목이 변경되는지 확인한다. Action에 대한 부분은 Testing Cheat Sheet를 참조하자. 힌트: 테스트 범위에는 RallyApp이 소유한 상태(State)가 포함되어야 한다. 행동(behavior)이 아니라 상태(state)를 확인(verify)하자. 호출된 객체와 방법에 의존하는 대신 UI 상태에 대한 주장(assertion)을 더보기…
작성하는 모든 테스트는 테스트 대상과 적절하게 동기화(synchronization)되어야 한다. 예를 들어 onNodeWithText와 같은 finder를 사용할 때, 테스트는 시맨틱 트리를 쿼리하기 전에 앱이 유휴 상태가 될 때까지 기다린다. 동기화가 없으면 테스트에서 표시되기 전에 요소를 찾거나 불필요하게 기다릴 수 있다. 이 단계에서는 앱을 더보기…
시맨틱 트리(Semantics tree)는 항상 관련 정보만 표시하여 최대한 간결하게 만들려고 한다. 예를 들어, TopAppBar에서는 아이콘과 레이블이 다른 노드일 필요가 없다. “Overview” 노드를 살펴보자. 이 노드에는 selectable 컴포넌트에 대해 특별히 정의된 속성(예: Selected 및 Role)과 전체 탭에 대한 콘텐츠 설명(content description)이 더보기…
이 단계에서는 현재 탭의 레이블이 대문자로 표시되는지 확인한다. 가능한 해결책은 텍스트를 찾아(find) 대문자가 존재한다고 주장(assert)하는 것이다. 그러나 실행해보면 테스트가 실패하는 것을 확인할 수 있다.😱 이 단계에서는 semantics tree를 사용하여 디버깅하는 방법을 배운다. Semantics tree 컴포즈 테스트는 semantics tree라는 구조를 사용하여 더보기…
TopAppBarTest 파일 생성하기 AnimatingCircleTests.kt(app/src/androidTest/com/example/compose/rally)와 동일한 폴더에 새 파일을 만들고 TopAppBarTest.kt라고 이름을 짓는다. 컴포즈는 createComposeRule()을 호출하여 얻을 수 있는 ComposeTestRule과 함께 제공된다. 이 규칙을 사용하면 테스트 중인 Compose 콘텐츠를 설정하고, 상호 작용할 수 있다. ComposeTestRule을 추가하기 격리된 테스트 컴포즈 테스트에서는 예를 더보기…