どうも。どっことです。今回はJetpack ComposeのImageコンポーサブルについてチートシートを紹介したいと思います。
Imageコンポーサブルとは
Imageコンポーサブルは、名前の通り画像やイメージを表示するコンポーサブルです。まずはAndroidViewのImageViewで実装していたことが、Jetpack
Composeでも同様に実現できるのかが気になるところですが、結局ImageViewで重要な設定であったscaleType、つまりイメージの見せ方についての設定がそれに相当するcontentScaleで実現でき、それ以外はModifierを使えば済んでしまうようです。（つまりImageに関する紹介がほとんどない...）
このページではscaleTypeに相当するcontentScaleについて軽く触れ、その設定がどのような見え方をするのかは公式サイトの方にお任せしようと思います。
Imageコンポーサブルを使うときのパラメータチートシート
まずは、必要最小限で設定できるImageのパラメータです。
Image(
painter = painterResource(id = R.drawable.dog), // リソースから画像表示
contentDescription = stringResource(id = R.string.dog_content_description) // 説明文
)
contentScale
contentScaleにはいくつかの設定項目があるので、一覧で紹介します。
ContentScale.Fit- アスペクト比を維持しながら拡大・縮小
- scaleTypeの
fitCenter相当 ContentScale.Crop- 空きスペースがなくなるように画像を拡大表示（くり抜き）
ContentScale.FillHeight- アスペクト比を維持しながら、高さに合わせて拡大・縮小
ContentScale.FillWidth- アスペクト比を維持しながら、幅に合わせて拡大・縮小
ContentScale.FillBounds- Viewの大きさに合わせて拡大・縮小（画像が歪む）
- scaleTypeの
fitXY相当 ContentScale.Inside- アスペクト比を維持しながら、縮小（拡大はしない）
ContentScale.None- 画像に対して何もしない
- scaleTypeの
center相当
まとめ
今回はImageコンポーサブルについて紹介しました。正直Image自体には目新しいパラメータがなかったので、contentScaleに関する紹介程度となりましたが、アプリ開発においてイメージの表示は必須機能なので、contentScaleのパラメータについては理解を進ませておきたいところです。
