【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. 案例执行结果如下：