[Android] Compose PreviewParameterProvider

via GIPHY

 

안녕하세요. 점냥입니다 :)

 

Compose Preview

Split로 Code와 Preview 동시에 확인가능

Compose Preview는 Compose로 UI를 구성하면서 앱 설치 없이 바로 UI를 확인하고자 할 때 사용하는 기능이에요. 사실 저는 이제껏 코드를 수정할 때마다 Preview에 실시간으로 반영이 된다고 알고 있었는데요. 찾아보니 String, Dp와 같은 리소스들은 실시간으로 반영이 되지만, 레이아웃 구조와 Composable 수정 등의 변경 사항은 빌드를 해야 한다고 하네요 :)

 

 

PreviewParameterProvider 사용하여 State 관리하기

@Preview
@Composable
fun ExpandedNewsResourcePreview() {
    NiaTheme {
        Surface {
            NewsResourceCardExpanded(
              newsResource = NewsResource(
                FakeDataSource.sampleResource.asEntity(),
                    NetworkEpisode(
                        id = 1,
                        name = "Now in Android 40",
                        alternateVideo = null,
                        alternateAudio = null,
                        publishDate = FakeDataSource.sampleResource.publishDate
                    ).asEntity(),
                    listOf(
                        NetworkAuthor(
                            id = 1,
                            name = "Android",
                            imageUrl = ""
                        ).asEntity()
                    ),
                    listOf(
                        NetworkTopic(
                            id = 3,
                            name = "Performance",
                            description = ""
                        ).asEntity()
                    )
      		   )
            )
        }
    }
}

 

일반적으로 Compose는 UI를 구성하기 위해 필요한 State를 외부에서 주입해주는 형태로 구현해요. 아쉽게도 Preview에는 ViewModel을 주입해줄 수 없어 다른 방법으로 State를 주입해주어야 합니다. 작은 크기의 State 경우에는 직접 객체 생성자를 호출해서 주입해 줄 수 있어요. 하지만 State의 정보가 많고 한 파일 내에 Preview가 여러개일 경우 파일 라인 수가 쓸데없이 길어지게 될 수도 있어요. 다른 방법으로 전역 변수로 선언해서 Preview State를 관리하는 방법도 좋지만 오늘 소개할  PreviewParameterProvider를 사용해보세요.

 

 

interface PreviewParameterProvider<T> {
    val values: Sequence<T>

    val count get() = values.count()
}

PreviewParameterProvider은 Preview에 주입해줄 State의 타입인 T를 Sequence로 관리합니다. 

 

Sequence는 위와 같은 상황에서 도움이 돼요. isError 값이 true인 State와 isError 값이 false인 State를 Sequnce로 만들어주면 하나의 Preview 함수에 주입해줘도 2개의 Preview 화면을 확인할 수 있는 것이죠.

 

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}