Android學習——Spinner實現下拉列表

一、Spinner簡介

　　在Web開發中，HTML提供了下拉列表的實現，就是使用<select>元素實現一個下拉列表，在其中每個下拉列表項使用<option>表示即可。這是在Web開發中一個必不可少的交互性組件，而在Android中的對應實現就是Spinner。

　　在編碼的同時，首先需要在布局中設定Spinner組件，然后將可選內容通過ArrayAdapter和下拉列表連接起來，最后要獲得用戶選擇的選項，我們需要設計事件監聽器setOnItemSelectedListener並實現onItemSelected，從而獲得用戶所選擇的內容，最后通過setVisibility方法設置當前的顯示項

二、使用方法

1、以資源方式，靜態展示 Spinner 選項：

　布局文件：

<Spinner 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/spinner2"
    android:entries="@array/spingarr"
    />

　　數據文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="spingarr">
     <item>北京</item>  
    <item>上海</item>  
    <item>廣州</item>  
    <item>深圳</item>  
    </string-array>
</resources>

　　效果圖：

　　【注意】在<Spinner>標簽中，通過android:prompt來設置彈出選擇框的標題，通過android:entries來設置默認的列表選項，可以直接在xml布局文件中綁定數據源（也可以不在xml布局文件中設置，而在Activity中動態綁定）

 

2、以代碼方式，動態展示 Spinner 選項（用適配器給Spinner添加數據）

　　布局文件：

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

　　自定數據源：

package com.example.testspanner;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;


public class MainActivity extends Activity {
private Spinner spinner;
private List<String> data_list;
private ArrayAdapter<String> arr_adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.spinner);
        spinner = (Spinner) findViewById(R.id.spinner);
    
        //數據
        data_list = new ArrayList<String>();
        data_list.add("北京");
        data_list.add("上海");
        data_list.add("廣州");
        data_list.add("深圳");
        
        //適配器
        arr_adapter= new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, data_list);
        //設置樣式
        arr_adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //加載適配器
        spinner.setAdapter(arr_adapter);
        
    }

}

 

3、使用ArrayAdapter進行適配數據:

   ①:首先定義一個布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      />
</LinearLayout>

         ②:建立數據源，使用數組,這些數據將會在Spinner下來列表中進行顯示:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="spinnername">
        <item>北京</item>
        <item>上海 </item>
        <item>廣州</item>
        <item>深圳</item>
    </string-array>
</resources>

  ③:接着在Activity中加入如下的代碼(使用了系統定義的下拉列表的布局文件，當然也可以自定義)

// 初始化控件
mSpinner = (Spinner) findViewById(R.id.spinner1);
// 建立數據源
String[] mItems = getResources().getStringArray(R.array.spinnername);
// 建立Adapter並且綁定數據源
ArrayAdapter<String> _Adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, mItems);
//綁定 Adapter到控件
mSpinner.setAdapter(_Adapter);

　　下面是關於Spinner的點擊事件(效果圖如下圖):

mSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> parent, View view,
            int position, long id) {
        String str=parent.getItemAtPosition(position).toString();
        Toast.makeText(SpinnerActivity.this, "你點擊的是:"+str, 2000).show();
    }
    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // TODO Auto-generated method stub
    }
});

 

4、使用自定義的Adapter(重點)

　　 ①:定義每一個Item的布局文件

<?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="horizontal" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_launcher"
        android:paddingRight="8dip"
        android:paddingTop="8dip"
        android:text="TextView"
        android:textSize="25sp" />
 
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="8dip"
        android:paddingTop="8dip"
        android:text="TextView"
        android:textSize="25sp" />
 
</LinearLayout>

　　②:建立Person類：

package com.jiangqq.csdn;
public class Person {
    private String personName;
    private String personAddress;
    public Person(String personName, String personAddress) {
        super();
        this.personName = personName;
        this.personAddress = personAddress;
    }
    public String getPersonName() {
        return personName;
    }
    public void setPersonName(String personName) {
        this.personName = personName;
    }
    public String getPersonAddress() {
        return personAddress;
    }
    public void setPersonAddress(String personAddress) {
        this.personAddress = personAddress;
    }
 
}

     ③:創建MyAdapter繼承與BaseAdapter,進行適配:

package com.jiangqq.csdn;
 
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
 
/**
 * 自定義適配器類
 * @author jiangqq  <a href=http://blog.csdn.net/jiangqq781931404></a>
 *
 */
