Day12-Android新手筆記-Spinner + Spinner客製化

2022 iThome 鐵人賽

DAY 12

Mobile Development

Android studio 30天新手筆記系列第 12 篇

14th鐵人賽

tsanyi0119

團隊nutc imac 老扛寶

2022-09-23 19:03:31

1135 瀏覽

分享至

spinner下拉選單，我們常在各種平台上見過，是一個不錯用的選擇工具。
本章先從基本spinner介紹：

Spinner

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/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView2"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20sp"
            android:text="選擇地區" />

        <Spinner
            android:id="@+id/spinner"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Java程式碼

package com.example.it_demo_spinner;

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 Spinner spinner;
    private TextView textView;

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

        spinner = findViewById(R.id.spinner);
        textView = findViewById(R.id.textView);

        String[] district={"中區","東區","西區","南區","北區","西屯區",
                "南屯區","北屯區","豐原區","大里區","太平區","清水區",
                "沙鹿區","大甲區","東勢區","梧棲區","烏日區","神岡區",
                "大肚區","大雅區","后里區","霧峰區","潭子區","龍井區",
                "外埔區","和平區","石岡區","大安區","新社區"};
        
        ArrayAdapter<String>districtAdapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_spinner_dropdown_item,district);
        spinner.setAdapter(districtAdapter);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                textView.setText("您已選擇："+district[i]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
    }
}

這是基本的使用方式，利用String陣列儲存資料，透過Adapter設定要顯示的資料與佈局方式。此外可以使用setOnItemSelectedListener來監聽spinner的事件，本篇利用TextView來顯示選擇結果。

接下來將介紹如何實現簡易的spinner客製化：

spinner客製化

簡易spinner客製化可分為選單與選擇完成兩個部分，首先須先建立兩個XML檔，下方的介紹由於有使用到漸層效果，所以多建立了兩個XML。
藍色漸層XML檔 spinner_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:centerColor="#6699A1"
        android:startColor="#77969A"
        android:endColor="#006284"
        android:type="linear"
        />
</shape>

粉色漸層XML檔 spinner_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:centerColor="#E87A90"
        android:startColor="#C28BC9"
        android:endColor="#DB3B87"
        android:type="linear"
        />
</shape>

建立兩個XML檔分別利用android:background="@drawable/xxx"綁定上方兩個XML

spinner_selected_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textSize="24sp"
    android:background="@drawable/spinner_selected"
    android:textColor="#FFFFFF"
    android:textStyle="bold"
    android:padding="5dp">
</TextView>

spinner_dropdown_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textSize="24dp"
    android:textColor="#FFFFFF"
    android:background="@drawable/spinner_dropdown"
    android:textStyle="bold"
    android:padding="13dp">
</TextView>

Java程式碼

在MainActivity中，透過Adapter設定客製化XML，需更改以下程式碼:

ArrayAdapter<String>districtAdapter = new ArrayAdapter<>(MainActivity.this,R.layout.spinner_selected_shape,district);
districtAdapter.setDropDownViewResource(R.layout.spinner_dropdown_shape);

完整程式碼如下:

public class MainActivity extends AppCompatActivity {
    private Spinner spinner;
    private TextView textView;

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

        spinner = findViewById(R.id.spinner);
        textView = findViewById(R.id.textView);

        String[] district={"中區","東區","西區","南區","北區","西屯區",
                "南屯區","北屯區","豐原區","大里區","太平區","清水區",
                "沙鹿區","大甲區","東勢區","梧棲區","烏日區","神岡區",
                "大肚區","大雅區","后里區","霧峰區","潭子區","龍井區",
                "外埔區","和平區","石岡區","大安區","新社區"};
        ArrayAdapter<String>districtAdapter = new ArrayAdapter<>(MainActivity.this,R.layout.spinner_selected_shape,district);
        districtAdapter.setDropDownViewResource(R.layout.spinner_dropdown_shape);
        spinner.setAdapter(districtAdapter);

        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                textView.setText("您已選擇："+district[i]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
    }
}

效果圖：