Compose Preview | Jetpack Compose Tips

PARIS HSU: Hey, Compose enthusiasts, let's talk about Compose Previews, the delightful tool in Android Studio that enables making and testing UI code changes live without relying or waiting for full builds.

PARIS HSU: Compose愛好家の皆さん、Compose Previewについてお話ししましょう。これはAndroid Studioにある素晴らしいツールで、完全なビルドに依存したり待ったりすることなく、UIコードの変更をライブで作成・テストできます。

Today, I've got a few delightful tips up my sleeves that will transform your preview game and make sure you're getting the most out of them.

今日は、皆さんのプレビューゲームを変革し、最大限に活用できるようにするための、いくつかの素晴らしいヒントをご紹介します。

[MUSIC PLAYING]

[MUSIC PLAYING]

Let's kick things off with the different modes baked right into Compose Previews in Studio.

まずは、StudioのCompose Previewに組み込まれている様々なモードから始めましょう。

You can find them by clicking on the Menu icon ...

これらは、メニューアイコンをクリックすることで見つけることができます…

right next to each preview title. First up, Interactive Mode-- you can actually click buttons, type in text fields, and see your Composable react in real-time in the Preview window.

各プレビュータイトルのすぐ隣にあります。まず、インタラクティブモードです。ボタンをクリックしたり、テキストフィールドに入力したりして、プレビューウィンドウでComposableがリアルタイムに反応するのを見ることができます。

No more deploying just to see if that clickable is set properly.

クリック可能かどうかを確認するためだけにデプロイする必要はもうありません。

Next, Animation Preview. If you have some slick animations in your UI, instead of replaying them on a device over and over, you can scroll through them, loop, and inspect every single frame.

次に、アニメーションプレビューです。UIにクールなアニメーションがある場合、デバイスで何度も再生し直す代わりに、スクロールしたり、ループさせたり、すべてのフレームを検査したりできます。