public class MyAdapter extends BaseAdapter {
    private List<Person> mList;
    private Context mContext;
 
    public MyAdapter(Context pContext, List<Person> pList) {
        this.mContext = pContext;
        this.mList = pList;
    }
 
    @Override
    public int getCount() {
        return mList.size();
    }
 
    @Override
    public Object getItem(int position) {
        return mList.get(position);
    }
 
    @Override
    public long getItemId(int position) {
        return position;
    }
    /**
     * 下面是重要代碼
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater _LayoutInflater=LayoutInflater.from(mContext);
        convertView=_LayoutInflater.inflate(R.layout.item, null);
        if(convertView!=null)
        {
            TextView _TextView1=(TextView)convertView.findViewById(R.id.textView1);
            TextView _TextView2=(TextView)convertView.findViewById(R.id.textView2);
            _TextView1.setText(mList.get(position).getPersonName());
            _TextView2.setText(mList.get(position).getPersonAddress());
        }
        return convertView;
    }
}
 

　　④:在Activity中加入如下代碼: 

 // 初始化控件
mSpinner = (Spinner) findViewById(R.id.spinner1);
// 建立數據源
List<Person>  persons=new ArrayList<Person>();
persons.add(new Person("張三", "上海 "));
persons.add(new Person("李四", "上海 "));
persons.add(new Person("王五", "北京" ));
persons.add(new Person("趙六", "廣州 "));
//  建立Adapter綁定數據源
MyAdapter _MyAdapter=new MyAdapter(this, persons);
//綁定Adapter
mSpinner.setAdapter(_MyAdapter);

運行效果如下截圖:

  

　　監聽事件和第一種方法相同

 

5、示例代碼：

使用數組作為數據源

　　(1).新建一個android的工程
　　(2).工程的layout.xml文件如下：聲明一個TextView控件和一個Spinner控件 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  >
  <TextView android:id="@+id/spinnerText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"></TextView>
  <Spinner android:id="@+id/Spinner01"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"></Spinner>
</LinearLayout>

　　(3)、java代碼

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.Spinner;
import android.widget.TextView;
 
public class SpinnerActivity extends Activity {
     
    private static final String[] m={"A型","B型","O型","AB型","其他"};
    private TextView view ;
    private Spinner spinner;
    private ArrayAdapter<String> adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.spinner);
         
        view = (TextView) findViewById(R.id.spinnerText);
        spinner = (Spinner) findViewById(R.id.Spinner01);
        //將可選內容與ArrayAdapter連接起來
        adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,m);
         
        //設置下拉列表的風格
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
         
        //將adapter 添加到spinner中
        spinner.setAdapter(adapter);
         
        //添加事件Spinner事件監聽  
        spinner.setOnItemSelectedListener(new SpinnerSelectedListener());
         
        //設置默認值
        spinner.setVisibility(View.VISIBLE);
         
    }
     
    //使用數組形式操作
    class SpinnerSelectedListener implements OnItemSelectedListener{
 
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            view.setText("你的血型是："+m[arg2]);
        }
 
        public void onNothingSelected(AdapterView<?> arg0) {
        }
    }
}

　　(4)、運行效果如下：

   

 

 

使用XML作為數據源

　　(1).新建一個android的工程
　　(2).在values文件夾下新建一個arryas.xml文件：聲明一個TextView控件和一個Spinner控件，代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="plantes">
        <item>NOKIA</item>
        <item>MOTO</item>
        <item>HTC</item>
        <item>LG</item>
        <item>其他</item>
    </string-array>
</resources>

　　(3).java代碼

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.Spinner;
import android.widget.TextView;
 
public class SpinnerActivity extends Activity {
     
    private TextView view2;
    private Spinner spinner2;
    private ArrayAdapter adapter2;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.spinner);
 
        spinner2 = (Spinner) findViewById(R.id.spinner02);
        view2 = (TextView) findViewById(R.id.spinnerText02);
 
        //將可選內容與ArrayAdapter連接起來
        adapter2 = ArrayAdapter.createFromResource(this, R.array.plantes, android.R.layout.simple_spinner_item);
 
        //設置下拉列表的風格 
 adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 
        //將adapter2 添加到spinner中
        spinner2.setAdapter(adapter2);
 
        //添加事件Spinner事件監聽  
        spinner2.setOnItemSelectedListener(new SpinnerXMLSelectedListener());
 
        //設置默認值
        spinner2.setVisibility(View.VISIBLE);
         
    }
     
    //使用XML形式操作
    class SpinnerXMLSelectedListener implements OnItemSelectedListener{
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            view2.setText("你使用什么樣的手機："+adapter2.getItem(arg2));
        }
 
        public void onNothingSelected(AdapterView<?> arg0) {
             
        }
         
    }
}

　　(4)、運行效果如下：
 

 

示例代碼：

public class MainActivity extends Activity {
    private Spinner spinner;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner = (Spinner) findViewById(R.id.spinner);
        textView = (TextView) findViewById(R.id.textViewId);
        // 創建一個ArrayAdapter
        // 靜態使用xml文件設置下拉列表內容
        /**
         * ArrayAdapter參數說明： 
　　　* 第一個：上下文對象 
         * 第二個：下拉菜單數據來源的id
         * 第三個：下拉菜單的樣式，這里使用了android標准下拉菜單的樣式
         */
        // ArrayAdapter<CharSequence> adapter =
        // ArrayAdapter.createFromResource(this, R.array.ThreeDays,
        // android.R.layout.simple_spinner_item);
        // 調用setDropDownViewResource()方法設置下拉列表每一個選項的樣式，這里也是用Android標准樣式
        // adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        // 動態設置下拉列表內容
        List<String> list = new ArrayList<String>();
        list.add("昨天");
        list.add("今天");
        list.add("明天");
        /**
         * 參數 
         *第一個：上下文對象 
         *第二個：自定義下拉菜單的選項的樣式
         * 第三個：自定義下拉菜單選項控件的樣式id
         * 第四個：列表數據
         */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                R.layout.list, R.id.list_textViewId, list);
        // 為spinner添加適配器
        spinner.setAdapter(adapter);
        // 設置Spinner下拉列表的標題··
        spinner.setPrompt("只有這三天");
        // 為spinner綁定監聽器
        spinner.setOnItemSelectedListener(new SpinnerListener());
    }

    // 該監聽器用於監聽用戶多spinner的操作
    class SpinnerListener implements OnItemSelectedListener {
        // 當用戶選擇先拉列表中的選項時會調用這個方法
        /**
         * 參數說明：
         * 第一個：當前的下拉列表，也就是第三個參數的父view 
         *第二個：當前選中的選項
         *第三個：所選選項的位置
         *第四個： 所選選項的id
         */
        public void onItemSelected(AdapterView<?> adapterView, View view,
                int position, long id) {
            // 獲取用戶所選的選項內容
            String selected = "您的選擇是："
                    + adapterView.getItemAtPosition(position).toString();
            textView.setText(selected);
            Toast.makeText(MainActivity.this, selected, Toast.LENGTH_SHORT)
                    .show();
        }

        // 當用戶不做選擇時調用的該方法
        public void onNothingSelected(AdapterView<?> arg0) {
            Toast.makeText(MainActivity.this, "您沒有選擇任何選項", Toast.LENGTH_SHORT)
                    .show();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}                    

示例代碼：

package cn.com;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

public class SpinnerActivity extends Activity {
    /** Called when the activity is first created. */  
    private List<String> list = new ArrayList<String>();  
    private TextView myTextView;  
    private Spinner mySpinner;  
    private ArrayAdapter<String> adapter;  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
        //第一步：添加一個下拉列表項的list，這里添加的項就是下拉列表的菜單項  
        list.add("北京");  
        list.add("上海");  
        list.add("深圳");  
        list.add("福州");  
        list.add("廈門");  
        myTextView = (TextView)findViewById(R.id.TextView_city);  
        mySpinner = (Spinner)findViewById(R.id.Spinner_city);  
        //第二步：為下拉列表定義一個適配器，這里就用到里前面定義的list。  
        adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, list);  
        //第三步：為適配器設置下拉列表下拉時的菜單樣式。  
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
        //第四步：將適配器添加到下拉列表上  
        mySpinner.setAdapter(adapter);  
        //第五步：為下拉列表設置各種事件的響應，這個事響應菜單被選中  
        mySpinner.setOnItemSelectedListener(new Spinner.OnItemSelectedListener(){  
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {  
                // TODO Auto-generated method stub  
                /* 將所選mySpinner 的值帶入myTextView 中*/  
                myTextView.setText("您選擇的是："+ adapter.getItem(arg2));  
                /* 將mySpinner 顯示*/  
                arg0.setVisibility(View.VISIBLE);  
            }  
            public void onNothingSelected(AdapterView<?> arg0) {  
                // TODO Auto-generated method stub  
                myTextView.setText("NONE");  
                arg0.setVisibility(View.VISIBLE);  
            }  
        });  
        /*下拉菜單彈出的內容選項觸屏事件處理*/  
        mySpinner.setOnTouchListener(new Spinner.OnTouchListener(){  
            public boolean onTouch(View v, MotionEvent event) {  
                // TODO Auto-generated method stub  
                /**
                 * 
                 */
                return false;  
            }
        });  
        /*下拉菜單彈出的內容選項焦點改變事件處理*/  
        mySpinner.setOnFocusChangeListener(new Spinner.OnFocusChangeListener(){  
        public void onFocusChange(View v, boolean hasFocus) {  
            // TODO Auto-generated method stub  

        }  
        });  
    }  
}

 

