Jetpack Compose Preview実践ガイド

Jetpack Compose Preview 実践ガイド Comic Division / Engineer kobaken

kobaken Androidアプリエンジニア Android歴10+n年 pixivコミック YouTubeが好き

目次・Jetpack Composeのプレビューとは・@Previewの機能紹介・@Previewをカスタムする・インタラクティブモード・ネットワークが必要なプレビューにどう対応するか・快適なプレビュー環境のために・CMP（Compose Multiplatform）でのプレビュー所感
・まとめ

Jetpack Composeのプレビューとは概要とメリデメ

Jetpack Composeのプレビューとは @Previewを付与することでコンポーザブルの表示ができる編集するとリアルタイムで変更が更新される

Pros & Cons Pros👍 ・エミュレータ or 実機いらず・リアルタイムで更新される Cons👎 ・実際とは異なるpadding、
marginが表示されてしまう・Coilなどネットワーク経由の画像表示ができない

プレビューの裏側 Android Studio上でプレビューできるのはなぜ？ →Layoutlibのおかげ 💡Layoutlibとは… Androidデバイス以外で実行できるように設計されたAndroidフレームワークのカスタムバージョン。デバイスのレンダリングに限りなく近い表現をプレビューで可能にしてくれる。

プレビューの制約便利な反面、制約もある😓 ・ネットワークにアクセスできない・ファイルにアクセスできない・一部のContext APIを利用できない可能性がある

@Previewの機能紹介 Previewアノテーションで設定可能なプロパティについて

@MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name:
String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 表示名

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 同名のプレビューをまとめる

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt ComposeをレンダリングするAPI レベル

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 幅と高さ

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 言語/地域

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt フォントスケール

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt システムUIの有無背景色

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt uiMode 夜間モードやTV, VR HEADSETなどが存在する

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt デバイス組込みのデバイス設定や specによる自由な設定まで

String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt ダイナミックカラー Compose 1.4.0↑

あらゆる状況を想定する @Previewをカスタムする

@Previewをカスタムする前述したパラメータで様々なプレビューを表現できるよく利用するパターンは使いまわせるようにしたい →カスタムアノテーションを定義してみよう

@Preview( name = "light", group = "uiMode", showBackground = true,
uiMode = UI_MODE_NIGHT_NO, backgroundColor = 0xFFFFFFFF, ) @Preview( name = "night", group = "uiMode", showBackground = true, uiMode = UI_MODE_NIGHT_YES, backgroundColor = 0xFF1F1F1F, ) annotation class DarkLightPreview DarkLightPreview.kt

@DarkLightPreview @Composable private fun SampleComposablePreview() { Text("Hello World") } SampleComposable.kt

マルチプレビューテンプレート androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01 以降でいくつかのマルチプレビューテンプレートが追加されている @PreviewScreenSizes @PreviewFontScales @PreviewLightDark @PreviewDynamicColors

インタラクティブモード UIに触れてみる

インタラクティブモードクリックやユーザー入力の挙動がチェックできる✅ 状態や操作、アニメーションを手軽にテストできるプレビュー同様、変更がリアルタイムで反映される起動が高速

インタラクティブモードの制約便利な反面、制約もある😓 ・ネットワークにアクセスできない・ファイルにアクセスできない・一部のContext APIを利用できない可能性がある

インタラクティブモードの使いどき Clickableの範囲チェック paddingやclipしている際のRipple Effectの範囲ステートフルなコンポーザブルの状態チェックチェックボックスやトグルなどの切り替えジェスチャーカルーセルの挙動

ネットワークが必要なプレビューにどう対応するかパーミッションの壁を超えろ

import coil.compose.AsyncImage @Preview @Composable private fun AsyncImagePreview() { AsyncImage( model
= "https://github.com/kobaken0029.png", contentDescription = null, ) } AsyncImagePreview.kt

通信が絡むコンポーザブルをどう扱うか 1. R.drawableを使う 2. Run Previewを使う

