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

Kotlinを使ってアプリで画像を表示させてみましょう。

画像表示にはImageView を使いますが画像の取り込み方による3種類の方法を試します。
 

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

Android Studio
2021.1.1

 




ImageView

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

https://akira-watson.com/android/imageview.html

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

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

img_1.jpg、img_2.jpgの2枚をdrawableにコピー&ペーストして入れています。

また残りの、img_3.jpg を「assetsフォルダを作成して」入れます。
(assetsフォルダの設定は後半に説明があります)
 
1x1.trans - [Android & Kotlin]  画像を ImageView で表示させる3つの方法


 
 

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

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


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


 
以上の設定でMainActivityはそのままで実行させると
画像が表示されました。
 
1x1.trans - [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


 

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


 
 

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

 
assets folder を作ります

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

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

そのまま「Finish」

1x1.trans - [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


 

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

 

drawable VS assets

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

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

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

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする