030 Android 第三方開源下拉框：NiceSpinner的使用+自定義Button樣式+shape繪制控件背景圖+圖檔選擇器(selector)

1.NiceSpinner下拉框控件介紹

Android原生的下拉框Spinner基本上可以滿足Android開發對于下拉選項的設計需求，但現在越來越流行的下拉框不滿足于Android原生提供的下拉框Spinner所提供的設計樣式，而改用自定制或者第三方設計的下拉框Spinner。NiceSpinner是一個第三方開源的下拉框Spinner。

2.使用步驟

(1)build.gradle(project)中一段代碼替換為如下内容：(android studio工程的标配)

buildscript {
    
    repositories {
        google()
        maven{url \'http://maven.aliyun.com/nexus/content/groups/public/\'}
        maven { url "https://jitpack.io" }
    }
    dependencies {
        classpath \'com.android.tools.build:gradle:3.2.0\'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven{url \'http://maven.aliyun.com/nexus/content/groups/public/\'}
        google()
        maven { url "https://jitpack.io" }
    }
}      

(2)build.gradle(app)中添加依賴

dependencies {
    implementation \'com.github.arcadefire:nice-spinner:1.4\'
}      

3.NiceSpinner下拉框控件的屬性分析

You can add attributes to customize the view. Available attributes:

使用者可以在xml檔案布局中添加以下表格中的屬性到NiceSpinner控件中，對NiceSpinner進行設定。

arrowTint	color	設定下拉箭頭上的顔色
hideArrow	boolean	設定是顯示還是隐藏下拉箭頭
arrowDrawable	reference	set the drawable of the drop-down arrow
textTint	color	設定文本顔色
dropDownListPaddingBottom	dimension	設定下拉清單的底部填充(即設定下拉框控件的高度)

4.使用案例

(1)xml檔案頁面布局

<1>主界面頁面布局檔案：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <!--app:arrowTint="@color/red" 設定下拉箭頭的顔色-->
    <!--android:backgroundTint="@color/gray" 設定下拉框整體的顔色-->
    <!--app:textTint="@color/blue" 設定下拉框字型的顔色-->
    <!--android:backgroundTint="@color/pink" 設定整個空間的背景顔色-->
    <org.angmarch.views.NiceSpinner
        android:id="@+id/nice_spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:arrowTint="@color/red"
        app:textTint="@color/blue"
        android:layout_margin="16dp"/>

    <Button
        android:id="@+id/bt_getvalue"
        android:text="擷取選中值"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>      

<2>shape繪制NiceSpinner控件的背景圖

平常在開發當中，通常會遇到這樣的情況，就是會給控件增加一個背景，比如button，textview等！可以說shape就是一個形狀定義工具。是xml繪圖當中非常重要的一個工具。

使用shape一般是用來定義形狀的，可以在xml上繪圖，意思就是shape的表現形式就是一個xml檔案，這個xml檔案一般是放在drawable檔案目錄下，然後可以直接引用作為控件的背景。

shape_nicespinner.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- view背景色 -->
    <solid android:color="#52a2e2" />
    <!-- 邊框顔色 寬度 -->
    <stroke
        android:width="1dip"
        android:color="#52a2e2" />
    <!-- 邊框圓角 -->
    <corners
        android:bottomRightRadius="6dp"
        android:topRightRadius="6dp"
        android:bottomLeftRadius="6dp"
        android:topLeftRadius="6dp"/>
</shape>      

shape_button_bg_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- view背景色 -->
    <solid android:color="@color/pink" />
    <!-- 邊框顔色 寬度 -->
    <stroke
        android:width="1dip"
        android:color="@color/pink" />
    <!-- 邊框圓角 -->
    <corners
        android:bottomRightRadius="15dp"
        android:topRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"/>
</shape>      

shape_button_bg_press.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- view背景色 -->
    <solid android:color="@color/blue" />
    <!-- 邊框顔色 寬度 -->
    <stroke
        android:width="1dip"
        android:color="@color/blue" />
    <!-- 邊框圓角 -->
    <corners
        android:bottomRightRadius="15dp"
        android:topRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"/>
</shape>      

<3>圖檔選擇器selector應用

selector_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--選中用藍色的圖-->
    <item android:state_pressed="true" android:drawable="@drawable/shape_button_bg_press"></item>
    <!--未選中用粉色的圖-->
    <item android:drawable="@drawable/shape_button_bg_normal"></item>
</selector>      

(2)java背景

package com.example.administrator.test64nicespinner;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import org.angmarch.views.NiceSpinner;

import java.util.Arrays;
import java.util.LinkedList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    Button bt_getvalue;
    NiceSpinner niceSpinner;

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

    private void initUI() {
        bt_getvalue = findViewById(R.id.bt_getvalue);
        bt_getvalue.setBackgroundResource(R.drawable.selector_button); //給button設定自定義樣式
        bt_getvalue.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),niceSpinner.getText(),Toast.LENGTH_SHORT).show();
            }
        });
        niceSpinner = findViewById(R.id.nice_spinner);
        List<String> dataset = new LinkedList<>(Arrays.asList("One", "Two", "Three", "Four", "Five"));
        niceSpinner.attachDataSource(dataset); //設定下拉框要顯示的資料集合
        niceSpinner.setBackgroundResource(R.drawable.shape_nicespinner); //設定控件的形狀和背景
    }
}      

5.效果圖