Android 中 Spinner下拉框使用

文章目錄

• 先用起來
• 方法和屬性
• 樣式
• • 增加分割線
  • 選中和下拉樣式
  • 彈出框樣式
• 使用自定義的BaseAdapter

先用起來

效果圖

布局頁面 activity_test

<?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:padding="20dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_tip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="配送方式" />

        <Spinner
            android:id="@+id/spinner"
            android:layout_width="200dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/tv_tip"
            android:background="#E5E5E5"
            android:dropDownVerticalOffset="45dp"
            android:spinnerMode="dropdown" />

        <ImageView
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:src="@mipmap/ic_triangle_down"
            android:layout_alignRight="@+id/spinner"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"/>
    </RelativeLayout>
</LinearLayout>
           

代碼

public class TestActivity extends AppCompatActivity {
    private String[] starArray = {"圓通", "申通", "郵政"};

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

    private void initSpinner() {
        //聲明一個下拉清單的數組擴充卡
        ArrayAdapter<String> starAdapter = new ArrayAdapter<String>(this, R.layout.item_select, starArray);
        //設定數組擴充卡的布局樣式
        starAdapter.setDropDownViewResource(R.layout.item_dropdown);
        //從布局檔案中擷取名叫sp_dialog的下拉框
        Spinner sp = findViewById(R.id.spinner);
        //設定下拉框的标題，不設定就沒有難看的标題了
        sp.setPrompt("請選擇配送方式");
        //設定下拉框的數組擴充卡
        sp.setAdapter(starAdapter);
        //設定下拉框預設的顯示第一項
        sp.setSelection(0);
        //給下拉框設定選擇監聽器，一旦使用者選中某一項，就觸發監聽器的onItemSelected方法
        sp.setOnItemSelectedListener(new MySelectedListener());
    }

    class MySelectedListener implements AdapterView.OnItemSelectedListener {

        @Override
        public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
            Toast.makeText(TestActivity.this, "您選擇的是：" + starArray[i], Toast.LENGTH_SHORT).show();
        }

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

        }
    }
}
           

未選中布局 item_drapdown

<?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="40dp"
    android:textColor="@android:color/black"
    android:textSize="14sp"
    android:gravity="center"/>
           

選中布局 item_select

<?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="40dp"
    android:background="#E5E5E5"
    android:textSize="14sp"
    android:gravity="center"/>
           

方法和屬性

setPrompt：設定标題文字。拉清單的展示方式有兩種，一種是在目前下拉框的正下方展示清單，此時把spinnerMode屬性設定為dropdown;另一種是在頁面中部以對話框形式展示清單，此時把SpinnerMode屬性設定為dialog，這個setPrompt方法就是在對話框時設定标題
setAdapter：設定下拉清單的擴充卡。
setSelection：設定目前選中哪項。注意該方法要在setAdapter方法之後調用。
setOnItemSelectedListener：設定下拉清單的選擇監聽器，該監聽器要實作接口OnItemSelectedListener。

android:dropDownVerticalOffset：spinnerMode=”dropdown”時，下拉的項目選擇視窗在垂直方向相對于Spinner視窗的偏移量
android:dropDownHorizontalOffset：spinnerMode=”dropdown”時，下拉的項目選擇視窗在水準方向相對于Spinner視窗的偏移量
android:dropDownSelector：用于設定spinnerMode=”dropdown”時清單選擇器的顯示效果
android:dropDownWidth：在spinnerMode=”dropdown”時，設定下拉框的寬度
android:gravity：這個屬性用于設定目前選擇的項目的對齊方式
android:popupBackground：在spinner=”dropdown”時，使用這個屬性來設定下拉清單的背景
           

如果spinner中内容是固定的，那麼使用

android:entries="@array/shipping_type"

表示Spinner的資料集合是從資源數組 shipping_type 中擷取的，shipping_type 數組資源定義在values/arrays.xml 中：

<Spinner
            android:id="@+id/spinner"
            android:layout_width="200dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/tv_tip"
            android:background="#E5E5E5"
            android:dropDownVerticalOffset="0dp"
            android:spinnerMode="dropdown"
            android:entries="@arrays/shipping_type"
            />
           

其中 shipping_type

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="shipping_type">
        <item>圓通</item>
        <item>申通</item>
        <item>郵政</item>
    </string-array>
</resources>
           

樣式

增加分割線

該分割線隻有是dropdown樣式時才會顯示

style 中增加分隔線的樣式

<style name="XSpinnerStyle" parent="android:Widget.ListView.DropDown">
        <!-- 分隔線顔色 -->
        <item name="android:divider">#E5E5E5</item>
        <item name="android:dividerHeight">1dp</item>
    </style>
           

然後在現在 Activity 目前使用的樣式中使用

選中和下拉樣式

ArrayAdapter<String> starAdapter = new ArrayAdapter<String>(this, R.layout.item_select, starArray);
starAdapter.setDropDownViewResource(R.layout.item_dropdown);
           

其中

R.layout.item_select

和

R.layout.item_dropdown

是選中和下拉的樣式。這是我們自己寫的樣式。當然也可以用預設的樣式。

android.R.layout.simple_spinner_item

：未展開菜單時Spinner的預設樣式

android.R.layout.simple_spinner_dropdown_item

：展開的時候下拉菜單的樣式

如果不設定

starAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)

出現的結果就是 下拉樣式和 為展開時的樣式一樣

彈出框樣式

在第一個栗子中，把SpinnerMode屬性設定為dialog

使用自定義的BaseAdapter

效果圖：

布局和之前的相同 activity_test

TestActivity

public class TestActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        // 初始化控件
        Spinner spinner  = findViewById(R.id.spinner);
        // 建立資料源
        List<ShippingType> shippingTypes =new ArrayList<ShippingType>();
        shippingTypes.add(new ShippingType("圓通", R.mipmap.yt));
        shippingTypes.add(new ShippingType("申通", R.mipmap.st));
        shippingTypes.add(new ShippingType("郵政", R.mipmap.yz));
        //  建立Adapter綁定資料源
        MyAdapter _MyAdapter=new MyAdapter(this, shippingTypes);
        //綁定Adapter
        spinner.setAdapter(_MyAdapter);
    }
}
           

ShippingType

public class ShippingType {
    private String shippingName;
    private int shippingIcon;

    public ShippingType(String shippingName, int shippingIcon) {
        this.shippingName = shippingName;
        this.shippingIcon = shippingIcon;
    }

    public String getShippingName() {
        return shippingName;
    }

    public void setShippingName(String shippingName) {
        this.shippingName = shippingName;
    }

    public int getShippingIcon() {
        return shippingIcon;
    }

    public void setShippingIcon(int shippingIcon) {
        this.shippingIcon = shippingIcon;
    }
}
           

item_custom

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:gravity="center">
    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@mipmap/yt"
        android:layout_marginRight="10dp"/>
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>
           

參考：

android Spinner控件詳解

Android中Spinner用法