Android紫薇软剑之Spinner之北上广

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.youkuaiyun.com/leverage_1229

紫薇软剑 

        “紫薇软剑，三十岁前所用，误伤义士不祥，乃弃之深谷。”杨过心想：“这里少了一把剑，原来是给他抛弃了，不知如何误伤义士，这故事多半永远无人知晓了。

        今天我们学习如何利用Android平台“紫薇软剑”Spinner实现下拉选项列表的功能，怎么样？紫薇软剑也是可以拉的哦^_^。在实际生活中下拉选项列表出现的场合就太多了，像选择语种、省份、城市、年限、薪资、职业等，真可谓是举不胜举。下面给出该情景的案例：

1案例技术要点

(1)从数据源采集数据分别填充ArrayAdapter和SimpleAdapter。

(2)ArrayAdapter和SimpleAdapter将数据分别推向正常样式Spinner和自定义样式Spinner的对应视图进行显示。

(3)为Spinner设置点击选项监听，获取当前说选项的位置和ID。

2案例代码陈列

2.1工程包目录

2.2AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.lynn.spinner"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".SpinnerMainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2.3strings.xml

<resources>

    <string name="app_name">Android下拉列表Spinner</string>
    <string name="where">您从哪儿回来的？</string>
    <string name="what">您选择的Logo是？</string>

</resources>

2.4main.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="match_parent"
    android:orientation="vertical" >

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/where"/>
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/what"/>
    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

2.5item.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">
    
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_launcher" />
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:textSize="16sp"
        android:textColor="#000000" />

</LinearLayout>

2.6SpinnerMainActivity.java

package cn.lynn.spinner;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.SimpleAdapter;
import android.widget.Spinner;
import android.widget.Toast;

/**
 * Spinner用于显示下拉选项列表，并支持对各选项进行选择
 * Spinner案例一：标准Spinner选择城市
 * Spinner案例二：自定义Spinner选择Logo
 * @author lynnli1229
 */
public class SpinnerMainActivity extends Activity implements OnItemSelectedListener {

    // 标准样式的Spinner
    private Spinner normalSpinner;
    // 自定义样式的Spinner
    private Spinner customSpinner;

    private ArrayAdapter<String> arrAdapter;
    private SimpleAdapter simpAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        normalSpinner = (Spinner) findViewById(R.id.spinner);
        arrAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, getList());
        arrAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        normalSpinner.setAdapter(arrAdapter);
        // 设置选择下拉选项的监听
        normalSpinner.setOnItemSelectedListener(this);

        customSpinner = (Spinner) findViewById(R.id.spinner2);
        // 构造SimpleAdapter为customSpinner对象采集数据被并填充到相应的视图上
        // SimpleAdapter构造器的参数依次为：context上下文，填充数据List<? extends Map>，
        // Adapter布局文件，用于填充数据的key值，用于显示数据的控件Id
        simpAdapter = new SimpleAdapter(this, getListMap(), R.layout.item,
                            new String[] { "img", "txt" }, 
                            new int[] { R.id.imageView, R.id.textView });
        customSpinner.setAdapter(simpAdapter);
        // 设置选择下拉选项的监听
        customSpinner.setOnItemSelectedListener(this);
    }

    /**
     * 采集List<String>类型数据，用于填充ArrayAdapter
     */
    private List<String> getList() {
        List<String> list = new ArrayList<String>();
        list.add("北京");
        list.add("上海");
        list.add("广州");
        return list;
    }

    /**
     * 采集List<Map<String, Object>>类型数据，用于填充SimpleAdapter
     */
    private List<Map<String, Object>> getListMap() {
        HashMap<String, Object> map1 = new HashMap<String, Object>();
        map1.put("img", R.drawable.item1);
        map1.put("txt", "adidas");

        HashMap<String, Object> map2 = new HashMap<String, Object>();
        map2.put("img", R.drawable.item2);
        map2.put("txt", "birds");

        HashMap<String, Object> map3 = new HashMap<String, Object>();
        map3.put("img", R.drawable.item3);
        map3.put("txt", "android");

        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        list.add(map1);
        list.add(map2);
        list.add(map3);
        return list;
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        switch (parent.getId()) {
        case R.id.spinner:
            Toast.makeText(this, "selected city postion= " + position + ", id= " + id, Toast.LENGTH_LONG).show();
            break;

        case R.id.spinner2:
            Toast.makeText(this, "selected logo postion= " + position + ", id= " + id, Toast.LENGTH_LONG).show();
            break;
        }
        
    }

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

}

3案例效果展示