【Jetpack Compose】Image Composableの使い方 | 画像を表示する

Image Composable（イメージ コンポーザブル）は、画面に画像を表示するためのUI部品です。

このページでは、このImage Composableの基本的な使い方について紹介します。

Image Composableを使うための準備

1. 画像を準備する

まず、resディレクトリ内のdrawableディレクトリに、表示したい画像ファイル（通常は.pngや.jpgなどの形式）を追加します。

2. Image composableのインポート

Image composableを使用するために、androidx.compose.foundation.Imageをインポートします。

import androidx.compose.foundation.Image

Image Composableの使い方

Image(
    painter = painterResource(id = R.drawable.画像名),
    contentDescription = "画像の説明"
)

上記の例では、R.drawable.my_imageというリソースIDを使用してmy_imageという名前の画像を読み込んでいます。画像の拡張子は書く必要がありません。

contentDescriptionは、画像の説明であり、画像がアクセシビリティに優れるようにするために設定します。不要な場合はnullを代入しましょう。

画像のサイズ調整

Image composableには、画像のサイズを調整するためのパラメータがいくつかあります。

• modifier: これを使用して、画像のサイズや位置、スタイルを変更できます。
• contentScale: 画像のスケーリング方法を指定します。例えば、FillBounds、FitBounds、Cropといったものがあります。

modifierを使って画像のサイズを調整する

// 画像のサイズを調整して表示
Image(
    painter = painter,
    contentDescription = "My Image",
    modifier = Modifier.size(100.dp) // サイズを指定
)

contentScaleを使って画像をスケーリングする

Image(
    painter = painter,
    contentDescription = "My Image",
    modifier = Modifier.fillMaxSize(), // 画面いっぱいに表示
    contentScale = ContentScale.FillBounds // 画像を領域にフィットさせる
)

ContentScaleの種類とそれぞれの効果は次のとおりです。

1. FillBounds:
   • 画像が要素にフィットするようにスケーリングされます。
   • 画像の縦横比が保持されますが、画像が要素からはみ出る可能性があります。
2. FillWidth:
   • 画像の幅が要素の幅にフィットするようにスケーリングされます。
   • 画像の高さは縦横比を保持しながら自動的に調整されます。
3. FillHeight:
   • 画像の高さが要素の高さにフィットするようにスケーリングされます。
   • 画像の幅は縦横比を保持しながら自動的に調整されます。
4. FillMaxSize:
   • 画像が要素の最大サイズにフィットするようにスケーリングされます。
   • 画像の縦横比は保持されますが、画像が要素からはみ出る可能性があります。
5. Inside:
   • 画像が要素に収まるようにスケーリングされます。
   • 画像が要素よりも小さい場合は、そのまま表示されますが、大きい場合はクリップされます。
6. Crop:
   • 画像が要素にフィットするようにスケーリングされますが、余分な部分が切り取られます。
   • 画像が要素に完全に収まるようになりますが、縦横比が変更される場合があります。

画像を角丸にする

modifierを使うことで画像の角を丸くすることができます。

Image(
    painter = painter,
    contentDescription = "My Image",
     modifier = Modifier
            .size(100.dp)
            .clip(RoundedCornerShape(10.dp)) // 角を丸くする
)