JetpackComposeのPreviewで知っておくといいことがあるかもしれないTips #Android

はじめに

２０２３年３月からAndroidアプリエンジニアをしている KSND（GitHub、X ）といいます。

最近LTしてみたいな〜と漠然に思っていて、PreviewについてLTしたら面白いのではと考えちょっとだけPreviewについて調べましたが大して話せそうなことがなかったのでLTを断念しました。
すぐに忘れてしまいそうだったので思い出せるようにこの記事を書きました。

今後、Preview関連でTipsを知ったらこの記事に追記しようと思ってます。

Previewでダミーのテキストを使いたい時

Composeのライブラリ（androidx.compose.ui:ui-tooling-preview）で用意されているLoremIpsum（ロレムイプサム）というクラスを利用すれば自前でダミーテキストを用意しなくても良くなります。

Android developers - LoremIpsum

IssueTracker - LoremIpsum preview parameter customization


/**
 * 20単語のテキストを提供する[LoremIpsum]のサブクラス　（デフォルトは500単語）
 */
class LoremIpsum20Words : LoremIpsum(20)

@Preview
@Composable
fun PreviewSample1(
    @PreviewParameter(LoremIpsum20Words::class) text: String,
) {
    // PreviewParameterを使わない場合は以下のように使用できる
    // Text(text = LoremIpsum(20).values.first())
    Text(text = text)
}

手っ取り早くいろんな条件でPreviewを表示したいとき

こちらもComposeのライブラリ（androidx.compose.ui:ui-tooling-preview）で用意されているPreviewのアノテーションが既に用意されています。

いろんな端末での表示を見たい時 → `PreviewScreenSizes` アノテーション

@PreviewScreenSizes
@Composable
fun PreviewSample() {
    Sample()
}

ダークモード・ライトモードの表示を見たい時 → `PreviewLightDark` アノテーション

@PreviewLightDark
@Composable
fun PreviewSample() {
    Sample()
}

いろんなフォントサイズでの表示を見たい時 -> `PreviewFontScale` アノテーション

7つのfontScale（85%, 100%, 115%, 130%, 150%, 180%, 200%）が見れます

@PreviewFontScale
@Composable
fun PreviewSample() {
    Sample()
}

Previewで表示できないものはPreviewで表示させないようにする

Previewで使用するComposable関数の箇所でLocalInspectionModeを使用しPreviewかどうかを判定することができます

@Composable
fun EnablePreviewSample() {}

@Composable
fun UnablePreviewSample() {}

@Composable
fun Sample() {
    if (LocalInspectionMode.current) {
        // Preview時のみ表示される
        EnablePreviewSample()
    } else {
        // Preview時以外に表示される
        UnablePreviewSample()
    }
}

@Preview
@Composable
fun PreviewSample() {
    Sample()
}

Preview関数の名前をPreviewで表示したい

Thread.currentThread().getStackTrace()[2].methodNameのようにコードを記述すればPreview関数の名前を取得することができます。
2の部分は呼び出し元関数のインデックスの値になります。

@Preview
@Composable
fun PreviewSampleAAAAAAAA() {
    Text(text = Thread.currentThread().getStackTrace()[1].methodName)
}

Preview関数を利用してVRT(画像回帰テスト)をしたい

２つのライブラリ Showkase、Roborazzi　を利用すれば比較的容易にできます

以前、記事を書いたので興味ある方は見ていただけると嬉しいです。

Preview関数を作る効率を良くしたい

AndroidStudio で prevと書いて Enter を入力すると

以下のようなコードを生成してくれます

JetpackComposeのPreviewで知っておくといいことがあるかもしれないTips