三、根據城市的選擇，自動顯示后邊的城區選擇

 

　　.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >


   
    <Spinner 
        android:id="@+id/ciyt"
        android:prompt="@string/city_prompt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"       
        android:entries="@array/cities"/>
    
    <Spinner 
        android:id="@+id/area"
        android:prompt="@string/city_prompt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

　　

　　.java文件

 

public class MainActivity extends Activity {
    // 城市
    private Spinner city = null;
    // 城市下邊的子成區
    private Spinner area = null;
    private String[][] areaData = new String[][] { { "東城", "西城", "海淀", "上地" },
            { "陸家嘴", "黃埔", "金融街" }, { "寶安區", "深圳區", "中山區" } };
    private ArrayAdapter<CharSequence> adapterArea = null;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.city = (Spinner) super.findViewById(R.id.ciyt);
        this.area = (Spinner) super.findViewById(R.id.area);
        this.city.setOnItemSelectedListener(new OnItemSelectedListenerImp());
    }

    private class OnItemSelectedListenerImp implements OnItemSelectedListener {

        public void onItemSelected(AdapterView<?> parent, View view,
                int position, long id) {
            // 得到選擇的選項
            MainActivity.this.adapterArea = new ArrayAdapter<CharSequence>(
                    MainActivity.this, android.R.layout.simple_spinner_item,
                    MainActivity.this.areaData[position]);
            MainActivity.this.adapterArea
                    .setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            MainActivity.this.area.setAdapter(MainActivity.this.adapterArea);
        }

        public void onNothingSelected(AdapterView<?> arg0) {
            // TODO Auto-generated method stub
        }
    }

}

 

