UIをプレビューする
@Previewを使ってすばやく改善します。
「UIをプレビューする」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
プレビューが役立つ理由
デバイス上でアプリをビルドして実行するには時間がかかります。Composeには、UIをより速く確認する方法があります。それがプレビューです。
プレビューでは、Android Studio内でコンポーザブルを直接描画できます。そのため、エミュレーターやスマートフォンでアプリ全体を起動しなくても、レイアウトを確認できます。
@Previewアノテーション
コンポーザブルをプレビューするには、別の関数を作成し、@Previewを付けます。するとAndroid Studioのデザインペインに、描画結果が表示されます。
プレビュー関数自体もコンポーザブルなので、@Previewと@Composableの両方を付けます。
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}プレビューはパラメータを受け取らない
プレビュー関数はパラメータを受け取ってはいけません。Composeが自動的に呼び出す必要があるため、引数を渡せないからです。
そのため、ラッパーを作成します。プレビューから実際のコンポーザブルを呼び出し、表示用のサンプルデータを渡します。
@Preview
@Composable
fun ProfilePreview() {
ProfileCard(name = "Ada")
}プレビュー関数の命名
一般的な慣例では、表示するコンポーザブルの名前にPreviewを付けて、プレビューの名前にします。Greetingの場合は、GreetingPreviewと記述します。
この命名により、特にファイルが大きくなったときも、どのプレビューがどのコンポーザブルに対応するかがすぐに分かります。
@Preview
@Composable
fun HeaderPreview() {
Header()
}プレビューに名前を付ける
nameパラメータを使って、プレビューにラベルを付けることができます。このタイトルは、Android Studioで描画されたプレビューの上に表示されます。
分かりやすい名前を付けると、複数のプレビューを一目で見分けられます。
@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
ProfileCard("Ada")
}背景を表示する
デフォルトでは、プレビューが透明な背景に描画される場合があります。showBackground = trueを設定すると、コンポーザブルの背後に単色の背景が描画されます。
これにより、デザインペインで間隔や色を確認しやすくなります。
@Preview(showBackground = true)
@Composable
fun TextPreview() {
Text("Hello!")
}複数のプレビューを同時に表示する
1つの関数に複数の@Previewアノテーションを追加したり、複数のプレビュー関数を作成したりできます。それぞれが個別に描画されます。
短い名前や長い名前など、異なるサンプルデータで同じUIを確認するときに便利です。
@Preview
@Composable
fun ShortNamePreview() {
Greeting("Ada")
}
@Preview
@Composable
fun LongNamePreview() {
Greeting("Grace Hopper")
}異なるサイズをプレビューする
widthDpパラメータとheightDpパラメータで、プレビューキャンバスのサイズを設定できます。これにより、狭い領域や広い領域でレイアウトがどのように見えるかを確認できます。
プレビューのサイズを変えると、テキストの折り返しが不自然になっていたり、コンテンツがはみ出していたりする問題を見つけやすくなります。
@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
Greeting("Hi")
}ダークモードのプレビュー
uiModeパラメータをナイトモードに設定すると、UIがダークテーマでどのように見えるかをプレビューできます。暗い背景で色が不自然に見える問題を見つけられます。
早い段階でライトとダークの両方を確認しておくと、後で予想外の問題が起きるのを防げます。
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
ProfileCard("Ada")
}インタラクティブプレビューとライブプレビュー
Android Studioでは、入力中にプレビューを更新できるため、変更がほぼ瞬時に反映されます。また、完全なビルドを行わずに画面をクリックして操作できるインタラクティブモードもあります。
プレビューはアプリの実行に置き換わるものではありませんが、画面の設計を大幅に効率化できます。
プレビューはデバッグ専用
プレビュー関数は開発用のツールです。配布するアプリには含まれず、ユーザーに表示されることもありません。
そのため、サンプルデータを使ったプレビューを自由にいくつでも追加できます。影響するのはIDEでの表示だけです。
@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
InfoBlock()
}理解度チェック
プレビュー関数に関する重要なルールを復習しましょう。
まとめ
@Previewを使うと、デバイスを必要とせず、Android Studio内でコンポーザブルを描画できることを学びました。プレビュー関数はパラメータを受け取れないため、サンプルデータを使って実際のコンポーザブルをラップします。
name、showBackground、widthDp、heightDp、ダークモード用のuiModeなど、便利なオプションがあります。プレビューはデバッグ専用のツールです。次は、これまでの内容を組み合わせて実際のプロフィールカードを作成します。
よくある質問
「UIをプレビューする」レッスンは無料ですか？
はい。「UIをプレビューする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「UIをプレビューする」で何を学びますか？
@Previewを使ってすばやく改善します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「UIをプレビューする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Composableとは
- TextとColumnの基本
- UIをプレビューする
- プロフィールカードを構築する