Jetpack Compose Academy · レッスン

@Previewによるライブプレビュー

アプリ全体を再ビルドせずにUIを反復改善します。

「@Previewによるライブプレビュー」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

See UI Without Running

Rebuilding the whole app to check one button is slow. The @Preview annotation renders your Composable right inside Android Studio. ⚡

Add the Annotation

Put @Preview above a Composable that takes no required parameters. Android Studio then shows it in the design pane beside your code.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("Compose")
}

Previews Need No Arguments

A previewed Composable must be callable with no arguments. That is why you usually make a small wrapper that supplies sample data.

Wrap Your Real Composable

Keep your real Composable parameterized, then write a tiny preview wrapper that calls it with fixed values for the design pane.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada")
}

Name It With a Title

Add name to label the preview in the panel. Helpful when one file shows several previews at once.

@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }

Show System Decorations

Set showSystemUi to true to render the status bar and full device frame, so you see the Composable in a realistic phone shell.

@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }

Just the Background

If you only want a surface behind your UI, use showBackground instead. It adds a plain backdrop without the whole device chrome.

@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }

Many Previews at Once

Stack several @Preview annotations on one function to compare states side by side, like light and dark or small and large fonts.

Preview Different Sizes

Pass widthDp and heightDp to test how your Composable looks on narrow or wide screens without launching an emulator.

@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }

Interactive Preview

Click the interactive mode icon in the preview pane to tap and scroll your UI without a full app run. Great for quick checks.

Previews Stay Out of the App

Code under @Preview is for tooling only. It never ships in your released app, so add as many previews as you find useful.

Quick Check

A quick check on how previews work.

Recap

You can now iterate fast: add @Preview, supply sample data in a wrapper, and tune name, sizes, and backgrounds to see your UI instantly. 🎨

よくある質問

「@Previewによるライブプレビュー」レッスンは無料ですか？

はい。「@Previewによるライブプレビュー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「@Previewによるライブプレビュー」で何を学びますか？

アプリ全体を再ビルドせずにUIを反復改善します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「@Previewによるライブプレビュー」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る