[Android] Spinner をカスタマイズして画像リストを表示する

Spinner はただリスト項目を選択するだけではなく、画像とテキストをレイアウトすることも可能です。ListViewと同じようにadapterをカスタマイズして使い、ちょっとリッチなspinnerにすることもできます。

Android Studio
20212.1

Customized Spinner

　
Spinnerの基本については Spinner を参照ください。画像をSpinnerで表示することまではあまりないかもしれませんが、リスト要素のフォントやサイズ、背景色などちょっと変更したい場合は多々あります。

目次
1. Adapterのカスタマイズ
2. サンプルコード
3. サンプル動画

Adapterのカスタマイズ

　
作成手順としては基本のSpinnerと同じですが、カスタマイズするのはAdapterです。このあたりはListViewのAdapterのカスタマイズと同様です。

選択肢を設定する
Spinnerのインスタンスを生成して、Adapterを設定
選択肢が選択された時の処理を記述

1. 画像とその名前を選択肢にします。画像の場合はdrawableに入れてそのresourceの画像名をリストにします。

2. TestAdapterというBaseAdapterを継承したAdapterクラスを作り、これをカスタマイズします。基本のSpinnerではデフォルトで設定されているレイアウトを使いましたが、レイアウトも自由にカスタマイズしていきます。

3. リスナーを設定して選択されたセルの位置を取得して画像を表示します。

@drawableに置いた画像をその名前から引き出すためにsetImageResource( Resource ID )を使います。

imageView.setImageResource(
    getResources().getIdentifier(spinnerImages[position],
    "drawable", 
    getPackageName())
);

imageView.setImageResource(

getResources().getIdentifier(spinnerImages[position],

"drawable",

getPackageName())

);

サンプルコード

　
まとめると

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.Spinner;

public class MainActivity extends AppCompatActivity {

    private static final String[] spinnerItems = {
            "Select", "Yuka", "Kurumi", "Mai", "Miki", "Saya",
            "Toko", "Nagi", "Yuyu", "Yumiko", "Katakuriko" };

    private static final String[] spinnerImages = {
            "transparent", "yuka", "kurumi", "mai", "miki", "saya",
            "toko", "nagi", "yuyu", "yumiko", "katakuriko" };

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        Spinner spinner = findViewById(R.id.spinner);

        TestAdapter adapter = new TestAdapter(this.getApplicationContext(),
                R.layout.list, spinnerItems, spinnerImages);

        spinner.setAdapter(adapter);

        // リスナーを登録
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            //　アイテムが選択された時
            public void onItemSelected(AdapterView<?> parent,
                                       View viw, int position, long id) {

                imageView.setImageResource(getResources().
                        getIdentifier(spinnerImages[position],
                                "drawable", getPackageName()));
            }

            //　アイテムが選択されなかった
            public void onNothingSelected(AdapterView<?> parent) {
            }
        });
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ImageView;

import android.widget.Spinner;

public class MainActivity extends AppCompatActivity {

private static final String[] spinnerItems = {

"Select", "Yuka", "Kurumi", "Mai", "Miki", "Saya",

"Toko", "Nagi", "Yuyu", "Yumiko", "Katakuriko" };

private static final String[] spinnerImages = {

"transparent", "yuka", "kurumi", "mai", "miki", "saya",

"toko", "nagi", "yuyu", "yumiko", "katakuriko" };

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Spinner spinner = findViewById(R.id.spinner);

TestAdapter adapter = new TestAdapter(this.getApplicationContext(),

R.layout.list, spinnerItems, spinnerImages);

spinner.setAdapter(adapter);

// リスナーを登録

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

//　アイテムが選択された時

public void onItemSelected(AdapterView<?> parent,

View viw, int position, long id) {

imageView.setImageResource(getResources().

getIdentifier(spinnerImages[position],

"drawable", getPackageName()));

}

//　アイテムが選択されなかった

public void onNothingSelected(AdapterView<?> parent) {

}

});

}

　
アダプタークラスのファイルを作成します
TestAdapter.java

