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 : Hé, fans de Compose, parlons des Compose Previews, l'outil sympa dans Android Studio qui permet de faire et tester des changements de code UI en direct sans dépendre ou attendre des builds complets.

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.

Aujourd'hui, j'ai quelques astuces dans ma manche qui vont transformer ta façon d'utiliser les previews et t'assurer que tu en tires le maximum.

[MUSIC PLAYING]

[Music]

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

Commençons par les différents modes intégrés directement dans les Compose Previews dans Studio.

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

Tu peux les trouver en cliquant sur l'icône Menu...

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.

juste à côté de chaque titre de preview. D'abord, le mode Interactif — tu peux vraiment cliquer sur des boutons, taper dans des champs texte, et voir ton Composable réagir en temps réel dans la fenêtre de Preview.

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

Plus besoin de déployer juste pour voir si ce clickable est bien configuré.

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.

Ensuite, la Preview d'Animation. Si tu as des animations stylées dans ton UI, au lieu de les rejouer sur un appareil encore et encore, tu peux les faire défiler, les boucler et inspecter chaque frame.