🔍

ゆめみ社のAndroidインターンに参加してきたので学んだことをまとめておく(Compose のプレビュー機能編)

に公開
Android
Kotlin
Jetpack Compose
ゆめみ
tech

ゆめみ社の Android インターンに参加しました。
なかなかにありがたい経験をさせてもらえたので、アウトプットします 👍

  • 基本的には課題を進めていく 🚶
  • 課題は AndroidView で開発する前提になっていたが、Jetpack Compose の方が得意という旨を伝えると、Compose を使って UI を作っていくことに。柔軟に対応していただくことができた。感謝 😊

Compose のプレビュー機能

Compose のプレビュー機能はめちゃめちゃ充実していると思い知らされました。

@Previewの引数

こちらの通り。

https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview?hl=ja

いくつかピックアップしてみます。

name,showBackground

@Preview(
  name = "previewSample",
  showBackground = true,
)
@Composable
fun PreviewSample() {
  Sample()
}

タイトルと背景が表示されました。

ダークモード

uiMode引数でダークモードに設定できます。

@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyPreviews() {
  Text("${isSystemInDarkTheme()}")
}

ちなみに背景を暗くしたり、文字を明るくしたりしたかったらテーマやSurfaceを使えばいい感じになります。

@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyPreviews() {
  MaterialTheme(
    colors = if (isSystemInDarkTheme()) {
      darkColors()
    } else {
      lightColors()
    },
  ) {
    Surface {
      Text("${isSystemInDarkTheme()}")
    }
  }
}

ライトモード時

ダークモード時

画面サイズを指定する

widthDpやheightDpを指定すれば表示幅(画面サイズ)を指定できます。注意としてはwidthDp = 100.dpではなく Int 型(widthDp = 100)で指定します。

@Preview(widthDp = 100)
@Composable
fun MyPreview() {
  Column {
    Text("s")
    Text("normal")
    Text("very very very very very very very very very very long text")
  }
}

横幅が 100dp の時に very very ... long text がきちんと改行されているのが確認できたりします。

プレビューをまとめる

Android Studio Dolphin ではプレビューモードを 1 つのアノテーションにまとめることができます。

ダークモードの時のプレビューとライトモードの時のプレビューをまとめる
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
annotation class MultiModePreviews

例のようにダークモードとライトモードのプレビューをまとめてMultiModePreviewsをつけるだけで二つのプレビューを作ってくれます 😍

@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
annotation class MultiModePreviews

@MultiModePreviews
@Composable
fun MyPreview() {
  Text("${isSystemInDarkTheme()}")
}

他にもwidthDpを複数パターン用意したりできそうですね。

PreviewParameter

UI は同じだけど表示するものが少し違う。そんな時は違う部分だけをまとめて渡したいですよね！
PreviewParameterを使えば Preview コンポーザブルに引数として違う部分だけをまとめて渡せます。

文字列が"s","normal text","very ... long text"を表示するプレビュー

class TextPreviewProvider : PreviewParameterProvider<String> {
  override val values: Sequence<String>
    get() = sequenceOf(
      "s",
      "normal text",
      "very very very very very very very very very very very very very very very very very very long text",
    )
}

@Preview
@Composable
fun MyPreview(
  @PreviewParameter(TextPreviewProvider::class) text: String,
) {
  Text(text)
}

この例ではテキストが短くても長くてもレイアウトが崩れないかチェックするみたいなことができます。

インターンアウトプットシリーズ一覧

Discussion