LoginSignup
7

More than 3 years have passed since last update.

Jetpack Compose の Preview を使いこなす

Last updated at Posted at 2020-11-10

Jetpack Compose には @Preview のアノテーションで IDE 上にプレビューを表示できる機能があります。
その @Preview についてできることを見ていこうと思います。
(⚠️1.0.0-alpha06 時点の内容になるので破壊的な変更が大いにありえます⚠️)

name

プレビューに名前を表示することができます。

@Preview(name = "name")
@Composable
fun DefaultPreview() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

group

設定した文字列が同じものでグルーピングし、特定のグループだけを表示させることができます。

@Preview(group = "group1")
@Composable
fun DefaultPreviewGroup1() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

@Preview(group = "group2")
@Composable
fun DefaultPreviewGroup2() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

apiLevel

レンダリング時の ApiLebel を設定できます。
デフォルトは -1 になっています。

@Preview(apiLevel = 30)
@Composable
fun DefaultPreview() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

widthDp / heightDp

プレビューのサイズを指定することができます。

@Preview(widthDp = 100, heightDp = 100)
@Composable
fun DefaultPreview() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

locale

プレビューのロケールを指定することができます。
(手元の環境ではなぜかプレビューに反映されませんでした)


@Preview(locale = "ja")
@Composable
fun DefaultPreviewJa() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

fontScale

プレビューのテキストサイズの倍率を指定できます。

@Preview(fontScale = 1.5f)
@Composable
fun DefaultPreviewLarge() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

showDecoration

StatusBar や Toolbar、NavigationBar がプレビューに表示されます。

これが有効な時は Activity の Context が適用されるようになります。

@Preview(showDecoration = true)
@Composable
fun DefaultPreview() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

showBackground

これを有効にするとデフォルトの背景色が適用されます。

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposePreviewTheme {
        Greeting("Android")
    }
}

uiMode

Configuration.uiMode の値をセットすることができます。

プレビューでよく使うのは UI_MODE_NIGHT_YESUI_MODE_NIGHT_NO を用いた DarkTheme の確認になると思います。
showBackgroundshowDecoration を使っている場合に反映されます。

@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun DefaultPreviewDark() {
    ComposePreviewTheme(darkTheme = true) {
        Greeting("Android")
    }
}

device

設定したデバイスの画面サイズでプレビューを表示することができます。
showDecoration が有効になっている必要があります。

@Preview(showDecoration = true, device = Devices.NEXUS_10)
@Composable
fun DefaultPreviewNexus10() {
    ComposePreviewTheme() {
        Greeting("Android")
    }
}

これまでの Layout Editor のプレビューであったような様々なプレビューの仕方が Jetpack Compose のプレビューでも提供されそうです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7