Jetpack Compose Academy · レッスン

Image Composable

drawableリソースを画面に描画します。

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

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

Pictures, the Compose Way

Every app shows pictures, and in Compose you draw them with the Image composable. It is the declarative replacement for the old ImageView. 🖼️

You Need a Painter

Image does not take a raw resource id. It takes a painter, a small object that knows how to draw your picture onto the screen.

painterResource Loads Drawables

To turn a drawable in res into a painter, you call painterResource with its resource id. This reads your PNG or vector asset.

val logo = painterResource(id = R.drawable.logo)

Your First Image

Pass that painter to Image and it appears on screen. This single line draws your drawable wherever the composable sits.

Image(painter = painterResource(R.drawable.logo), contentDescription = null)

contentDescription Is Required

Image always asks for a contentDescription. Screen readers speak it aloud, so describe the picture in a few clear words.

Image(painter = logo, contentDescription = "Company logo")

Decorative? Pass null

If a picture is purely decorative and adds no meaning, set contentDescription to null so TalkBack skips it instead of reading noise.

Vectors Scale Cleanly

Compose loves vector drawables. A vector stays razor sharp at any size because it is math, not fixed pixels, so it never looks blurry.

Size It with a Modifier

An Image draws at the bitmap size by default. Add a Modifier.size to make it exactly the dimensions your layout needs.

Image(painter = logo, contentDescription = null, modifier = Modifier.size(96.dp))

Bitmaps from the Network

painterResource only handles local assets. For remote URLs you reach for a loader library, the most popular being Coil with rememberAsyncImagePainter.

Tinting an Image

You can recolor a simple image with a colorFilter. This is great for monochrome icons you want to match your theme color.

Image(painter = logo, contentDescription = null,
    colorFilter = ColorFilter.tint(Color.Blue))

Image vs Icon

Use Image for photos and rich artwork. For small, theme-tinted symbols, the lighter Icon composable is usually the better choice.

Quick Check

Which argument does the Image composable always require alongside the painter?

Recap: Drawing Images

You learned that Image draws a painter from painterResource, always needs a contentDescription, and sizes with a modifier. Next up: Material icons! ✨

よくある質問

「Image Composable」レッスンは無料ですか？

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

「Image Composable」で何を学びますか？

drawableリソースを画面に描画します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Image Composable」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る