Compose PreviewParameterProvider 알아보기

안녕하세요~ 매시업 안드로이드팀 주지혜입니다.

 

Compose는 외부에서 데이터를 주입받아, 이 데이터가 변경되면 리컴포지션을 통해 UI 를 갱신하는 구조로 동작합니다. 때문에 프리뷰를 보기 위해서도 컴포저블에 샘플 데이터를 제공해야 하는데요. 프리뷰와 샘플 데이터를 적절하게 활용하면 다양한 케이스에 대한 UI를 미리 확인해볼 수 있어서 컴포저블 함수가 잘 구성되었는지 손쉽게 알 수 있습니다.

 

프리뷰에 샘플 데이터를 제공하는 방법에는 여러가지가 있습니다. 프리뷰 내의 컴포저블 함수에 직접 데이터를 넣어줄 수도 있고, 다른 프리뷰에서도 활용하고 싶다면, 전역 변수를 통해 데이터셋을 넣어줄 수도 있습니다. 또 다른 방법으로는 PreviewParameterProvider를 사용해볼 수도 있습니다.

 

우선, 아래와 같은 컴포저블의 프리뷰를 구성하고 싶다고 가정해봅시다.

data class User(val name: String, val age: Int)

@Composable
fun UserInfo(user: User) {
    Text(user.name + " " + user.age)
}

 

가장 간단한 방법은 직접 데이터를 제공하는 방법입니다. 예시에서는 데이터 형태가 그렇게 복잡하지 않지만, 필요한 파라미터가 많아질수록 프리뷰 컴포저블 내에 샘플 데이터를 초기화하는 코드가 늘어나게 될 것입니다.

@Preview
@Composable
fun UserPreview() {
    UserInfo(user = User("Jens", 31))
}

 

PreviewParameterProvider를 사용하면 아래처럼 파라미터를 통해 데이터를 주입할 수 있게 됩니다.

@Preview
@Composable
fun UserPreview(@PreviewParameter(SampleUserProvider::class) user: User) {
    Text(user.name + " " + user.age)
}

class SampleUserProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(User("Jens", 31), User("Jim", 44))
}

 

PreviewParameterProvider는 샘플 데이터의 타입인 T를 받아, Sequence 형태로 샘플 데이터를 관리합니다.

/**
 * Interface to be implemented by any provider of values that you want to be injected as @[Preview]
 * parameters. This allows providing sample information for previews.
 */
@JvmDefaultWithCompatibility
interface PreviewParameterProvider<T> {
    /**
     * [Sequence] of values of type [T] to be passed as @[Preview] parameter.
     */
    val values: Sequence<T>

    /**
     * Returns the number of elements in the [values] [Sequence].
     */
    val count get() = values.count()
}

 

Sequence 형태로 데이터를 관리하기 때문에, 한번의 주입만으로도 안드로이드 스튜디오에서 여러개의 프리뷰를 한번에 만들어준다는 장점이 있습니다. 그러므로 Provider를 구현할 때 케이스별 샘플 데이터를 넣어주게 되면, 프리뷰를 따로따로 만들어주지 않아도, 케이스별 UI를 한번에 확인할 수 있게 됩니다.

 

PreviewParameterProvider는 간단한 데이터나 UI보다는, 대량의 데이터가 필요하거나 상태별 UI를 확인하고 싶은 경우에 보다 유용하게 사용될 수 있을 것 같습니다!