6. 【Android/Kotlin】スピナー(Spinner)

#はじめに
DreamHanksのMOONです。

前回は「ダイアログ」について説明をしていきました。
[5. 【Android/Kotlin】ダイアログ(Dialog)](https://qiita.com/DreamHanks/items/c05d434363ba40c2dd9d)

今回はスピナーというViewについて説明していきます。

#スピナーとは
スピナーは`HTML`のタグの`select`と同じ機能の`View`です。
Viewをクリックしするとアイテムが表示されるし、アイテム中に一つをクリックするとそのアイテムがスピナーに配置されます。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/de392dfb-ab1e-7e31-2520-27043e81c0b0.png)

#スピナーにアイテム追加
アイテムを追加する方法は二つがあります。
###１．xmlファイルにアイテムを追加
　・アイテムのリソースxmlファイルを作成

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/8d2f6d29-9b98-1f66-b590-0c3001224644.png)


```xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="user_items">
        <item>佐藤</item>
        <item>鈴木</item>
        <item>高橋</item>
        <item>伊藤</item>
        <item>渡辺</item>
        <item>山本</item>
        <item>中村</item>
        <item>小林</item>
        <item>加藤</item>
    </string-array>
</resources>
```

　・レイアウトのxmlファイルを作成

![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/990910e1-cbf3-fc1c-791f-a668a1efe7e8.jpeg)

```xml:activity_spinner.xml
<?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=".ListViewActivity"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="ユーザー名を選択してください。" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_centerHorizontal="true"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:id="@+id/user_name_tv"
        android:text="選択されたユーザー名" />

</LinearLayout>

```

　・Activityファイルを作成

```kotlin:SpinnerActivity.kt
package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class SpinnerActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_spinner)

        var user_name_tv = findViewById<TextView>(R.id.user_name_tv)
        var spinner = findViewById<Spinner>(R.id.spinner)

        //xmlファイルからアイテムの配列を取得
        val items = resources.getStringArray(R.array.user_items)

        //アダプターにアイテム配列を設定
        val Adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, items)
        
        //スピナーにアダプターを設定
        spinner.adapter = Adapter

        //スピナーのセレクトイベント設定
        spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>,
                view: View,
                position: Int,
                id: Long
            ) {
                //選択されたアイテムをテキストビューに設定
                val userName = parent.getItemAtPosition(position);
                user_name_tv.text = userName.toString()
            }

            override fun onNothingSelected(p0: AdapterView<*>?) {
            }
        }

    }
}
```


###２．配列やリストにアイテムを追加
　・レイアウトのxmlファイルを作成
　　レイアウトのxmlは上記と同じxmlです。

　・Activityファイルを作成

```kotlin:SpinnerActivity.kt
package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class SpinnerActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_spinner)

        var user_name_tv = findViewById<TextView>(R.id.user_name_tv)
        var spinner = findViewById<Spinner>(R.id.spinner)

        //ユーザー名のリストを生成
        var userList = arrayListOf<String>("佐藤", "鈴木", "高橋", "伊藤", "渡辺", "山本", "中村", "小林", "加藤")

        //アダプターにユーザー名のリストを設定
        val Adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, userList)

        //スピナーにアダプターを設定
        spinner.adapter = Adapter

        //スピナーのセレクトイベント設定
        spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>,
                view: View,
                position: Int,
                id: Long
            ) {
                //選択されたアイテムをテキストビューに設定
                val userName = parent.getItemAtPosition(position);
                user_name_tv.text = userName.toString()
            }

            override fun onNothingSelected(p0: AdapterView<*>?) {
            }
        }

    }
}
```

#アプリ起動
　・スピナーをクリックした場合
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/d30178f7-8a1c-0600-b46c-665f5d8c51ce.jpeg" width=50%>

　・スピナーのアイテム中に「山本」をクリックした場合
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/6d767613-e79f-7534-c10a-e05e7b1a4cdc.jpeg" width=50%>

#終わりに
今回は「スピナー」について説明をしていきました。

次回はバリデーションチェックについて説明をしていきます。
[7. 【Android/Kotlin】バリデーションチェック](https://qiita.com/DreamHanks/items/81511dae61cc9c4a7e63)

最新内容については下記のリンク（DreamHanksのブログ）で確認することができます。
[DreamHanksブログ（Android/Kotlinアプリ開発）](http://blog.dreamhanks.com/android-kotlin%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba/)