[Android Studio]下拉式選單(Spinner)筆記一(基本概念)

[Android Studio]下拉式選單(Spinner)筆記一(基本概念)

下拉式選單Spinner元件是在一組設定好的資料選項，提供標準的下拉式選單介面，供使用者選擇1個選項。有2種顯示模式，1種是dropdown(下拉式)；另一種是dialog(對話式)，預設是dropdown，筆記一使用預設的dropdown。(dialog請參考[Android Studio]下拉式選單(Spinner)筆記二-dialog模式@ KOEI的旅行)

Spinner主要有下列三個類別:

1.Spinner
2.SpinnerAdapter:Adapter(適配器)是View與資料間的橋樑，Spinner通常採用ArrayAdapter，將陣列(Array)資料依指定的layout顯示出來。SpinnerAdapter定義2個view,一個是Spinner本身的view(選取選項後的樣式)；另一個是點Spinner後，選單清單的樣式。
3.AdapterView.OnItemSelectedListener:設定選取選單後的動作。

將這三個類別設定完成，就能完成整個Spinner操作。

資料參考:Android Developers > Docs > Guides > Spinners

新增Spinner，並顯示選取的選項，步驟如下:

步驟1:新增Spinner

先在Android Studio新增project(點選[File>New>New Project)，種類選擇[Empty Activity]，完成新增project(預設為顯示"Hello World!")。

新增Spinner: 在activity_main.xml 選擇以[Design]顯示，Palette點選[Containers]，再點選[Spinner]，按滑鼠右鍵，點選[Add to Design]，完成新增(預設id為spinner)。

為方便使用TextView，把TextView的id設為"hello"，在activity_main.xml的<TextView加入android:id="@+id/hello"，修改後activity_main.xml內容如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

步驟2:設定資料選項

編輯src/main/res/values/strings.xml，設定Spinner的資料選項，範例是新增行星名稱。

編輯後strings.xml如下

<resources>
    <string name="app_name">My Application</string>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>

步驟3:設定SpinnerAdapter

使用上述的"planets_array" (string array) 產生ArrayAdapter，並設定到新增的Spinner，程式如下:

1.指定要操作的Spinner ID
Spinner spinner = (Spinner) findViewById(R.id.spinner);

2.產生ArrayAdapter，設定資料選項string array及預設spinner的layout
ArrayAdapter<CharSequence> adapter =
ArrayAdapter.createFromResource(this, //對應的Context
R.array.planets_array, //資料選項內容
android.R.layout.simple_spinner_item); //預設Spinner未展開時的View(預設及選取後樣式)

3.指定Spinner展開時，選項清單樣式，如果與未展開時樣式一樣可以不設定
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

4.設定好的ArrayAdapter，指定給要操作spinner
spinner.setAdapter(adapter);

預設是第1個選項(index為0)，可使用setSelection()設定選取的選項index，後面的範例會使用。

步驟4:設定AdapterView.OnItemSelectedListener

指定setOnItemSelectedListener給要操作spinner
spinner.setOnItemSelectedListener(spnOnItemSelected);

設定Spinner選擇後的動作
private AdapterView.OnItemSelectedListener spnOnItemSelected
= new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
// 選項有選取時的動作
}

public void onNothingSelected(AdapterView<?> parent) {
// 沒有選取時的動作
}
}

選項被選取選取後，取得position (position的Index從0開始)。使用getItemAtPosition(position)或getSelectedItem()取得被選取的選項內容。

執行後選項內容:

如要將預設選項設為第3項Earth(index為2)，設定spinner.setSelection(2, false)。

選擇第4項Mars，顯示position(index為3)及內容。

完整MainActivity.java

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView tvhello;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Spinner spinner = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<CharSequence> adapter = 
           ArrayAdapter.createFromResource(this,
                R.array.planets_array,
                android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);
        spinner.setSelection(2, false);
        spinner.setOnItemSelectedListener(spnOnItemSelected);
        tvhello= (TextView) findViewById(R.id.hello);
        tvhello.setText("選項:"+spinner.getSelectedItem().toString());
    }

    private AdapterView.OnItemSelectedListener spnOnItemSelected
            = new AdapterView.OnItemSelectedListener() {
        public void onItemSelected(AdapterView<?> parent, View view,
                                   int pos, long id) {
            String sPos=String.valueOf(pos);
            String sInfo=parent.getItemAtPosition(pos).toString();
            //String sInfo=parent.getSelectedItem().toString();
            tvhello.setText("選項"+sPos+":"+sInfo);
        }
        public void onNothingSelected(AdapterView<?> parent) {
            //
        }
    };
}