MENU

【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: 画像のスケーリング方法を指定します。例えば、FillBoundsFitBoundsCropといったものがあります。

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)) // 角を丸くする
)
Share
  • URLをコピーしました!

Comment

コメントする

目次