【Android 開發】：UI控件之 Spinner 下拉清單控件的使用

1. Spinner 知識概要

    Spinner控件用于顯示一個下拉清單，該控件在裝載資料的時候需要建立一個Adapter擴充卡對象。并在建立Adapter對象過程中指定要裝載的資料是數組或者是List對象的資料. 下面我們就來實作一個Spinner下拉清單控件這樣的案例。

    在實作這個案例之前，我們有必要來學習一下與 Spinner 相關的知識，檢視它的api文檔

android.widget.Spinner：它是一個顯示子選項同時允許使用者點選的視圖控件。在Spinner中的這些選項都來自與這個視圖關聯的擴充卡中。

是以在這邊我們需要一個關聯Spinner視圖的擴充卡，檢視Spinner中的public void setAdapter (SpinnerAdapter adapter)方法[找不到往父類中找],如下所示圖。

繼續跟蹤SpinnerAdapter，可以發現它是一個接口，它的直接實作類有以下幾個如下圖所示

是以我們隻要建立一個類，繼承它的子類就可以了，這裡我們繼承ArrayAdapter<T>擴充卡類：它是一個基于數組的擴充卡類，檢視它的構造方法如下圖：

在案例中我們需要選擇第五種有接受一個 List<T> 泛型的對象 [說明]：擴充卡這個概念很像 MVC 模式特點，UI展現的就是表示層的概念，詳細我們在 ListView 的使用方法中已經講到了

2. 具體案例實作代碼如下：

1) 布局檔案

<?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:orientation="vertical" >

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

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
           

2) item.xml 這個檔案用來放置自定義的選項的布局

<?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="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:paddingLeft="10dp"
        android:src="@drawable/icon" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:textSize="16dp" />

</LinearLayout>
           

3) 程式主要代碼

SpinnerDemo.java

public class SpinnerDemo extends Activity {
    private Spinner spinner;
    private Spinner spinner2;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initComponent();

        List<String> list = MyAdapter.getData();
        // 第二個參數表示填充的樣式
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(SpinnerDemo.this,
                android.R.layout.simple_spinner_item, list);
        spinner.setAdapter(adapter);

        List<Map<String, Object>> listMaps = MyAdapter.getListMap();

        // 這裡面所顯示内容的布局就是菜單裡面第一個選項是一張圖檔，緊接着圖檔後面跟着就是一段文字
        SimpleAdapter simpleAdapter = new SimpleAdapter(SpinnerDemo.this, listMaps, R.layout.item,
                new String[] {
                        "ivLogo", "applicationName"
                }, new int[] {
                        R.id.imageview, R.id.textview
                });
        spinner2.setAdapter(simpleAdapter);

        // 當使用者去點選的時候，添加一個觸發事件
        spinner2.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            // 當使用者選中的時候觸發
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                // TODO Auto-generated method stub
                String appName = ((Map<String, Object>) spinner2.getItemAtPosition(position))
                        .get("applicationName").toString(); // 得到目前選中的選項的位置
                setTitle(appName);

            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                // TODO Auto-generated method stub

            }
        });
    }

    private void initComponent() {
        spinner = (Spinner) findViewById(R.id.spinner);
        spinner2 = (Spinner) findViewById(R.id.spinner2);
    }
}
           

4) 擴充卡類

我們再建立一個包：com.android.adapter

public class MyAdapter {

    public MyAdapter() {
        // TODO Auto-generated constructor stub
    }
    
    public static List<String> getData(){
        
        List<String> list = new ArrayList<String>();
        list.add("北京");
        list.add("上海");
        list.add("廣州");
        
        return list;
        
    }
    
    public static List<Map<String, Object>> getListMap(){
        
        List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
        
        Map<String, Object> map = new HashMap<String, Object>();      
        map.put("ivLogo", R.drawable.setting);
        map.put("applicationName", "設定");
        
        Map<String, Object> map2 = new HashMap<String, Object>();      
        map2.put("ivLogo", R.drawable.mms);
        map2.put("applicationName", "資訊收取");
        
        list.add(map);
        list.add(map2);
        
        return list;
        
    }

}
           

3. 程式說明

在上述程式中，我們在第二個Spinner中還用到了 SimpleAdapter 的這個類，檢視這個類的api文檔，可以知道：

android.widget.SimpleAdapter： 這是一個簡單的擴充卡，它可以映射靜态的資料到視圖中，它是在一個xml檔案中定義的，它是用一個ArrayList中嵌套一個Map形式來表示的，每一個在ArrayList中的選項都關聯着一行的資料。 從它的用法可以看出 SimpleAdapter 可以用來作為圖形文字混排的容器來使用，是以這裡我們使用這個擴充卡，可以檢視它的構造方法如下圖定義所示：

第一個參數 上下文對象 第二個參數 需要填充的資料類型，采用的格式是 List<? extends Map<String, ?>> 資料類型 第三個參數 是要加載在xml檔案需要顯示的資料 第四個參數 作為ArrayList<Map<？，？>>中顯示是标題 第五個參數 标題對應的R檔案

5. 案例執行結果如下：