기본적으로 컴포즈는 ComposeView가 윈도우에서 분리될 때마다 컴포지션을 삭제한다. 이런 부분은 ComposeView가 프레그먼트내에서 사용될 때 여러가지 이유로 바람직 하지않다. 컴포지션은 Compose UI 보기 타입이 상태를 저장하기 위해, 프래그먼트의 View 생명주기를 따라야 한다. 트랜지션 또는 윈도우 트랜지션이 발생할 때 Compose UI 요소를 화면에 유지한다는 것은, 전환하는 동안 ComposeView 자체는 윈도우에서 분리된 후에도 더보기…
이제 식물 설명을 마이그레이션해 해보자. fragment_plant_detail.xml의 코드에는 화면에 표시할 텍스트를 XML에 알려주기 위해 app:renderHtml=”@{viewModel.plant.description}”이 있는 TextView가 있다. renderHtml은 PlantDetailBindingAdapters.kt 파일에서 찾을 수 있는 바인딩 어댑터다. 구현은 HtmlCompat.fromHtml을 사용하여 TextView의 텍스트를 설정한다. 그러나 컴포즈는 현재 Spanned 클래스를 지원하지 않고, HTML 형식의 텍스트를 표시하지 않는다. 따라서 이 한계를 우회하려면, 컴포즈 코드의 View 더보기…
이제 UI에서 누락된 사항인 물주기 정보 및 식물 설명의 마이그레이션을 완료하는 것이 더 쉬워졌다. 이전에 수행한 XML 코드 접근 방식을 동일하게 살펴보면, 이미 나머지 화면을 마이그레이션 할 수 있다. fragment_plant_detail.xml에서 이전에 제거한 물주기 정보 XML 코드는 ID가 plant_watering_header 및 plant_watering인 두 개의 TextView로 구성된다. 이전에 했던 작업과 유사하게 PlantWatering이라는 새 더보기…
이제 제목을 화면에 연결해 보자. 그렇게 하려면 PlantDetailViewModel을 사용하여 데이터를 로드해야 한다. 이를 위해 컴포즈는 ViewModel 및 LiveData에 대한 통합과 함께 제공된다. ViewModel PlantDetailViewModel의 인스턴스가 Fragment에서 사용되므로 PlantDetailDescription에 매개변수로 전달할 수 있다. Note: ViewModel을 사용할 수 없거나, 해당 종속성을 컴포저블에 전달하고 싶지 않은 경우 컴포저블 내에서 viewModel 함수를 사용하여 ViewModel의 더보기…
식물의 이름을 마이그레이션하는 것으로 시작해보자. 보다 정확하게는 fragment_plant_detail.xml에서 제거한 @+id/plant_detail_name의 id를 가진 TextView다. 다음은 XML 코드다. textAppearanceHeadline5 스타일이 있고, 가로 여백이 8.dp이고, 화면의 가로 중앙에 어떻게 배치되는지 확인하자. 단, 표시할 제목은 리포지토리 계층에서 가져온 PlantDetailViewModel에 의해 노출된 LiveData에서 관찰(observe)된다. LiveData 관찰은 나중에 다루기 때문에, 가정을 먼저 해보자. 이름을 사용할 수 더보기…
식물 세부 정보 화면에서 전체 화면 구조는 그대로 두고 식물에 대한 설명을 컴포즈로 마이그레이션하려 한다. 여기에서는 마이그레이션 계획 섹션에서 언급된 ‘컴포즈 및 View 함께 사용하기’ 마이그레이션 전략을 따르게 된다. 컴포즈는 UI를 렌더링하기 위해 호스트 액티비티 또는 프레그먼트가 필요하다. Sunflower에서는 모든 화면이 프레그먼트를 사용하므로 setContent 메서드를 사용하여 Compose UI 콘텐츠를 호스팅할 더보기…
컴포즈는 main 브랜치에서 다운로드한 코드에 이미 추가되어 있다. 그러나 컴포즈가 작동하려면 무엇이 필요한지 살펴보도록 하자. app/build.gradle(또는 build.gradle(모듈: compose-migration.app)) 파일을 열면, 이 파일이 컴포즈 종속성을 가져오는 방법과 Android Studio가 buildFeatures { compose true } 플래그를 사용하여 컴포즈와 함께 작동할 수 있도록 하는 방법을 확인할 수 있다. app/build.gradle 컴포즈 종속성 버전은 프로젝트 더보기…
코드 얻기 Github로 부터 코드랩 코드를 얻자. $ git clone https://github.com/googlecodelabs/android-compose-codelabs 또는 저장소를 Zip 파일로 다운로드할 수 있다. 안드로이드 스튜디오 열기 이 코드랩에는 최신 버전의 Android Studio Arctic Fox가 필요하다. 샘플 앱 실행하기 방금 다운로드한 코드에는 사용 가능한 모든 컴포즈 코드랩에 대한 코드가 포함되어 있다. 이 코드랩을 완료하기위해 Android Studio 더보기…
소개 컴포즈와 View 시스템은 함께 상호운용할 수 있다. 이 코드랩에서는 Sunflower의 식물 세부 정보 화면의 일부를 컴포즈로 마이그레이션한다. 현실적인 앱을 컴포즈로 마이그레이션할 수 있도록 프로젝트 사본을 만들었다. 코드랩이 끝나고, 마이그레이션을 계속해서 할 수 있고, Sunflower의 나머지 화면을 변환할 수 있다. 배울 내용 이 코드랩에서 우리는 다음의 내용을 배운다. 다양한 마이그레이션 더보기…
이 단계에서는 액션(Action)을 사용하여 RallyTopAppBar의 다른 탭을 클릭하면 선택 항목이 변경되는지 확인한다. Action에 대한 부분은 Testing Cheat Sheet를 참조하자. 힌트: 테스트 범위에는 RallyApp이 소유한 상태(State)가 포함되어야 한다. 행동(behavior)이 아니라 상태(state)를 확인(verify)하자. 호출된 객체와 방법에 의존하는 대신 UI 상태에 대한 주장(assertion)을 사용한다. 이 연습문제에는 제공된 해답이 없다. 정답이 없지만 열심히 연습문제를 더보기…