Tips

【Android】 Spinnerの利用方法とSpinnerもどきの作成方法

Spinner

Spinnerとは、HTMLで言うところのコンボボックスのようなものです。
ただし、Spinnerを使用すると画面により、小さく選択し辛い場合があります。
また、Spinnerの文字の大きさを変更することは、意外と面倒だったりします。
今回は、Spinnerの利用方法とSpinnerと同じ動作を
ボタンとダイアログで実装する方法について記載したいと思います。
※ボタンとダイアログで実装する方法はAPIレベル11以上が必須となります。

サンプルプログラム

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.spinnersample.MainActivity" >
 
    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />
 
    <Button
        android:id="@+id/button1"
        style="@android:style/Widget.Holo.Light.Spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/spinner1" />
 
</RelativeLayout>

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
package com.example.spinnersample;
 
import java.util.ArrayList;
import java.util.List;
 
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;
 
public class MainActivity extends ActionBarActivity {
 
    private List<String> dataList;
 
    private Button button;
    private ArrayAdapter<String> buttonAdapter;
    private int buttonSelectedIndex = 0;
    private AlertDialog buttonAlertDialog;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        dataList = mkDataList(10);
 
        // ====================
        // Spinnerの処理
        // ====================
        Spinner spin = (Spinner) findViewById(R.id.spinner1);
        ArrayAdapter<String> spinAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, dataList);
        // SpinnerにAdapterを設定
        spin.setAdapter(spinAdapter);
 
        // Spinnerのアイテムを選択時に行う処理
        spin.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
 
            // アイテムが選択された場合
            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                    int position, long id) {
                Spinner spin_p = (Spinner) parent;
                String item = (String) spin_p.getSelectedItem();
                Toast.makeText(MainActivity.this,
                        "【Spinner】 " + "[" + position + "] " + item,
                        Toast.LENGTH_SHORT).show();
            }
 
            // 何も選択されなかった場合
            @Override
            public void onNothingSelected(AdapterView<?> arg0) {
            }
        });
 
        // ====================
        // Buttonの処理
        // ====================
        button = (Button) findViewById(R.id.button1);
        button.setText(dataList.get(0));
        buttonAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_single_choice, dataList);
 
        button.setOnClickListener(new OnClickListener() {
 
            @Override
            public void onClick(View v) {
                if (v.getId() == R.id.button1) {
                    AlertDialog.Builder builder = new AlertDialog.Builder(
                            MainActivity.this);
                    builder.setTitle("選択してください");
                    builder.setSingleChoiceItems(buttonAdapter,
                            buttonSelectedIndex,
                            new DialogInterface.OnClickListener() {
 
                                @Override
                                public void onClick(DialogInterface dialog,
                                        int itemIndex) {
                                    buttonSelectedIndex = itemIndex;
                                    String item = buttonAdapter.getItem(itemIndex);
                                    button.setText(item);
                                    Toast.makeText(MainActivity.this,
                                            "【Button】 " + "[" + itemIndex + "] " + item,
                                            Toast.LENGTH_SHORT).show();
                                    buttonAlertDialog.dismiss();
                                }
                    });
                    buttonAlertDialog = builder.create();
                    buttonAlertDialog.show();
                }
            }
        });
    }
 
    /**
     * 指定した数のList<String>を生成
     *
     * @param cnt
     * @return 文字列リスト
     */
    private List<String> mkDataList(int cnt) {
        List<String> list = new ArrayList<String>();
        for (int i = 0; i < cnt; i++) {
            list.add("選択" + (int) (i + 1));
        }
        return list;
    }
}

動作確認

見た目は、あまり変わらないです。

  • 上:Spinner
  • 下:Button

01_spinner_sample

Spinner

HTMLのコンボボックスと同様に下に伸びる感じで表示されます。
ただ、指の太さに対して、表示される内容が小さいため、押し辛いと感じています。
02_spinner

ボタンとダイアログ

ボタンをSpinnerの画像を使用して、もどきボタンを生成しています。
また、ボタンを押下するとダイアログがコンボボックスと同じように表示されます。
こちらの方が見やすい、押下しやすいと思います。
03_spinner_button

サンプルプログラムでは、まとめて匿名クラスで実装していますが、
Interface実装で行った方がソースは管理しやすいと思います。
動き自体は大差ないと思うので、後者で実装した方がユーザにも優しいかなと思いました。

Androidアプリ開発の必須知識!JAVAプログラミングを学べる連載リンク

はじめてのJAVA 連載

Recent News

Recent Tips

Tag Search