Posted at

ImageViewにランダムな画像を表示する

More than 1 year has passed since last update.


はじめに

今回のエントリでは、AndroidのImageViewの中にランダムな画像を表示するための手順を説明していきます。

以下は、音楽のアルバムリストにアルバムアートがない場合にランダムな画像を表示するような処理を想定して記入しています。


フォルダ構成

今回の内容を説明していくにあたり、Androidのソースコードのフォルダ構成を以下のようにしています。


/main

 ├ java # AndroidのJavaソースファイル

 ├ res # リソースファイル

   ├ ...

   ├ layout # レイアウトファイル

   ├ drawable # 画像ファイルを配置

   ├ values # 画像ファイルの配列を追加



1. layoutファイルにImageViewを追加

まず、初めにlayoutファイルにランダムな画像を表示するためのImageViewを宣言します。


sample.xml

    .

.
<ImageView
android:id="@+id/list_album_art"
android:layout_width="70dp"
android:layout_height="70dp"
android:padding="3dp" />
.
.


2. リソースのdrawableフォルダ配下にランダムに表示させる画像素材を配置

続いて、ランダムに表示させる画像の素材を上記のフォルダ構成の drawableフォルダ配下に配置することで、リソースとして利用できるようにします。


├ drawable # ここにファイルを配置

  ├ albumart_blue.png

  ├ albumart_lightblue.png

  ├ albumart_purple.png

  ├ albumart_red.png

  ├ albumart_yellow.png



3. リソースのvaluesフォルダ配下に画像素材の arrayを追加

次に、valuesフォルダ配下に arrays.xmlを追加し、先程の手順2で追加した画像素材を配列のリソースとしてまとめます。


├ values

  ├ arrays.xml # 追加


arrays.xmlは以下のような内容にします。


arrays.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
<array name="default_albumart">
<item>@drawable/albumart_lightblue</item>
<item>@drawable/albumart_blue</item>
<item>@drawable/albumart_purple</item>
<item>@drawable/albumart_red</item>
<item>@drawable/albumart_yellow</item>
</array>
</resources>


4. Javaコード内に画像をランダムで選択する処理を追加

最後に、手順3のarrays.xmlに記入した要素 default_albumartを利用して、ImageView(list_album_art)にランダムな画像を表示する処理を以下のように記入します。

.

.
// ImageViewを変数化
ImageView albumArt = (ImageView) view.findViewById(R.id.list_album_art);

// ランダム画像のリソースの配列を宣言
TypedArray typedArray = getContext().getResources().obtainTypedArray(R.array.default_albumart);

// ランダムな数値を設定(※今回は配列の長さが5のため、5を指定)
int rand = (int)(Math.floor(Math.random() * 5));

// ランダムで画像を選択する
Drawable drawable = typedArray.getDrawable(rand);

// ImageViewの画像の値を設定
albumArt.setImageDrawable(drawable);
.
.


5. 出力結果

上記の内容を実装することで、以下のファイルのようにランダムに画像を表示できるようになります。

以下の画像のようにリスト表示する場合、同じ画像が連続して表示されてしまう場合があるので、連続表示を防ぐ場合は前の状態を見て判断するなどの工夫が必要になりそうです。

album_list.png


参考文献


  1. 画像をランダムに表示する。 - ふわふわぷかぷか, http://fuwafuwapukapuka.hatenablog.com/entry/2014/03/06/214525, Online; accessed 30-November-2016.

  2. android:ランダムに画像とテキストを切り替える(重複なし) _ Activity _ asky, http://asky.sakura.ne.jp/wp/2015/08/20/15082001/, Online; accessed 30-November-2016.