コンポーザブルは関数によって定義され、@Composable アノテーションが付けられます。
@Composable
fun SimpleComposable() {
Text("Hello World")
}
このコンポーザブルのプレビューを有効にするには、アノテーション付きの別のコンポーザブルを作成します。
@Composable と @Preview を使用します。この新しいアノテーション付きコンポーザブルには、
最初に作成したコンポーザブル SimpleComposable は次のとおりです。
@Preview
@Composable
fun SimpleComposablePreview() {
SimpleComposable()
}
@Preview アノテーションは、これが Android Studio に
このファイルのデザインビューにコンポーザブルを表示する必要があります。ライブ ストリームは
コンポーザブルのプレビューも 更新されます
コードに手動でパラメータを追加して、Android Studio の動作をカスタマイズできます。
@Preview をレンダリングする。@Preview アノテーションを同じ構成ファイルに追加することもできます。
複数回使用して、異なるプロパティを持つコンポーザブルをプレビューできます。
@Preview コンポーザブルを使用する主な利点の一つは、
Android Studio のエミュレータで実行してくださいメモリを大量に消費するアプリケーションの起動を
最終的なデザインの変更のためのエミュレータと、@Preview の機能を
簡単なコード変更のテストも簡単です
@Preview アノテーションを効果的に活用するには、
入力として受け取る状態とイベントに基づいて
出力です。
@Preview を定義する
Android Studio には、コンポーザブルのプレビューを拡張する機能がいくつか用意されています。コンテナ デザインの変更やプレビューの操作ができるほか、プレビューをエミュレータまたはデバイスに直接デプロイすることも可能です。
サイズ
デフォルトでは、@Preview のサイズはコンテンツをラップできるように自動的に選択されます。ディメンションを手動で設定するには、heightDp パラメータと widthDp パラメータを追加します。これら
値はすでに dp として解釈されているため、.dp を追加する必要はありません。
説明します。
@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
Box(Modifier.background(Color.Yellow)) {
Text("Hello World")
}
}
ダイナミック カラーのプレビュー
動的広告を有効にする
おすすめします。
wallpaper 属性を使用して壁紙を切り替え、UI が
異なるユーザーの壁紙を選択します。さまざまな壁紙テーマから選択します
によって提供される
Wallpaper
クラスです。この機能には Compose 1.4.0 以降が必要です。
さまざまなデバイスで使用
Android Studio Flamingo では、Preview の device パラメータを編集できます。
アノテーションを使用して、さまざまなデバイスでのコンポーザブルの構成を定義します。
device パラメータに空の文字列（@Preview(device = "")）がある場合は、
Ctrl + Space を押して予測入力を呼び出す。次に
必要があります。
予測入力から、リストから任意のデバイス オプションを選択できます。例:
@Preview(device = "id:pixel_4")。または、カスタム デバイス名を入力して、
spec:width=px,height=px,dpi=int… を選択して個々の値を設定し、
あります。
適用するには、Enter を押すか、Esc を押してキャンセルしてください。
無効な値を設定すると、宣言に赤い下線が引かれて修正が行われることがあります。
利用可能（macOS の場合は Alt + Enter（⌥ +⏎））> ...に置換。
検査では、入力に最も近い修正が提示されます。
言語 / 地域
さまざまなユーザー ロケールをテストするには、locale パラメータを追加します。
@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
Text(text = stringResource(R.string.greeting))
}
背景色の設定
デフォルトでは、コンポーザブルは透明な背景で表示されます。コメントを追加するには、
showBackground パラメータと backgroundColor パラメータを追加します。保存
backgroundColor は ARGB Long であり、Color ではないことに注意してください。
value:
@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
Text("Hello World")
}
システム UI
プレビュー内にステータスバーとアクションバーを表示する必要がある場合は、次のように showSystemUi パラメータを追加します。
@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
Text("Hello World")
}
UI モード
パラメータ uiMode には、次のいずれかの Configuration.UI_* を指定できます。
定数を使用して、プレビューの動作を適宜変更できます。たとえば、プレビューを夜間モードに設定して、テーマがどのように反応するかを確認できます。
LocalInspectionMode
これは、LocalInspectionMode から読み取ることができます。
CompositionLocal
検査可能なコンポーネント）。構成がレンダリングされる場合
プレビューで、LocalInspectionMode.current は true と評価されます。この
プレビューをカスタマイズできます。たとえば
プレースホルダ画像が表示されます。
この方法では、制限事項も回避できます。対象 ネットワーク リクエストを呼び出す代わりにサンプルデータを表示する例を示します。
@Composable
fun GreetingScreen(name: String) {
if (LocalInspectionMode.current) {
// Show this text in a preview window:
Text("Hello preview user!")
} else {
// Show this text in the app:
Text("Hello $name!")
}
}
@Preview を操作する
Android Studio には、定義した関数とやり取りする機能が備わっています。 プレビューします。このインタラクションにより、プレビューのランタイムの動作 プレビューを使って UI を操作しやすくなります
インタラクティブ モード
インタラクティブ モードでは、 スマートフォンやタブレットなど、 プログラムを実行しているデバイスでインタラクティブ モード サンドボックス環境で分離されている（つまり、他のプレビューから分離されている） 要素をクリックし、プレビューでユーザー入力を入力できます。簡単な を使用して、コンポーザブルのさまざまな状態、操作、アニメーションをテストできます。
コード ナビゲーションとコンポーザブルの枠線
プレビューにカーソルを合わせると、中に含まれるコンポーザブルの枠線が表示されます。コンポーザブルの枠線をクリックすると、エディタビューがトリガーされ、そこからコンポーザブルの定義に移動できます。
プレビューを実行
特定の @Preview は、エミュレータまたは実機で実行できます。「
プレビューは新しい Activity と同じプロジェクト アプリ内にデプロイされるため、
同じコンテキストと権限を共有します。インフラストラクチャを
すでに権限が付与されている場合は権限をリクエストするボイラープレート コードです。
プレビューを実行アイコン 
をクリックします。
（@Preview アノテーションの横、またはプレビューの上部）に表示され、Android
Studio は、その @Preview を接続済みのデバイスまたはエミュレータにデプロイします。
![ユーザーがプレビューの [プレビューを実行] をクリックする
ボタン](https://developer.android.com/static/develop/ui/compose/images/tooling/run_preview.png?authuser=7&hl=ja)
@Preview のレンダリングをコピーする
レンダリングされたプレビューはすべて、右クリックして画像としてコピーできます。
同じ @Preview アノテーションの複数のプレビュー
次のコマンドを使用して、同じ @Preview コンポーザブルの複数のバージョンを表示できます。
コンポーザブルに渡されるさまざまな仕様、パラメータなどに応じて異なります。この
作成しなければならないボイラープレート コードを減らすことができます。
マルチプレビュー テンプレート
androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01 以降ではマルチプレビューが導入されています
API テンプレート: @PreviewScreenSizes、@PreviewFontScales、@PreviewLightDark、
そして @PreviewDynamicColors が付きます。これにより、単一のアノテーションで
一般的なシナリオで Compose UI をプレビューします。
カスタム マルチプレビュー アノテーションを作成する
マルチプレビューでは、それ自体に構成の異なる複数の @Preview アノテーションを含むアノテーション クラスを定義できます。このアノテーションを
コンポーズ可能な関数は、さまざまなプレビューを
1 回だけです。たとえば、このアノテーションを使用して、コンポーザブルごとに定義を繰り返すことなく、複数のデバイス、フォントサイズ、テーマを同時にプレビューできます。
まず、独自のカスタム アノテーション クラスを作成します。
@Preview(
name = "small font",
group = "font scales",
fontScale = 0.5f
)
@Preview(
name = "large font",
group = "font scales",
fontScale = 1.5f
)
annotation class FontScalePreviews
プレビュー コンポーザブルには次のカスタム アノテーションを使用できます。
@FontScalePreviews
@Composable
fun HelloWorldPreview() {
Text("Hello World")
}
複数のマルチプレビュー アノテーションと通常のプレビュー アノテーションを組み合わせることができます 完全なプレビューセットを作成できますマルチプレビュー アノテーションの組み合わせ 異なる組み合わせがすべて表示されるわけではありません各マルチプレビュー アノテーションは個別に動作し、独自のバリアントのみをレンダリングします。
@Preview(
name = "Spanish",
group = "locale",
locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews
@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
マルチプレビューと通常プレビューの組み合わせにより、 大規模プロジェクトの多くのプロパティを包括的にテストできます。
@Preview と大規模なデータセット
多くの場合、コンポーザブルに大規模なデータセットを渡す必要がある
プレビューします。これを行うには、次の手順でサンプルデータをコンポーズ可能なプレビュー関数に渡します。
@PreviewParameter を使用してパラメータを追加する
アノテーション。
@Preview
@Composable
fun UserProfilePreview(
@PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
UserProfile(user)
}
サンプルデータを提供するには、次を実装するクラスを作成します。
PreviewParameterProvider に変換し、
サンプルデータをシーケンスとして扱う場合です。
class UserPreviewParameterProvider : PreviewParameterProvider<User> {
override val values = sequenceOf(
User("Elise"),
User("Frank"),
User("Julia")
)
}
これにより、シーケンスのデータ要素ごとに 1 つのプレビューがレンダリングされます。
複数のプレビューに同じプロバイダ クラスを使用できます。必要に応じて プレビューの回数を制限するには、limit パラメータを設定します。
@Preview
@Composable
fun UserProfilePreview2(
@PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
UserProfile(user)
}
制限事項とベスト プラクティス
Android Studio は、プレビュー領域でプレビュー コードを直接実行します。いいえ
エミュレータまたは実機を実行する必要があります。これは、
Layoutlib という Android フレームワークの一部です。Layoutlib はカスタムです
Android デバイスの外部で動作するように設計された Android フレームワークのバージョン。「
このライブラリの目的は、Android Studio でレイアウトのプレビューを提供することです。
デバイス上でのレンダリングと非常によく似ています。
プレビューの制限事項
Android Studio 内でのプレビューのレンダリング方法の性質上、 軽量で、Android フレームワーク全体でレンダリングする必要がありません。 ただし、次のような制限があります。
- ネットワークにアクセスできない
- ファイルにアクセスできない
- 一部の
ContextAPI を使用できない可能性がある
プレビューと ViewModels
ViewModel を
作成します。プレビュー システムでは、
ViewModel に渡されるパラメータ（リポジトリ、ユースケース、マネージャー、
使用できます。また、ViewModel が依存関係インジェクション（
（Hilt など）で、プレビュー システムで依存関係全体をビルドすることはできません。
グラフを使用して ViewModel を作成します。
ViewModel を使用してコンポーザブルをプレビューしようとすると、Android Studio に
エラーが発生することがあります。
ViewModel を使用するコンポーザブルをプレビューする場合は、
ViewModel のパラメータが次の引数として渡された別のコンポーザブル
作成します。これにより、Terraform を使用するコンポーザブルを
ViewModel。
@Composable
fun AuthorColumn(viewModel: AuthorViewModel = viewModel()) {
AuthorColumn(
name = viewModel.authorName,
// ViewModel sends the network requests and makes posts available as a state
posts = viewModel.posts
)
}
@Preview
@Composable
fun AuthorScreenPreview(
// You can use some sample data to preview your composable without the need to construct the ViewModel
name: String = sampleAuthor.name,
posts: List<Post> = samplePosts[sampleAuthor]
) {
AuthorColumn(...) {
name = NameLabel(name),
posts = PostsList(posts)
}
}
アノテーション クラス @Preview
Ctrl または⌘+クリックでAndroid の @Preview アノテーション
カスタマイズするときに調整できるパラメータの一覧は、
プレビューします。
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,
)
参考情報
Android Studio がどのように @Preview の使いやすさを高めているかについて詳しくは、
その他のツールのヒントについては、Compose のブログ
Tooling。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- CompositionLocal でローカルにスコープされたデータ
- Compose のマテリアル デザイン 2
- Compose でビューを使用する