Jetpack Compose の Preview を使いこなす

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

## name

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/6301b889-bb17-2637-9f23-d4b197dcb791.png" width="300px" />

## group

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/21417269-8e7a-5d63-7b76-7f3ff6ea6913.png" width="300px" />

## apiLevel

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

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

## widthDp / heightDp

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/22ba203f-9ae8-9367-94aa-10f03247d8b0.png" width="300px" />

## locale

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

```kotlin

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

## fontScale

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/2426f8cc-5d63-5525-5408-03dc19858fcb.png" width="300px" />

## showDecoration

StatusBar や Toolbar、NavigationBar がプレビューに表示されます。  
これが有効な時は Activity の Context が適用されるようになります。

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/63773eab-9589-70b5-2c2d-fd7534242fb1.png" width="300px" />


## showBackground

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/4f59775a-ece0-bc7c-bbbc-74a1d20b6800.png" width="300px" />

## uiMode

`Configuration.uiMode` の値をセットすることができます。  
プレビューでよく使うのは `UI_MODE_NIGHT_YES` や `UI_MODE_NIGHT_NO` を用いた DarkTheme の確認になると思います。
`showBackground` や `showDecoration` を使っている場合に反映されます。

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/d647133e-f523-a075-7455-5153504a8ca4.png" width="300px" />

## device

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

```kotlin
@Preview(showDecoration = true, device = Devices.NEXUS_10)
@Composable
fun DefaultPreviewNexus10() {
    ComposePreviewTheme() {
        Greeting("Android")
    }
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/50479442-0d32-327f-cbb0-0efd4e397e4a.png" width="300px" />


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