Hirauchiホームプロフィールプログラミング作品集お問い合わせ最終更新日:2020/02/12【Kotlin基礎】ImageViewで画像を表示させる方法を解説KotlinプログラミングKotlinで画像を表示させる方法が知りたい。画像の表示領域を変更したい。Kotlinで画像を表示させたいけど、どうすればいいかわからなかったり、ImageViewで画像を表示させることはできたけど、画像が崩れて表示されたりなど、ImageViewの使用方法がよくわからない方、たくさんいらっしゃると思います。本記事では、そんな方々に向け、ImageViewの使い方を、サンプルコードを交え、わかりやすく解説しております。目次1.ImageViewで画像を表示させる方法1-1.xmlでImageViewを実装する1-2.コードで動的にImageViewを実装する2.ImageViewをカスタマイズする方法2-1.表示する位置を変更する方法2-2.画像の表示のされ方を変更する方法3.まとめImageViewで画像を表示させる方法Kotlinで画像を表示するには、ImageViewというViewを使用します。DevelopersImageViewを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。xmlでImageViewを実装するまずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。“soccer_ball”という画像をdrawableフォルダに保存していることを前提としております。android:layout_height="wrap_content"/><ImageView/>タグで、ImageViewを実装します。画像を指定するには、android:srcを使用します。@drawable/はdrawableフォルダを示しております。Point<ImageView/>タグで、ImageViewを実装する画像を指定するには、android:srcを使用するコードで動的にImageViewを実装する続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。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の領域に色をつけております。Gravity.END左に表示させるにはstart、中央に表示させるにはcenter、右に表示させるにはendを指定します。コードで実装した場合のsoccer_ball3の実装は、他の2つの設定方法と違っておりますが、やっていることは同じです。「こんな感じで簡単に書くこともできますよ」という紹介のつもりで載せてみました。layout_gravityのデフォルト値にはStartが設定されております。画像の表示のされ方を変更方法を紹介致します。画像の表示のされ方を変更するには、scaleTypeを使用します。以下は、3つのscaleTypeを指定したサンプルコードです。ImageViewの横幅を、”match_parent”に変更しております。ImageView.ScaleType.CENTER_CROPfitCenterを指定すると、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を覆うように画像が表示されるTweet元太こんにちは、元太と申します。フリーランスのプログラマーとして、スマホアプリの開発をしております。現在は客先へ常駐で働いており、仕事以外の時間で、個人でアプリを開発したり、ブログの執筆等を行っております。子どもいっぱいの大家族を夢見る30歳です。