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

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

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

よしたか
学んだことをアウトプットしていきます。
この記事を読むことで
  • 2つのセレクトボックス(スピナー)の連動方法がわかります。

【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_arrayvaluesフォルダの
            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<*>?) {
        //セレクトボックスが選ばれなかったときの処理
    }
}
ポイント
  • セレクトボックスが選ばれなかったときの処理は空白でも問題なさそうです。

まとめ

今回はセレクトボックス(Spinner)2つを連動・連携させて配列から配列を選択する方法についてお伝えしました。

 

※プログラミングは習得中ですので、参考程度に記事を読んでください。

 

参考にしたサイトはこちらです。

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事