Android筆記(20)：UI元件 Spinner 下拉選單

Photo by Mika Baumeister on Unsplash

在 Android 中提供了兩種清單類元件，一個是 Spinner 下拉式選單，用於彈出一個下拉式功能表讓用戶選擇；另一種是 ListView 列表視圖，通常用於一個視窗中只顯示一個清單使用。而由於它們又間接繼承自 AdapterView，所以它們都可以採用合適的方式顯示多個清單項。

[Spinner]

下拉選單（Spinner）通常用於提供一組預先設定好的資料選項讓用戶選擇，使用下拉的方式呈現，目的在於節省畫面空間，在屏幕上看起來較為簡潔。在 Android 的 XML 佈局檔中透過 <Spinner>標記增加下拉式選單，基本語法格式如下：

<Spinner
   android:屬性 = "值"> 
</Spinner>

Spinner 元件間接繼承自 ViewGroup，是屬於容器類元件，可以直接使用 ViewGroup 支援的屬性和方法，其他常用的屬性如下：

XML屬性	描述
entries	使用陣列資源設置下拉式清單方塊的清單專案，指定清單項目給 Spinner。
prompt	設定下拉式選單的標題。
dropDownHorizontalOffset	設定下拉清單的水準偏移距離。
dropDownVerticalOffset	設定下拉清單方塊的水準豎直距離。
dropDownSelector	下拉清單被選中時的背景。
dropDownWidth	設定下拉清單的寬度。
gravity	設定元件的對齊方式。
popupBackground	設定下拉清單的背景。
prompt	設定下拉清單的提示標題，只能夠引用 string.xml 中的資源ID，而不能直接寫字串。
spinnerMode	下拉清單的模式，有兩個可選值： dialog ：對話方塊風格的視窗， dropdown ：下拉式功能表風格的視窗(預設)。

要建立下拉選單的清單項目有兩個方法：一是定義在 res\values 目錄內的 XML 檔，XML 檔可以是已存在的 strings.xml 或新建一個自己命名的 XML 檔，然後透過字串陣列資源來為下拉選單提供選項，這個方法不需寫 java 程式。另一個方法是撰寫 java 程式，透過 Adapter 來建立清單。這裡我們先來瞭解第一種方法。

[建立陣列資源檔及取用]

在 res/values 目錄中建立一個定義陣列資源的 XML 檔 arrays.xml。先將左方的 res 目錄內，對 values 目錄按右鍵 →[New]→[Values Resource File]，如下圖：

輸入 arrays.xml 當作資源檔檔名。

在資源檔中，依格式輸入列表清單中的項目：

[程式範例]

(1)新建一個模組 Module，在 res/values 目錄下新增一個字串陣列檔，名為 arrays.xml，定義內容如下：

<resources>
    <string-array name="spinnerValue">
        <item>電視</item>
        <item>洗衣機</item>
        <item>電冰箱</item>
        <item>咖啡機</item>
        <item>冷氣</item>
        <item>電扇</item>
        <item>其他</item>
    </string-array>
</resources>

(2) 進入 res/layout 目錄下點選佈局檔 activity_main.xml。將預設的內容刪除，建立 1 個 TextView 文字框，1 個 Spinner，以下是完整 XML 的內容。

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50sp"
        android:text="請選擇適合的家電用品:"
        android:textSize="24sp" />

    <Spinner
        android:id="@+id/sp"
        android:entries="@array/spinnerValue"
        android:layout_width="200sp"
        android:layout_marginLeft="20sp"
        android:layout_marginTop="50sp"
        android:layout_height="50sp" />

</LinearLayout>

(3)在 MainActivity.java 在 onCreate() 方法內，先建立與佈局檔的物件，用 findValueById 連結 Spinner 元件，設定 setOnItemSelectedListener 監聽器，如果偵測到選項，執行 getItemAtPosition 得知目前按下的值，使用 Toast 顯示在畫面上。程式碼如下：

package com.example.myspinner;

import androidx.appcompat.app.AppCompatActivity;

import android.content.res.Resources;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

public class spinner_MainActivity extends AppCompatActivity {

    private Spinner sp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spinner_main);

        sp = (Spinner) findViewById(R.id.sp);

        // 設定 sp 元件 ItemSelected 事件的 listener
        sp.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView parent, View view, int position, long id) {
                String result = parent.getItemAtPosition(position).toString();
                Toast.makeText(spinner_MainActivity.this, result, Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView parent) {

            }
        });
    }
}

執行的結果如下：

[參考資料]

• Developer : String resources
• Developer : Spinner
• 碁峰出版社: Android 初學特訓班(第三版)