【Android】Kotlinで画像表示をマスターする！ImageViewの基本から動的に表示する方法(setImageResource、setImageDrawable、setImageBitmap)まで徹底解説

2024年2月23日2024年4月2日

【Android】Kotlinで画像表示をマスターする！ImageViewの基本から動的表示(setImageResource、setImageDrawable、setImageBitmap)する方法まで徹底解説

すだ

Androidアプリ開発者のみなさま〜！
メモリアインクのすだです。

今回は、KotlinでImageViewを使用した画像の表示方法と、
動的に表示する方法について
実際のコードを用いてご紹介します。

この記事を読んでわかること…
・ImageViewを使用した画像の表示方法
・setImageResource、setImageDrawable、setImageBitmapを使用して、
　画像を動的に表示する方法

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

ImageViewを使って画像を表示する方法

ImageViewはUIコンポーネント（部品）のうちの1つで、
画像を画面上に表示するために使うことができます。

<TextView /> や <Button />のように xmlファイル上でタグとして記述し、
タグの中に画像の設定を記述していきます。

早速実装してみましょう〜！

まず、お好みの画像を用意したらres/drawableフォルダに配置してください。

そして、画像を表示したい画面のxmlファイルに、以下のように記述してみましょう

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <!-- 画像を表示 -->
    <ImageView
        android:id="@+id/testImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test_image"
    />
</LinearLayout>

<ImageView />タグ内に、表示したい画像に関する設定を記述します。

android:src属性を使用して、表示する画像を指定しています。
@drawable/test_imageと記述していますが、
test_imageはプロジェクトのres/drawableフォルダにある画像のファイル名に置き換えてください！

画面を表示してみると…

簡単に画像を表示することができました！

動的に（コードで）画像を表示する方法

続いて、ImageViewに画像を表示するために使用できる3つのメソッドをご紹介します！

それぞれ異なるタイプの画像データを扱うために用意されていますので、適切なシーンで適切なメソッドを使用することが大切です！

setImageResource メソッドの使用方法

リソースIDを指定して、直接画像をImageViewに設定します。
リソースIDとは、アプリのres/drawableフォルダにある画像ファイルに自動的に割り当てられる識別子のことです。

静的な画像リソース（アプリに予め組み込まれている画像）を簡単に表示する場合に最適です。
コードを書く際に、特定の画像を指定するだけで良いため、非常に手軽な方法です。

val imageView: ImageView = findViewById(R.id.testImageView)

imageView.setImageResource(R.drawable.test_image)

レイアウトファイルに定義されているImageViewを取得して、
setImageResourceを使用して表示する画像を指定します。
引数には画像ファイルのリソースIDをセットしてください。

setImageDrawable を使う

DrawableオブジェクトをImageViewに設定するときに使用します。
Drawableは、Androidでグラフィックを扱うためのクラスで、画像ファイルだけでなく色や形を定義したリソースなど様々に設定できます。

アプリに内蔵されている画像を表示する、またはプログラムで生成したグラフィック（例えば、色や形状）を表示するときに便利です。
また、複雑なアニメーションやカスタムのグラフィカルオブジェクトを表示する場合にも使われます。

val imageView: ImageView = findViewById(R.id.testImageView)
val drawable: Drawable? = ContextCompat.getDrawable(context, R.drawable.test_image)

imageView.setImageDrawable(drawable)

ContextCompat.getDrawable()で、
アプリのリソース（resフォルダ）から指定された画像（R.drawable.test_image）を
“Drawableオブジェクト”として取得します。

そして、レイアウトファイルに定義されているImageViewを取得し、
setImageDrawableを繋げて適用する画像（Drawableオブジェクト）を指定しています。

引数には画像ファイルのリソースIDをセットしてください。

setImageBitmapを使う

BitmapオブジェクトをImageViewに設定するときに使用します。

Bitmapとは、ピクセルのグリッド（格子）で構成された画像のことです。

カメラから取得した写真を表示したり、インターネットからダウンロードした画像を表示したりするときに適しています。
また、画像に何らかの加工（リサイズ、フィルター適用など）を行ってから表示したい場合にも使います。

val imageView: ImageView = findViewById(R.id.testImageView)
val bitmap: Bitmap = BitmapFactory.decodeResource(resources, R.drawable.test_image)

// ビットマップをリサイズ
val resizedBitmap = Bitmap.createScaledBitmap(originalBitmap, 200, 200, true)

imageView.setImageBitmap(bitmap)

BitmapFactory.decodeResourceメソッドを使用して、
アプリのリソース（ここではres/drawableディレクトリ）から画像をビットマップ形式で読み込んでいます。

Bitmap.createScaledBitmapメソッドを使って、読み込んだビットマップ画像を指定されたサイズ（この例では幅200ピクセル、高さ200ピクセル）にリサイズしています。
最後の引数trueは、画像を滑らかにするためのフィルタリングを適用するかどうかを指定する部分です。

そして、レイアウトファイルに定義されているImageViewを取得し、
setImageBitmapを繋げて適用する画像（リサイズしたビットマップ）を指定しています。