Genta Hirauchi

公開日：2020/02/12
更新日：2020/08/03

【Kotlin基礎】ImageViewで画像を表示させる方法を解説

  • Kotlinで画像を表示させる方法が知りたい。
  • 画像の表示領域を変更したい。

Kotlinで画像を表示させたいけど、どうすればいいかわからなかったり、ImageViewで画像を表示させることはできたけど、画像が崩れて表示されたりなど、ImageViewの使用方法がよくわからない方、たくさんいらっしゃると思います。

本記事では、そんな方々に向け、ImageViewの使い方を、サンプルコードを交え、わかりやすく解説しております。

目次

ImageViewで画像を表示させる方法

Kotlinで画像を表示するには、ImageViewというViewを使用します。

【公式ドキュメント】 ： ImageView | Android Developers

ImageViewを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。

xmlでImageViewを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。
※ “soccer_ball”という画像をdrawableフォルダに保存していることを前提としております。

  • xmlで実装
<ImageView
   android:src="@drawable/soccer_ball"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

<ImageView/>タグで、ImageViewを実装します。

また、画像を指定するには、android:srcを使用します。@drawable/はdrawableフォルダを示しております。

Point
  • <ImageView/>タグで、ImageViewを実装する
  • 画像を指定するには、android:srcを使用する

コードで動的にImageViewを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

  • コードで実装
val imageView = ImageView(this)
imageView.setImageResource(R.drawable.soccer_ball)
linearLayout.addView(imageView, LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

ImageView()で、ImageViewのインスタンスを生成しております。

画像を指定するには、setImageResource()を使用します。引数には、画像のIDを指定します。

また、生成したImageViewのインスタンスは、Viewとして追加する必要があります。
Viewとして追加するには、addView()を使用します。サンプルでは親レイアウトのlinearLayoutに、ImageViewを追加しております。

Point
  • コードで実装するには、ImageView()でインスタンスを生成した後、addView()で追加する
  • コードで画像を指定するには、setImageResource()を使用する

ImageViewをカスタマイズする方法

ここからは、ImageViewをカスタマイズする方法について紹介していきます。

表示する位置を変更する方法

まずは、表示する位置を変更する方法を紹介致します。ImageViewの表示位置を変更するには、layout_gravityを使用します。

layout_gravityは、対象のViewとその親のViewとの位置関係を、相対的に設定する場合に使用されます。

以下は、3つの画像を、左、中央、右の順で表示させるサンプルコードです。わかりやすいように、ImageViewの領域に色をつけております。

  • xmlで実装
  • コードで実装
<ImageView
   android:src="@drawable/soccer_ball"
   android:background="@android:color/holo_red_light"
   android:layout_gravity="start"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageView
   android:src="@drawable/soccer_ball"
   android:background="@android:color/holo_blue_light"
   android:layout_gravity="center"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageView
   android:src="@drawable/soccer_ball"
   android:background="@android:color/holo_green_light"
   android:layout_gravity="end"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

val soccer_ball1 = findViewById<ImageView>(R.id.soccer_ball1)
val layoutParams1 = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
layoutParams1.gravity = Gravity.START
soccer_ball1.layoutParams = layoutParams1

val soccer_ball2 = findViewById<ImageView>(R.id.soccer_ball2)
val layoutParams2 = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
layoutParams2.gravity = Gravity.CENTER
soccer_ball2.layoutParams = layoutParams2

val soccer_ball3 = findViewById<ImageView>(R.id.soccer_ball3)
(soccer_ball3.layoutParams as LinearLayout.LayoutParams).gravity = Gravity.END

左に表示させるにはstart、中央に表示させるにはcenter、右に表示させるにはendを指定します。

コードで実装した場合のsoccer_ball3の実装は、他の2つの設定方法と違っておりますが、やっていることは同じです。「こんな感じで簡単に書くこともできますよ」という紹介のつもりで載せてみました。

なお、layout_gravityのデフォルト値にはStartが設定されております。

Point
  • ImageViewの位置を動かすには、layout_gravityを使用する
  • layout_gravityで表示位置を変える際、左に表示させるにはstart、中央に表示させるにはcenter、右に表示させるにはendを指定する

画像の表示のされ方を変更する方法

続いて、画像の表示のされ方を変更方法を紹介致します。画像の表示のされ方を変更するには、scaleTypeを使用します。

以下は、3つのscaleTypeを指定したサンプルコードです。ImageViewの横幅を、”match_parent”に変更しております。

  • xmlで実装
  • コードで実装
<ImageView
   android:src="@drawable/soccer_ball"
   android:background="@android:color/holo_red_light"
   android:scaleType="fitCenter"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

<ImageView
   android:src="@drawable/soccer_ball"
   android:background="@android:color/holo_blue_light"
   android:scaleType="fitXY"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

<ImageView
   android:src="@drawable/soccer_ball"
   android:background="@android:color/holo_green_light"
   android:scaleType="centerCrop"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

val soccer_ball1 = findViewById<ImageView>(R.id.soccer_ball1)
soccer_ball1.scaleType = ImageView.ScaleType.FIT_CENTER

val soccer_ball2 = findViewById<ImageView>(R.id.soccer_ball2)
soccer_ball2.scaleType = ImageView.ScaleType.FIT_XY

val soccer_ball3 = findViewById<ImageView>(R.id.soccer_ball3)
soccer_ball3.scaleType = ImageView.ScaleType.CENTER_CROP

fitCenterを指定すると、ImageViewの中央から、縦横の比率を変えないで拡大縮小され、ImageViewに収まるように画像が表示されます。この設定がデフォルト値です。

fitXYを指定すると、ImageViewのサイズに一致するように画像が拡大縮小され表示されます。

centerCropを指定すると、ImageViewの中央から、縦横の比率を変えないで拡大縮小され、ImageView全体を覆うように画像が表示されます。

Point
  • 画像の表示のされ方を変更するには、scaleTypeを使用する
  • scaleTypeにfitCenterを指定すると、ImageViewに収まるように画像が表示される
  • scaleTypeにfitXYを指定すると、ImageViewのサイズに合わせるように画像が表示される
  • scaleTypeにfitCenterを指定すると、ImageViewを覆うように画像が表示される

まとめ

  • xmlでImageViewを実装するには、<ImageView/>タグを使用する
  • xmlで画像を指定するには、android:srcを使用する
  • コードでImageViewを実装するには、ImageView()でインスタンスを生成した後、addView()で追加する
  • コードで画像を指定するには、setImageResource()を使用する
  • ImageViewの位置を動かすには、layout_gravityを使用する
  • layout_gravityで表示位置を変える際、左に表示させるにはstart、中央に表示させるにはcenter、右に表示させるにはendを指定する
  • 画像の表示のされ方を変更するには、scaleTypeを使用する
  • scaleTypeにfitCenterを指定すると、ImageViewに収まるように画像が表示される
  • scaleTypeにfitXYを指定すると、ImageViewのサイズに合わせるように画像が表示される
  • scaleTypeにfitCenterを指定すると、ImageViewを覆うように画像が表示される

関連記事