【Android Studio＆Kotlin】セレクトボックス（Spinner）2つを連動・連携（HierSelect）させて配列から配列を選択する方法

2021年9月2日 2021年9月2日 10分27秒

YOSHITAKA

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

セレクトボックスの選択肢た内容で2つ目のセレクトボックスの内容を変更できませんか？

よしたか

学んだことをアウトプットしていきます。

この記事を読むことで

2つのセレクトボックス（スピナー）の連動方法がわかります。

Contents

【Android Studio＆Kotlin】セレクトボックス（Spinner）2つを連動・連携させて配列から配列を選択する方法

名称の違いと機能の追加について

大前提

Android studioでコードを利用した時にテキストが赤くなっているところの機能をAlt＋Enterでインポートしていってください。
セレクトボックスはKotlinではSpinner（スピナー）という名称になっています。

activity_main.xml　画面の表示設定

まずは画面のlayoutを作っていきます。

できている人は飛ばしてください。

ここの部分の名称は合わせますので覚えておきましょう。

android:id="@+id/spinner1"

android:id="@+id/spinner2"

<?xml version="1.0" encoding="utf-8"?>
<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"
  >

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

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/spinner1" />
</RelativeLayout>

ポイント

Spinnerが2つセットしておけば大丈夫です。

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

<Spinner android:id="@+id/spinner2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/spinner1" />

strings.xml セレクトボックスの配列を設定

配列を別ファイルに設定します。

string.xmlはテキストをまとめることができるので最初にまとめておくといいかもしれませんね。

<resources>


//ここが配列として表示されるので追加するのが大事です。
    <string-array name="array1">
        <item>mobile</item>
        <item>motor</item>
    </string-array>
    <string-array name="mobile_array">
        <item>Android</item>
        <item>blackberry</item>
        <item>apple</item>
    </string-array>
    <string-array name="motor_array">
        <item>Audi</item>
        <item>BMW</item>
        <item>unicorn</item>
    </string-array>
</resources>

ポイント

valusフォルダになければ「string.xml」ファイルを作成してください。

MainActivity.kt

セレクトボックを設定していきます。

    var spinner1: Spinner? = null  //セレクトボックス1つめの宣言
    var spinner2: Spinner? = null  //セレクトボックス2つめの宣言
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        //レイアウトファイルのIdから指定してください。名称は各自でレイアウトファイルの名称を入れましょう。
        spinner1 = findViewById(R.id.spinner1) as Spinner
        spinner2 = findViewById(R.id.spinner2) as Spinner
        
        val adapter1 = ArrayAdapter.createFromResource(
            this,
            R.array.array1, android.R.layout.simple_spinner_item
        )
        spinner1?.setAdapter(adapter1)
        spinner1?.setOnItemSelectedListener(this)
    }


    override fun onItemSelected(
        parent: AdapterView<*>, 
        view: View, 
        position: Int,
        id: Long
    ) {
        if (spinner1?.getSelectedItem() == "1つ目のセレクトボックスで選んだテキスト") {

            // 1つ目に連動した配列を呼び出します。
            // R.array.mobile_arrayはvaluesフォルダの
            val adapter2 = ArrayAdapter.createFromResource(
                this,
                R.array.mobile_array, android.R.layout.simple_spinner_item
            )
            spinner2?.setAdapter(adapter2)
        } else {
            val adapter2 = ArrayAdapter.createFromResource(
                this,
                R.array.motor_array, android.R.layout.simple_spinner_item
            )
            spinner2?.setAdapter(adapter2)
        }

    }
    override fun onNothingSelected(parent: AdapterView<*>?) {
        //セレクトボックスが選ばれなかったときの処理
    }
}