R.drawableを使う sealed interface ImageDataSource { val data: Any data class
Url(override val data: String): ImageDataSource data class File(override val data: File): ImageDataSource data class Drawable(@DrawableRes override val data: Int) : ImageDataSource } ImageDataSource.kt

R.drawableを使う fun CustomImage( modifier: Modifier = Modifier, dataSource: ImageDataSource, )
{ AsyncImage( modifier = modifier, model = ImageRequest.Builder(LocalContext.current) .data(dataSource.data) .build(), … ) } CustomImage.kt

import coil.compose.AsyncImage @Preview @Composable private fun CustomImagePreview() { CustomImage( dataSource
= ImageDataSource .Drawable(R.drawable.naiyo) ) } CustomImagePreview.kt

Run Previewを使うプレビューをエミュレータや実機で動かす新しいActivityとしてデプロイされる同じプロジェクトのコンテキストと権限が共有される

import coil.compose.AsyncImage @Preview @Composable private fun AsyncImagePreview() { AsyncImage( model
= "https://github.com/kobaken0029.png", contentDescription = null, ) } AsyncImagePreview.kt

快適なプレビュー環境のために開発体験の向上を目指して

快適なプレビュー環境のために UI開発は反復的なものプレビューの反映や表示が遅いと開発体験が著しく低下するできる限り高速なプレビュー環境を実現するためにやれることはないか？

快適なプレビュー環境のためにプレビューが遅い →プレビュー関数に関連するビルドが遅い →プレビュー関数が配置されているモジュール単位のビルドが遅いビルド速度の向上 →プレビュー関数が配置されているモジュールのビルド速度向上 →適切なモジュール分割を行い、プレビューの高速化を目指す

プレビュー高速化のためのモジュール設計 pixivコミックでは以下のようにfeatureを分割している :feature:hoge:compose コンポーザブルやUiState、プレビュー :feature:hoge:presentation Activity, ViewModelなど

プレビュー高速化のためのモジュール設計詳しくは→をチェック https://www.youtube.com/watch?v=_UUif7UnUFA

CMPでのプレビュー所感 commonMainでプレビューできるのか？

CMPのプレビューどうなの？ Compose Multiplatform 1.6.0からcommonMainでもプレビューできるようになった🎉 ※ちなみに2025年9月24日現在の最新バージョンは1.9.0

CMPのプレビューどうなの？ただし使用するのは org.jetbrains.compose.ui.tooling.preview.Preview Android-onlyな開発で利用していたのは androidx.compose.ui.tooling.preview.Preview uiModeやdeviceといったパラメータは使えない😢

CMPのプレビューどうなの？とはいえ、それ以外はJetpack Composeの開発とほぼ同じ体験インタラクティブモードでclickableのEffectが表示されない androidMainでは従来の@Previewが使える pixivQ開発では画面単位のプレビューはandroidMainで実施

まとめ・LayoutlibによってAndroid Studio上でのプレビューを実現している・@Previewのパラメータを変更して見た目や振る舞いを変更できる・fontScale, local, uiMode, etc… ・@Previewをカスタムしたり、マルチプレビューテンプレ使用で効率UP ・Run
Previewすることでネットワーク経由の画像表示にも対応可能・適切にモジュール分割をしてプレビューを快適に・CMPでもプレビューは動く（機能が少ない、一部表現できない）・androidMainでandroidx製の@Previewを利用可能

引用・参照元・Jetpack Compose UI App Development Toolkit ・Compose Multiplatform 1.6.0
– リソース、UI テスト、iOS アクセシビリティ、および Preview アノテーション | The Kotlin Blog ・PreviewActivityをHackする #Android - Qiita ・Compose駆動開発のためのマルチモジュール化 - Speaker Deck

Jetpack Compose Preview実践ガイド

Jetpack Compose Preview実践ガイド

More Decks by kobaken

Other Decks in Programming

Featured

Transcript