Jetpack Compose는 뷰와의 상호 운용성을 지원합니다. 뷰에서 Compose를 사용할 수 있고 Compose에서 뷰를 사용할 수 있습니다. 따라서 모든 뷰를 즉시 이전하지 않아도 기존 뷰 기반 앱에서 Compose를 채택할 수 있습니다.
이전 단계
- 계획 수립: 마이그레이션을 실행하기 위한 단계별 계획을 수립합니다. 우선순위가 지정된 이전 작업 백로그가 권장됩니다.
- 이전할 XML 후보 식별 : 계층 구조에서 리프 노드인 가장 작은 구성요소부터 식별하고 시작하여 하향식으로 계층 구조에서 점진적으로 더 높은 구성요소로 이전 계획을 확장합니다. 초기 마이그레이션에 적합한 후보는 작고 스테이트리스(Stateless)이며 종속 항목이 적습니다.
- 계층 구조 분석: 이전할 XML 뷰를 식별한 후 XML 레이아웃 구조와 구현을 분석합니다.
- 초기 상태 캡처: 스크린샷 테스트를 실행하여 선택한 XML 뷰의 초기 상태를 캡처합니다.
- 기본 요건: Compose 종속 항목 설정 프로젝트에 Compose 종속 항목과 컴파일러가 설정되어 있는지 확인합니다. 그렇지 않으면 Compose 종속 항목 및 컴파일러 설정을 따르세요.
- 필수사항: Compose 테마 설정 프로젝트에 이미 Compose 테마가 설정되어 있는지 확인합니다. 그렇지 않으면 Compose 테마를 따르세요. 앱이 상호 운용되는 동안 원래 XML 테마를 유지하고 XML 테마를 Compose로 이전하여 프로젝트가 Compose로 완전히 이전될 때까지 선언하는 방법을 이해합니다.
- XML 뷰를 Compose로 이전: XML 코드를 Compose로 변환하고, 적절한 테마를 적용하고, 이전된 컴포저블에 Compose 미리보기를 추가합니다. 일반적인 이전 시나리오의 경우 추가 리소스를 참고하세요. 예를 들어 Compose에서 Lazy API로 이전하려면 RecyclerView를 Compose로 이전의 단계를 따르세요.
- 사용 사례 바꾸기: 새 Compose 구성요소를 사용하도록 이전 XML 뷰 사용 사례를 바꿉니다. Compose를 뷰에 추가하려면 Compose를 뷰에 추가의 단계를 따르세요. Compose에 뷰를 추가하려면 Compose의 뷰의 단계를 따르세요.
- 마이그레이션 검증: 스크린샷 테스트에서 캡처된 초기 상태가 마이그레이션된 컴포저블의 Compose 미리보기와 동일한지 확인합니다. 일치하지 않으면 새 컴포저블 UI를 반복하고 초기 상태와 일치하도록 개선합니다. 새 컴포저블의 새로운 Compose UI 테스트를 만듭니다.
- XML 삭제: 새로 이전된 컴포저블이 초기 XML UI와 일치하면 사용하지 않는 XML 뷰 코드와 테스트를 삭제합니다.
일반적인 이전 시나리오
컴포저블에서 dp 및 sp 확장 프로그램이 사용되는지 확인합니다 (16.dp, 20.sp).
tools:text이 XML 뷰에 있으면 별도의 @Preview 컴포저블에서 사용합니다.
속성-수정자 변환
대부분의 XML 속성은 modifier 체인 또는 컴포저블 함수의 매개변수가 됩니다.
| XML 속성 | Compose Equivalent |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(기본 동작, 일반적으로 수정자가 필요하지 않음) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (외부 패딩) |
android:gravity="center" |
contentAlignment = Alignment.Center (상자) 또는 horizontalAlignment / verticalArrangement (열/행) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
if (visible) { ... } 블록으로 래핑 |
스타일 이전 (styles.xml)
XML 스타일은 여러 속성을 결합하여 스타일을 만드는 경우가 많습니다. Compose에서는 특정 스타일로 컴포저블 변형을 만들어 이를 실행합니다.
스타일과 기본 구성요소에 따라 이름이 지정된 별도의 @Composable 함수를 제공하여 이러한 구성요소의 스타일과 사용 사례의 차이를 나타냅니다.
- 패턴: XML 요소가 맞춤 스타일(예:
style="@style/MyPrimaryButton")인 경우 인라인으로 스타일을 복제하지 마세요. 대신 특정 컴포저블을 만들라고 제안합니다. - 예:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - 편지쓰기:
MyPrimaryButton(onClick = { ... })
- XML:
- 일반 속성 그룹: 스타일이 일반 수정자(예: 패딩 + 높이)를 설정하는 경우 읽을 수 있는 확장 프로그램 속성이나 공유 수정자 변수로 추출합니다.