すだ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を繋げて適用する画像（リサイズしたビットマップ）を指定しています。
使い分けのポイント
- 簡単に画像を表示したいだけなら
setImageResourceでリソースIDを指定するだけ。 - 複雑なグラフィックやカスタムデザインを表示したいなら
setImageDrawableを使用して、Drawableオブジェクトを通じて表示。 - 画像に加工を施したり、外部から取得した画像を表示したいなら
setImageBitmapを使用して、Bitmapオブジェクトを設定。
すだ単純に画像を表示したいだけなら xmlファイルに画像を指定するだけでよさそうですね！
処理によって表示する画像を変えたり、画像を加工して表示したり、
画像に対して何か指定したい場合には
Kotlinのメソッドを使用して画像を表示する方法をとるのが良いですね！
まとめ
おつかれさまでした！
Kotlinを用いた画像処理のスキルを深めることで
Androidアプリ開発をより充実させることができるかと思います！
すだ技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？
それではまた次の記事でお会いしましょう！
コメント