Help us understand the problem. What is going on with this article?

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

More than 3 years have 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.
ksugawara61
都内のIT企業で働いております。 サーバサイド / クライアントサイドいろいろやっています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away