実際に作った画面

こんな画面をJetpack Composeでつくりました。

アプリ内課金ができるのですが、その画面内に課金に関するFAQをリストした画面です。

※画像中の情報は 2021/12/24現在のものです。

f:id:h3-birth:20211224161849p:plain:w300

文字数やデバイスサイズごとにプレビューしたい

上のスクショのとおり内容による文字数の差が結構あります。2行程度から〜10行程度のものまで。「デバイスサイズによっては画面が1つのカードで覆い尽くされてしまって読みづらさを感じるのではないか？」と、画面サイズごとにプレビューで確認しておきたくなりました。

まずは1つプレビューしてみます。

@Preview(showBackground = true, backgroundColor = 0xffffffff)
@Composable
fun PreviewFaqCard() {
        FaqCard(faq = Faq(question = "2週間無料お試しは何度でもできますか?", answer = "2週間無料お試しは、お一人様につき1回までとなります。"))
}

f:id:h3-birth:20211224163543p:plain — プレビュー

他の内容や異なるデバイスサイズごとにプレビューしたい場合、上記のComposableを複製してよしなに変えればいいですが、毎度毎度書くのはめんどくさいです。

そこでPreviewParameterを使うと回避できます。

PreviewParameter使ってみる

PreviewParameterProviderを継承したクラスをつくります。

class FaqPreviewParameterProvider : PreviewParameterProvider<Faq> {
    override val values = sequenceOf(
        Faq(question = "2週間無料お試しは何度でもできますか?", answer = "2週間無料お試しは、お一人様につき1回までとなります。"),
        Faq(question = "体調が悪い時や、健康的な料理を覚えたい時など、少しの期間だけ利用することはできますか?", answer = "月額プランであれば利用したい月だけ有料メンバーシップに登録して、利用しない月はメンバーシップを停止（休会）することができます。プロフィールやお気に入りレシピ、献立などは保存されたままとなり、有料メンバーシップに再登録をしていただくことで、情報を引き継いだままサービスの利用も再開できます。"),
        Faq(question = "スマホで登録しても、パソコンで使えますか?", answer = "メンバーシップに登録したアカウントであれば、パソコンでもご利用いただけます。"),
        Faq(question = "2週間無料お試し期間中に解約できますか?", answer = "いつでも解約できます。お試し期間が終了する24時間前までに解約すれば料金は発生いたしません。解約しなければ選択したプランが自動で課金されます。")
    )
}

そしたらプレビューするComosableの引数に渡します。

@Preview(showBackground = true, backgroundColor = 0xffffffff)
@Composable
fun PreviewFaqCard(
    @PreviewParameter(FaqPreviewParameterProvider::class) faq: Faq
) {
        FaqCard(faq = faq)
}

そうすると、FaqPreviewParameterProviderのsequenceOfに入れた分だけプレビューが勝手に作られます。