選択用のコントロール（CheckBox / RadioGroup, RadioButton / Spinner）

Android

（ブログ記事の一覧は「こちら」）

設定画面などでよく使われる、 Androidアプリでの選択用のコントロールについて学びます。

ここで学ぶこと

例題

作成するもの

f:id:MJeeeey:20190901211428p:plain:w240

この例題では、以下のことが実現できます。

レイアウト

以下は、LinearLayoutで配置した場合の例です。 ラジオボタンをセットする場合は、まずRadioGroupというものを配置して、その中に必要な数のRadioButtonをセットする必要があります。

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

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RadioGroup>

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </Spinner>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

プログラム

onCreate関数の中に、それぞれ以下を記述します。

チェックボックスについては、レイアウトでテキストをセットすることも可能です。今回はプログラム側でセットしています。

// チェックボックスのテキスト
CheckBox checkBox = findViewById(R.id.checkBox);
checkBox.setText("日本語");
CheckBox checkBox2 = findViewById(R.id.checkBox2);
checkBox2.setText("英語");

ラジオボタンについても、レイアウトでテキストをセットすることも可能です。
加えて、最初に選択する項目をRadioGroupのcheckメソッドでセットしています。

// ラジオボタンのテキスト
RadioButton radioButton = findViewById(R.id.radioButton);
radioButton.setText("東京");
RadioButton radioButton2 = findViewById(R.id.radioButton2);
radioButton2.setText("大阪");
// 最初に選択する項目
RadioGroup radioGroup = findViewById(R.id.radioGroup);
radioGroup.check(R.id.radioButton);

スピナーについては、クリックしたときに表示されるドロップダウンリストをプログラムでセットします。
加えて、最初に選択する項目をsetSelectionメソッドでセットしています。

// スピナーの生成
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
String[] strItems = {"赤", "青", "黄"};
for (int i = 0; i < strItems.length; i++) {
    adapter.add(strItems[i]);
}

Spinner spinner = findViewById(R.id.spinner);
spinner.setAdapter(adapter);
// 最初に選択する項目
spinner.setSelection(0);


これでそれぞれのコントロールについての準備ができました。
ボタンをクリックしたときに呼ばれるプログラムとして、以下をコードを記述します。

CheckBox checkBox = findViewById(R.id.checkBox);
CheckBox checkBox2 = findViewById(R.id.checkBox2);
RadioGroup radioGroup = findViewById(R.id.radioGroup);
Spinner spinner = findViewById(R.id.spinner);

// 選択したラジオボタンのIDを取得
int iCheckedId = radioGroup.getCheckedRadioButtonId();

// チェックボックス、ラジオボタン、スピナーの状態取得
String strResult =
        "チェックボックス: " + checkBox.isChecked() + "\n"
        + "チェックボックス2: " + checkBox2.isChecked() + "\n"
        + "ラジオボタン: " + ((RadioButton)findViewById(iCheckedId)).getText() + "\n"
        + "スピナー: " + spinner.getSelectedItem();

// Toastで表示
Toast.makeText(MainActivity.this, strResult, Toast.LENGTH_LONG).show();

実行、確認

チェックボックス、ラジオボタン、スピナーを操作して、ボタンをクリックしてください。それぞれの状態がToast（トースト：画面下部に表示される小さなポップアップ）で表示されます。

課題1

それぞれのコントロールについて、項目の数を増やしてみてください。

課題2

プリファレンス（SharedPreferencesクラス）を利用して、アプリを再起動してもそれぞれのコントロールの状態が保持されるようにプログラムを修正してください。


[ヒント]
まずは、それぞれのコントロールを操作したときに呼ばれるリスナーをプログラムに追加する必要があります。

checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
        // チェックボックスをクリックしたときに呼ばれる
    }
});

checkBox2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
        // チェックボックス2をクリックしたときに呼ばれる
    }
});

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        // ラジオボタンをクリックしたときに呼ばれる
    }
});

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
        // スピナーの項目を選択したときに呼ばれる
    }

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

リスナーが呼ばれたときに、選択した項目をプリファレンスで保存します。
また、起動時にリファレンスで保存した項目をセットするために、onCreate関数の中に読み込んだ項目をセットします。