スピナーによるオプションの選択

いくつかのオプション（選択項目）から一つの項目を選択させる場合の UI です。

Web やデスクトップアプリケーションでもしばしば見られるドロップダウンボックスの Android UI での実装。

それがスピナーです。

ドロップダウン式のスピナーの表示

スピナーを用いるとアンドロイド UI でドロップダウンリストを表示させることができます。具体例としては、次のようなウィジェットとして表示していて、これをクリック（タップ）すると・・・

次のような選択項目が表示される、というものです。

選択項目リスト内では、現在選択されている項目の丸印が点灯しているような表現で表されます。

スピナーの実装

スピナーの実装は次のような手順で行います。

Spinner ウィジェットの定義
選択項目の定義 - ここでは文字列配列 (String Array) をリソースファイルに定義しています。
アダプターの作成と設定

まず、Spinner ウィジェットは次のように定義します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <Spinner
    android:id="@+id/spinner1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawSelectorOnTop="true"/>
</LinearLayout>

選択項目の String Array は次のように定義します。これは res/values/strings.xml リソースファイルにて定義します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">SpinnerTest1</string>
  <string-array name="us_state">
    <item>California (CA)</item>
    <item>Texas (TX)</item>
    <item>Hawaii (HI)</item>
    <item>Washington (WA)</item>
  </string-array>
</resources>

これでコードからは R.array.配列の名前でアクセスできます。

スピナーを利用する典型的なコードは次ようになります。

package com.keicode.android.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;
import android.widget.AdapterView.OnItemSelectedListener;

public class SpinnerTest1 extends Activity 
  implements OnItemSelectedListener {

  Spinner stateSpinner;
  String[] states;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    stateSpinner = (Spinner)findViewById(R.id.spinner1);
    
    states = getResources().getStringArray(R.array.us_state);
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(
      this,
      android.R.layout.simple_spinner_item,
      states);
    adapter.setDropDownViewResource(
      android.R.layout.simple_spinner_dropdown_item);
    
    stateSpinner.setAdapter(adapter);
    stateSpinner.setOnItemSelectedListener(this);
  }

  @Override
  public void onItemSelected(
    AdapterView<?> arg0, 
    View arg1, 
    int arg2,
    long arg3) {
    
    int i = arg0.getSelectedItemPosition();
    Toast.makeText(
      this, 
      states[i], 
      Toast.LENGTH_SHORT).show();
    
  }

  @Override
  public void onNothingSelected(AdapterView<?> arg0) {}
  
}

レイアウト設定の注意点

ここで元のスピナーとドロップダウンのレイアウトをそれぞれ別に設定していることに注意してください。スピナーのドロップダウン部分のレイアウトを setDropDownViewResource で行わないとスピナー本体のレイアウト定義が使われます。

例えば Spinner のコンストラクタで　layout.simple_spinner_dropdown_item　を渡すとスピナー本体のみためは次のようになってしまいます。

まぁ、もちろんこれが意図したものであれば構いませんが・・・。

尚、特に数字の選択を行う場合は、NumberPicker の利用も検討すべきです。