[Android & Kotlin] 画像を ImageView で表示させる3つの方法

Kotlinを使ってアプリで画像を表示させてみましょう。画像表示にはImageView を使いますが画像の取り込み方による3種類の方法を試します。
 

as413k m26 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
レイアウトに直接
as413k m27 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
drawableから読込
as413k m28 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
assetsから取込

Android Studio 4.1.3
API 30

 

R904D.E24336V - [Android & Kotlin] 画像を ImageView で表示させる3つの方法

ImageView

 
JavaでのImageViewの基本的なところは以下を参照してください。

アプリで画像を表示させるにはImageViewを使います。画像表示には色々方法がありますが、下のような3つの設定方法について試してみたいと思います。 

 
表示させるお好みで画像を3つ用意します。

img 1 00 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法img_1.jpg
img 3 00 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法img_2.jpg
img 3 00 1 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法img_3.jpg

img_1.jpg、img_2.jpgの2枚をdrawableにコピー&ペーストして入れています。
また残りの、img_3.jpg を「assetsフォルダを作成して」入れます。
 
imageview a01b - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
 

 

レイアウトに直接埋め込むケース

 
これは、最初からレイアウトに記述します。
 
drawable に img_1.jpg を入れた状態で、レイアウトファイル activity_main.xml には以下のようにします。
 
activity_main.xml

以上の設定でMainActivityはそのままで実行させると
画像が表示されました。
 
as413k m26 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
 

drawableにある画像 img_1.jpg をsourceとして表示する設定です。(jpg, pngの拡張子はいりません)

これは、contentDescriptionを入れろというワーニングに対応したものです。この画像の説明を入れるわけですが、なくてもBuildエラーにはなりません。

@Stringの im_description を呼び出していますが、呼び出し元はstrings.xmlに記述します。
res¥values¥strings.xml

 
画像を画面いっぱいに表示させるための設定です。

 
画面の縦横一杯の領域で画像を表示させますが、実際の画像ピクセルと表示領域は必ずしも合ってはいません。scaleTypeは fitCenter あるいは centerCrop を使うと画面に合うように拡大縮小、切り取りをしてくれます。
 

 
この場合は、MainActivity.java に何も記述する必要はないのでJavaもKotlinも同じです。

 

drawable にある画像を読み込む

 
上と同様に画像 img_2.jpg は同じく drawableにあるとして、そのIDコードを呼びだし setImageResource(ID) で表示します。
コードで画像を呼び出しているので動的に画像の変更ができます。
 
Javaの場合

 
Kotlinの findViewById ではこのようになります

View Binding ではこのようになります

 
レイアウトは、MainActivityで呼ばれるIDに対応させます 

 
View Binding を使ってまとめるとこうなります

MainActivity.kt

 
activity_main.xml

 
リソースファイルです
res¥values¥strings.xml

 
build.gradle

 

as413k m27 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
 

 

assets に画像を置きそれを取り込む場合

 
assets folder を作ります

「app」右クリック「New」「Folder」「Assets Folder」

imageview 02 300x226 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法

そのまま「Finish」

imageview 03 300x277 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法
できた assets に画像 img_3.jpg をコピー&ペーストします。
プロジェクトの階層内に入り、フォルダに直接入れることもできます。
..¥app¥src¥main¥assets¥img_3.jpg
 
assets からはファイルの読み出しはtry catchを使って例外処理をするようにします。 

画像を取り込む記述は resources.assets.open() を使って このようにします。
 

 
レイアウトは、指定されたID(image_view_3)を使います
 

 
View Binding を使ってまとめると

MainActivity.kt

 
activity_main.xml

 
strings.xml

 
build.gradle

 

画像が表示されましたでしょうか
 
as413k m28 - [Android & Kotlin] 画像を ImageView で表示させる3つの方法

 

drawable VS assets

 
なぜdrawableだけでなくassetsを使うかというと、

  • アイコン画像などを100個以上使うようなケースでassetsではフォルダ分けができます。drawableではベタで放り込むしかありません。
  • assetsからの取り込みの場合はBitmapFactoryを使って画像をダウンサンプリリングすることができるためdrawableよりは比較的大きいファイルを取り込めます。

画像サイズというのはファイルサイズではなく、画像の横 x 縦なので圧縮は関係ありません。なぜならbitmap変換するところがネックなので。

メモリのリミットはAndroidの場合、端末依存なのでこれで大丈夫とは言い切れないのも困ったことで、最近はスマホも昔のPC並になりましたが、ハイエンドからローエンドまで存在するのが悩みです。

また、大きいサイズの画像を使う場合はassetsではなくアプリ固有の外部ストレージや共有の外部ストレージに保存して使用するケースが最近では多いかもしれません。
 
Reference:
ImageView | Android Developers