ImageViewは、画像を表示するためのViewコンポーネントであり、Androidプラットフォームにより提供されるAPIの一つです。
ImageViewを使用して画面に画像を表示してみましょう。
「ImageViewTraining」アプリを作成します。
Android Studioを起動し、新規プロジェクトを作成します。
「Welcome to Android Studio」画面の場合は、「Start a new Android Studio project」をクリックします。
別のプロジェクトが開いている場合は、ツールバーから「File」→「New」→「New Project...」をクリックします。
HelloWorldの時と同じようにプロジェクトを作成していきます。
アプリ名は「ImageViewTraining」としてください。
今回は「Backwards Compatibility (AppCompat)」のチェックは外しておきます。
ImageViewに表示する画像リソースを追加しましょう。
drawableフォルダを右クリック→「Show in Explorer」でエクスプローラを表示し、drawableフォルダに任意のPNG画像を格納します。
ファイル名は「sample_image.png」としておきましょう。
レイアウトファイルのTextViewをImageViewに変更し、画像を表示させてみましょう。
「activity_main.xml」を編集し、TextView要素を除去して、代わりに以下のコードを追記します。
「android:src」で、画像リソースをImageViewにセットしています。
コードを表示するにはJavaScriptを有効にしてください
サンプル : activity_main.xml
コードを表示するにはJavaScriptを有効にしてください
アプリを実行します。
自分が追加した画像が表示されていればOKです。
画像の縦横比が画面と一致していない場合は隙間ができています。縦横いっぱいに広げてみましょう。
ImageViewに属性「android:scaleType」を追加して、値に「fitXY」(X=横方向、Y=縦方向、に対してフィットさせる)を指定します。
コードを表示するにはJavaScriptを有効にしてください
アプリを実行します。
自分が追加した画像が縦横いっぱいに伸長して表示されていればOKです。
ソースコード上で、レイアウトからImageViewを取り出して使用してみましょう。
(TextViewの項で学習したのと同じように)ソースコードからidを指定してImageViewのインスタンスを取得します。
MainActivity.javaに以下のコードを実装します。
コードを表示するにはJavaScriptを有効にしてください
ImageViewクラスの変数を宣言して、findViewByIdで取得したオブジェクトを代入しています。
ImageViewに設定されている画像をソースコードから変更してみましょう。
ImageViewには、テキストを変更するための「setImage～」メソッドが用意されています。
画像リソースのIDや、動的に生成したDrawableオブジェクトやBitmapオブジェクトを指定することができます。
以下のコードを実装してみましょう。
コードを表示するにはJavaScriptを有効にしてください
サンプル : MainActivity.java
コードを表示するにはJavaScriptを有効にしてください
アプリを実行します。
アイコン画像(ドロイド君)が表示されていればOKです。
ソースコード上で、ImageViewのインスタンスを生成してみましょう。
ImageViewにはpublicなコンストラクタが用意されており、newすることでインスタンスを生成できます。
ソースコードでImageViewを生成してコンテンツViewにセットします。
MainActivity.javaに以下のコードを実装します。
サンプル : MainActivity.java
コードを表示するにはJavaScriptを有効にしてください
ImageViewクラスのコンストラクタを利用してインスタンスを生成し、画像リソースを指定しています。
画像リソースは、Android標準で用意されているメニューアイコン(カメラ)を指定しています。
アプリを実行します。
カメラの画像が表示されていればOKです。
ImageViewで使用できるAPIのうちよく使うものを紹介します。
これらをソースコードから利用する際のAPIについては、リンク先リファレンスの「Related methods:」に記載されていますので、そちらを参照してください。
android:src
表示する画像を指定します。
drawableリソースや、色を指定できます。
android:scaleType
表示する画像のサイズを、ImageViewのサイズに合わせてどのように調整するかを指定します。
例えば、「fitXY」が指定されていると、縦横いっぱいに、ImageViewのサイズにフィットするように画像が表示されます。