Migrating to Jetpack Compose – XML을 벗어나 컴포저블 생성하기

식물의 이름을 마이그레이션하는 것으로 시작해보자. 보다 정확하게는 fragment_plant_detail.xml에서 제거한 @+id/plant_detail_name의 id를 가진 TextView다. 다음은 XML 코드다.

<TextView
    android:id="@+id/plant_detail_name"
    ...
    android:layout_marginStart="@dimen/margin_small"
    android:layout_marginEnd="@dimen/margin_small"
    android:gravity="center_horizontal"
    android:text="@{viewModel.plant.name}"
    android:textAppearance="?attr/textAppearanceHeadline5"
    ... />

textAppearanceHeadline5 스타일이 있고, 가로 여백이 8.dp이고, 화면의 가로 중앙에 어떻게 배치되는지 확인하자. 단, 표시할 제목은 리포지토리 계층에서 가져온 PlantDetailViewModel에 의해 노출된 LiveData에서 관찰(observe)된다.

LiveData 관찰은 나중에 다루기 때문에, 가정을 먼저 해보자. 이름을 사용할 수 있고 그 이름이 우리가 PlantDetailDescription.kt 내에서 생성하는 새로운 PlantName 컴포저블의 매개변수로 전달된다고 가정한다. 이 컴포저블은 PlantDetailDescription 컴포저블로부터 나중에 호출된다.

PlantDetailDescription.kt

@Composable
private fun PlantName(name: String) {
    Text(
        text = name,
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}

@Preview
@Composable
private fun PlantNamePreview() {
    MaterialTheme {
        PlantName("Apple")
    }
}

미리보기에는 다음과 같이 표현된다.

Note: 수행 중인 작업을 확인할 때마다 에뮬레이터를 배포하지 않아도 되도록 Compose 미리 보기(Preview) 기능을 사용할 수 있다.

표시 조건:

• Text의 스타일은 XML 코드에서 textAppearanceHeadline5에 매핑되는 MaterialTheme.typography.h5다.
• Modifier는 Text를 장식하여 XML 버전처럼 보이도록 조정한다.
• fillMaxWidth Modifier는 XML 코드의 android:layout_width=”match_parent”에 해당한다.
• margin_small의 수평 padding은 View 시스템에서 사용하는 dimension Resource 헬퍼 함수로부터 온 값이다.
• wrapContentWidth를 사용하여 Text를 수평으로 정렬한다.

Note: 컴포즈는 dimens.xml 및 strings.xml 파일, 즉 dimensionResource(id) 및 stringResource(id)에서 값을 가져오는 편리한 메서드를 제공한다.

후원하기