Day 22：Spinner 下拉選單結合縣市鄉鎮小工具

13th鐵人賽

HKT 線上教室

2021-09-22 08:05:32

2217 瀏覽

本篇文章同步發表在 HKT 線上教室部落格，線上影音教學課程已上架至 Udemy 和 Youtube 頻道。另外，想追蹤更多相關技術資訊，歡迎到臉書粉絲專頁按讚追蹤喔～

程式碼範例

範例名稱：Spinner 下拉選單結合縣市鄉鎮小工具
開發人員：HKT (侯光燦)
程式語言：Kotlin
開發環境：Android Studio 4.1.2 & Android 11 & Kotlin 1.4.30
授權範圍：使用時必須註明出處且不得為商業目的之使用
範例下載點：點我下載

今天，我們將要介紹，如何使用 Spinner 下拉選單元件，結合縣市鄉鎮資料。列表資料將根據我們當下選擇的縣市鄉鎮，從全台灣藥局資料中，透過 Kotlin 的 Collection 語法過濾顯示出我們選擇的縣市與鄉鎮區域的庫存口罩資料。

縣市、鄉鎮下拉選單與藥局詳細資訊頁的 Wireframe

畫面佈局加入兩個 Spinner

在 activity_main.xml 加入兩個 Spinner，第一個 Spinner 用途為選擇縣市選單，另一個 Spinner 會根據前面選擇的縣市，呈現對應所屬的鄉鎮選單。

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/layout_spinner"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    app:layout_constraintBottom_toTopOf="@+id/recycler_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Spinner
        android:id="@+id/spinner_county"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/spinnerTown"
        app:layout_constraintTop_toTopOf="parent" />

    <Spinner
        android:id="@+id/spinner_town"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/spinner_county"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Spinner 資料來源與連動設定

在 MainActivity.kt 加入兩個 Spinner 資料來源與監聽選擇處理事件

private fun initView() {
        val adapterCounty = ArrayAdapter(
            this,
            android.R.layout.simple_spinner_dropdown_item,
            CountyUtil.getAllCountiesName()
        )
        binding.spinnerCounty.adapter = adapterCounty
        
        //監聽「縣市」下拉選單選擇
        binding.spinnerCounty.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>?,
                view: View?,
                position: Int,
                id: Long
            ) {
                currentCounty = binding.spinnerCounty.selectedItem.toString()
                setSpinnerTown()
            }

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

            }
        }

        //監聽「鄉鎮」下拉選單選擇
        binding.spinnerTown.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>?,
                view: View?,
                position: Int,
                id: Long
            ) {
                currentTown = binding.spinnerTown.selectedItem.toString()
                if (pharmacyInfo != null) {
                    updateRecyclerView()
                }
            }

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

            }
        }

        //設定初始預設縣市、鄉鎮資料
        setDefaultCountyWithTown()
        
        ...
        ...
        ...
}

設定縣市連動鄉鎮選單

在 MainActivity.kt 加入縣市連動鄉鎮選單

  private fun setSpinnerTown() {
        val adapterTown = ArrayAdapter(
            this,
            android.R.layout.simple_spinner_dropdown_item,
            CountyUtil.getTownsByCountyName(currentCounty)
        )
        binding.spinnerTown.adapter = adapterTown
        binding.spinnerTown.setSelection(CountyUtil.getTownIndexByName(currentCounty, currentTown))
    }

預設縣市鄉鎮選單

在 MainActivity.kt 加入預設縣市鄉鎮選單

//預設名稱
private var currentCounty: String = "臺東縣"
private var currentTown: String = "池上鄉"
...
...    
...    
private fun setDefaultCountyWithTown() {
   binding.spinnerCounty.setSelection(CountyUtil.getCountyIndexByName(currentCounty))
   setSpinnerTown()
}

擴充縣市鄉鎮小工具

因為想要讓 Spinner 選單，可以有初值縣市鄉鎮設定，所以在 CountyUtil.kt 加入獲取索引值的方法

    /**
     * 獲取縣市索引值
     * @return 返回縣市索引值
     */
    fun getCountyIndexByName(countyName:String): Int {
        return counties.indexOf(countyName)
    }

    /**
     * 獲取鄉鎮索引值
     * @return 返回鄉鎮索引值
     */
    fun getTownIndexByName(countyName:String,townName:String): Int {
        val index = counties.indexOf(countyName)
        return towns[index].indexOf(townName)
    }

更新列表資料

在 MainActivity.kt 加入根據 Spinner 縣市鄉鎮選單顯示對應列表資料

private var pharmacyInfo: PharmacyInfo? = null
...
...
...

private fun updateRecyclerView() {

    val filterData =
        pharmacyInfo?.features?.filter {
            it.properties.county == currentCounty && it.properties.town == currentTown
        }

    if (filterData != null) {
        viewAdapter.pharmacyList = filterData
    }
}