　　values當中的city.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="cities">
        <item>北京</item>
        <item>上海</item>
        <item>深圳</item>
    </string-array>
</resources>

 

四、android spinner下拉樣式介紹

1、更換android.R xml樣式

以下為引用內容： 
ArrayAdapter< String> adapter = new ArrayAdapter< String>( this, android.R.layout.simple_spinner_item);

這里面的第二個參數是android.R系統自帶的xml樣式，我們更換這個時就會看到生成的spinner的直觀樣式如下：

圖1

如果換成android.R.layoutbrowser_link_context_header那么樣式變為：

圖2

同理：android.R.pinner_dropdown：

android.R.preference_category：

圖4

android.R.simple_spinner_item

圖5

android.R.select_dialog_item：

圖6

android.R.select_dialog_multichoice

圖7

android.R.select_dialog_singlechoice

圖8

android.R.simple_dropdown_item_1line

圖9

android.R.simple_expandable_list_item_1

圖10

android.R.simple_gallery_item

圖11

android.R.simple_list_item_1

圖12

android.R.simple_list_item_checked

圖13

android.R.simple_list_item_multiple_choice

圖14

android.R.simple_list_item_single_choice

圖15

android.R.simple_spinner_dropdown_item

圖16

android.R.simple_spinner_item

圖17

android.R.test_list_item

圖18

還有自定義的spinner.xml ：

以下為引用內容： 
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text1" 
android:layout_width="60px" 
android:layout_height="wrap_content"
android:singleLine="true"
style="?android:attr/spinnerItemStyle"
/>

圖19

2、下拉列表彈出樣式

更換 xml 參數

以下為引用內容： 
adapter.setDropDownViewResource(android.R.layout.test_list_item);

android.R.browser_link_context_header ：

圖20

preference_category ：

圖21

select_dialog_item：

圖22

select_dialog_multichoice：多選樣式，可惜不能多選。

圖23

select_dialog_singlechoice：

圖24

simple_dropdown_item_1line：

圖25

simple_list_item_checked：

圖26

simple_list_item_single_choice：

圖27