[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)。

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的資料選項,範例是新增行星名稱。

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()取得被選取的選項內容。

執行後選項內容:

spinner

 

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

spinner

 

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

spinner

 

完整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) {
            //
        }
    };
}

 

其他進階下拉式選單(Spinner)筆記請參考:[Android Studio]下拉式選單(Spinner)筆記@ KOEI的旅行

 

arrow
arrow
    文章標籤
    下拉式選單 Spinner dropdown
    全站熱搜
    創作者介紹
    創作者 KOEI 的頭像
    KOEI

    KOEI的旅行

    KOEI 發表在 痞客邦 留言(0) 人氣()