//package your.package.name;

import android.content.Context;
import android.content.res.Resources;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class TestAdapter extends BaseAdapter {

    private final LayoutInflater inflater;
    private final int layoutID;
    private final String[] names;
    private final int[] imageIDs;

    static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }

    TestAdapter(Context context,
                int itemLayoutId,
                String[] spinnerItems,
                String[] spinnerImages ){

        inflater = LayoutInflater.from(context);
        layoutID = itemLayoutId;
        names = spinnerItems;
        imageIDs = new int[spinnerImages.length];
        Resources res = context.getResources();

        // 最初に画像IDを配列で取っておく
        for( int i = 0; i< spinnerImages.length; i++){
            imageIDs[i] = res.getIdentifier(spinnerImages[i],
                    "drawable", context.getPackageName());
        }
    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;
        if (convertView == null) {
            convertView = inflater.inflate(layoutID, null);
            holder = new ViewHolder();

            holder.imageView = convertView.findViewById(R.id.image_view);
            holder.textView = convertView.findViewById(R.id.text_view);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageView.setImageResource(imageIDs[position]);
        holder.textView.setText(names[position]);

        return convertView;
    }

    @Override
    public int getCount() {
        return names.length;
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

}

//package your.package.name;

import android.content.Context;

import android.content.res.Resources;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class TestAdapter extends BaseAdapter {

private final LayoutInflater inflater;

private final int layoutID;

private final String[] names;

private final int[] imageIDs;

static class ViewHolder {

ImageView imageView;

TextView textView;

}

TestAdapter(Context context,

int itemLayoutId,

String[] spinnerItems,

String[] spinnerImages ){

inflater = LayoutInflater.from(context);

layoutID = itemLayoutId;

names = spinnerItems;

imageIDs = new int[spinnerImages.length];

Resources res = context.getResources();

// 最初に画像IDを配列で取っておく

for( int i = 0; i< spinnerImages.length; i++){

imageIDs[i] = res.getIdentifier(spinnerImages[i],

"drawable", context.getPackageName());

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if (convertView == null) {

convertView = inflater.inflate(layoutID, null);

holder = new ViewHolder();

holder.imageView = convertView.findViewById(R.id.image_view);

holder.textView = convertView.findViewById(R.id.text_view);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

holder.imageView.setImageResource(imageIDs[position]);

holder.textView.setText(names[position]);

return convertView;

}

@Override

public int getCount() {

return names.length;

}

@Override

public Object getItem(int position) {

return position;

}

@Override

public long getItemId(int position) {

return position;

}

activty_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cfd"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginTop="60dp"
        android:contentDescription="@string/description"/>

    <Spinner
        android:id="@+id/spinner"
        android:background="#8da"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" />

</LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#cfd"

android:orientation="vertical"

android:gravity="center_horizontal"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:layout_width="160dp"

android:layout_height="160dp"

android:layout_marginTop="60dp"

android:contentDescription="@string/description"/>

<Spinner

android:id="@+id/spinner"

android:background="#8da"

android:layout_width="250dp"

android:layout_height="wrap_content"

android:layout_margin="20dp" />

</LinearLayout>

　
Spinnerで表示するリストのレイアウト
list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:background="#8da"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image_view"
        android:scaleType="centerCrop"
        android:layout_margin="5dp"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:contentDescription="@string/description"/>

    <TextView
        android:id="@+id/text_view"
        android:textColor="#000"
        android:textSize="20sp"
        android:layout_gravity="center_vertical"
        android:layout_marginStart="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

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

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:background="#8da"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/image_view"

android:scaleType="centerCrop"

android:layout_margin="5dp"

android:layout_width="40dp"

android:layout_height="40dp"

android:contentDescription="@string/description"/>

<TextView

android:id="@+id/text_view"

android:textColor="#000"

android:textSize="20sp"

android:layout_gravity="center_vertical"

android:layout_marginStart="30dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

　
リソース
strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="description">photo</string>
</resources>

<string name="description">photo</string>

</resources>