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

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

imageview 001 - [Android] Kotlin 画像を ImageView で表示させる3つの方法
レイアウトに直接
imageview 002 170x300 - [Android] Kotlin 画像を ImageView で表示させる3つの方法
drawableから読込
imageview 003 170x300 - [Android] Kotlin 画像を ImageView で表示させる3つの方法
assetsから取込

Android Studio 3.1.3
Android 8.1.0
Kotlin 1.2.50

 



ImageView

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

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

 
最初に表示させる適当な画像を3つ用意して、2枚をdrawableにコピー&ペーストします。
例)
– img_1.jpg
– img_2.jpg
をdrawableに入れています。
また残りの画像1枚を、img_3.jpgのようにassetsフォルダに入れます。
 
imageview a01b - [Android] Kotlin 画像を ImageView で表示させる3つの方法
 

 

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

 
これは、最初からレイアウトに書き込んでしまうものです。
 
drawable に img_1.jpg を入れた状態で、レイアウトファイル activity_main.xml には以下のように記述します。
また、レイアウトはデフォルトのConstraintLayoutではなくRelativeLayoutを使ってみました。
 
activity_main.xml

 
リソースファイルですが、contentDescriptionを入れろというワーニングに対応しただけです。この画像の説明を入れるわけですが、なくても大丈夫ではあります。
res¥values¥strings.xml

 
以上の設定で画像が表示されました。
 
imageview 001 170x300 - [Android] Kotlin 画像を ImageView で表示させる3つの方法
 
設定内容をみてみると、
 

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

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

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

 

drawable にある画像を読み込む

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

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

Kotlin Android Extensions を使うとこのように簡略化できます。

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

android:id=”@+id/image_view_2″
 

 
まとめるとこうなります
MainActivity.kt

 
activity_main.xml

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

 

imageview 002 170x300 - [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を使って例外処理をするようにします。
これは例外が発生した場合でもアプリが回復できる余地を作ることになります。
また、リソース開放漏れが無いようにfinalyでclose()を入れるか、try-with-resourcesを使います。  

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

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

 
Kotlin Android Extensions を使ってまとめると

MainActivity.kt

 
activity_main.xml

 
strings.xml

 
画像が表示されたでしょうか
 
imageview 003 170x300 - [Android] Kotlin 画像を ImageView で表示させる3つの方法

 

drawable VS assets

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

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

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

メモリのリミットはAndroidの場合、端末依存なのでこれで大丈夫とは言い切れないのも困ったことで、Android2.x系までカバーする場合は512x512pix程度に抑えた方がいいという噂もあります。
 
Reference:
ImageView | Android Developers

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加


 


ページのトップへ戻る




シェアする

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

フォローする