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.

먼저 인터랙티브 모드입니다. 버튼을 클릭하고 텍스트 필드에 입력하고 미리보기 창에서 Composable이 실시간으로 반응하는 것을 볼 수 있습니다.

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]

다음은 애니메이션 미리보기입니다. UI에 멋진 애니메이션이 있다면 장치에서 반복해서 재생하는 대신 스크롤하고 루프하며 모든 프레임을 검사할 수 있습니다.

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

이러한 멋진 마이크로 인터랙션을 미세 조정하려면 애니메이션 미리보기 옵션을 사용하세요.

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

이제 멋진 픽셀 완벽주의를 위해 UI 검사 모드가 있습니다.

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.

이 모드는 레이아웃을 확인하고 대비 비율과 같은 접근성 문제를 확인하는 데 도움이 됩니다.

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

UI의 잠재적인 문제를 감사하고 강조 표시하는 QA 조언자라고 생각하세요.

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.

그리고 때로는 전체 앱을 빌드하지 않고 실제 장치나 에뮬레이터에서 Composable을 봐야 할 때가 있습니다.