Jetpack Compose の Preview を使いこなす

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_YES や UI_MODE_NIGHT_NO を用いた DarkTheme の確認になると思います。
showBackground や showDecoration を使っている場合に反映されます。

@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 のプレビューでも提供されそうです。