Zenn
❤️

Jetpack ComposeのPreviewが超便利

2022/01/01に公開
Android
Kotlin
Jetpack
compose
preview
tech

この記事で伝えたいこと

使い回すけど、入れる値によって表示を変えたいっていうようなViewってありますよね。Previewを使えば、それが正常に動いているかどうかを、一発で分かって便利だよということです。
皆さんの使うきっかけになってもらえれば幸いです。

こんな感じで動く

例えば、メールソフトのメニューバーを考えます。受信箱や送信箱など、箱によってアイコンを変えてますよね（本当かよ？という方はGmailアプリを起動してみてください）。
それを、実装してみようと思います。
まず、最初にどんな感じで動くのか示します。

実行結果

実行結果はこんな感じです。実行結果と言ってもいちいちアプリを走らせるのではなく、コードと一緒に出てきます。ちゃんと、アイコンが変わっているのが一目瞭然ですね！
UIテストをわざわざ走らせなくても、どんなViewになるのかが分かるって便利だなーと思いました。
Box Selecter Result Preview

コード

@Preview
@Composable
fun BoxSelectButtonView(
    @PreviewParameter(BoxSelectButtonViewParameterProvider::class) paraView: ParameterBoxSelectButtonView
) {
    val listIcons: List<IconsList> = listOf(
        IconsList(
            Icons.Filled.Email, "INBOX"
        ),
        IconsList(
            Icons.Filled.Send, "OUTBOX"
        ),
        IconsList(
            Icons.Filled.Warning, "SPAM"
        ),
        IconsList(
            Icons.Filled.Delete, "TRASH"
        )
    )

    var iconData = listIcons
    .filter { it.boxName.lowercase() == paraView.boxName.lowercase() }
    if (iconData.size == 0) {
        iconData = listOf(
		IconsList(
			icon = Icons.Outlined.Folder, 
			boxName = paraView.boxName
		)
	)
    }
    if (iconData.size == 1) {
        TextButton(onClick = {},
            modifier = Modifier.fillMaxWidth()
        ) {
            Icon(iconData[0].icon, contentDescription = iconData[0].boxName)
            Text(text = iconData[0].boxName)
        }
    }
}

data class ParameterBoxSelectButtonView(
    val stateDrawer: DrawerState?,
    val boxName: String,
)

class BoxSelectButtonViewParameterProvider: PreviewParameterProvider<ParameterBoxSelectButtonView> {
    override val values: Sequence<ParameterBoxSelectButtonView>
        get() = sequenceOf(
            ParameterBoxSelectButtonView(
                boxName = "INBOX Dayo",
                stateDrawer = null,
            ),
            ParameterBoxSelectButtonView(
                boxName = "INBOX",
                stateDrawer = null,
            ),
            ParameterBoxSelectButtonView(
                boxName = "OUTBOX",
                stateDrawer = null,
            ),
            ParameterBoxSelectButtonView(
                boxName = "SPAM",
                stateDrawer = null,
            ),
            ParameterBoxSelectButtonView(
                boxName = "TRASH",
                stateDrawer = null,
            )
        )
}

少しだけ説明すると、PreviewParameterというのでPreview出来るように値を入れています。ただし、１つの値しか入れられないのでParameterBoxSelectButtonViewというラッパークラスを作って、それを使って値を入れています。
最後のBoxSelectButtonViewParameterProviderが重要なのですが、この中のsequenceOfに試したい入力パターンを入れます。IconsListに入力されたboxNameによって、何のアイコンを表示するかを変えています。もしも、このリストになければFolderがアイコンとして選択されます。

参考にした記事

Android公式ページ[1]では、わざわざComposable Functionを複数用意していたのですが、これは面倒だなと思って、こちらのSatoさんの記事[2]を参考にしました。ところが、Satoさんの記事では、動かした様子がなかったので、今回の記事で紹介しています。

脚注

  1. レイアウト プレビュー / Android https://developer.android.com/jetpack/compose/preview?hl=ja (2022-01-01閲覧） ↩︎

  2. Jetpack Compose: PreviewParameterアノテーションを使っていろいろなプレビューを作る / Sato Shun https://satoshun.github.io/2020/07/compose-preview/ ↩︎

Discussion