API Demos 2.3 学习笔记 (16)-- Views->Spinner

桃扇骨 2022-06-14 04:07 154阅读 0赞

更多精彩内容，请点击阅读：**[《API Demos 2.3 学习笔记》][API Demos 2.3]**

上一节我们讲到RadioGroup控件。大家试着想想，如果RadioGroup里面有很多选项，那是不是会占用大片区域呢？这种情况下，对于本来就不大的手机界面空间来说简直是一种浪费。这时，我们就要用到Spinner下拉列表控件了。  
下面简单介绍怎么创建和使用一个Spinner控件。

首先，在layout布局文件文件中定义一个Spinner控件。

注：  
1、android:drawSelectorOnTop="true"  
有关该属性的相关知识请参考：http://blog.csdn.net/jincf2011/article/details/6598689  
  
2、android:prompt="@string/spinner\_1\_color\_prompt"   
表示下拉列表控件Spinner上的标题文字。如下所示：“Choose a color”就是该属性定义的标题文字。

![0_13302366381mMf.gif][]

接着，定义Spinner控件的数据源数组。在value目录下创建一个arrays.xml文件。在里面定义一个数组，用作Spinner控件的数据源。格式如下：

<string-array name="colors">
            <item>red</item>
            <item>orange</item>
            <item>yellow</item>
            <item>green</item>
            <item>blue</item>
            <item>violet</item>
        </string-array>

最后，在Spinner1.java文件中实例化Spinner控件。

// 通过findViewById方法获得一个Spinner对象s1，下同
            Spinner s1 = (Spinner) findViewById(R.id.spinner1);
            
            //根据颜色数组R.array.colors创建一个数组适配器
            //第二个参数 R.array.colors 为数组适配器数据源
            //第三个参数 是下拉列表中每个数据所占据的 View 的样式 。这里采用系统默认样式 android.R.layout.simple_spinner_item 
            ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                    this, R.array.colors, android.R.layout.simple_spinner_item);
            
            //设置适配器下拉样式，这里是系统默认样式 android.R.layout.simple_spinner_dropdown_item
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            
            //将 Spinner 控件绑定适配器 adapter
            s1.setAdapter(adapter);

这样，一个Spinner控件就成功创建好了。那么这个控件怎么用呢？和按钮等大多数控件一样，Spinner控件也是通过创建一个监听器来监听用户的动作的。当用户选择其中一个选项时，便会触发响应。

//设置监听器。当用户选择其中一个选项时，触发响应。
            s1.setOnItemSelectedListener(
            		//选择其中一个选项时，触发该响应
            		//parent:装载数据的视图列表
            		//view:列表中当前选中的item视图
            		//position:选中的item在AdapterView中的索引
            		//id:选中的item视图控件的id值
                    new OnItemSelectedListener() {
                        public void onItemSelected(
                                AdapterView<?> parent, View view, int position, long id) {
                            showToast("Spinner1: position=" + position + " id=" + id);
                        }
    
                        //什么选项都没选择时，触发该响应
                        public void onNothingSelected(AdapterView<?> parent) {
                            showToast("Spinner1: unselected");
                        }
                    });

下面我们进行实例代码解析：  
res-values-arrays.xml

<?xml version="1.0" encoding="utf-8"?>
    
    <resources>
        
        <string-array name="colors">
            <item>red</item>
            <item>orange</item>
            <item>yellow</item>
            <item>green</item>
            <item>blue</item>
            <item>violet</item>
        </string-array>
        
        
        <string-array name="planets">
            <item>Mercury</item>
            <item>Venus</item>
            <item>Earth</item>
            <item>Mars</item>
            <item>Jupiter</item>
            <item>Saturn</item>
            <item>Uranus</item>
            <item>Neptune</item>
            <item>Pluto</item>
        </string-array>
        
    </resources>

res-layout-spinner\_1.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="vertical"
        android:padding="10dip" >
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/spinner_1_color" />
    
        
        
        
        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawSelectorOnTop="true"
            android:prompt="@string/spinner_1_color_prompt" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:text="@string/spinner_1_planet" />
    
        <Spinner
            android:id="@+id/spinner2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawSelectorOnTop="true"
            android:prompt="@string/spinner_1_planet_prompt" />
    
    </LinearLayout>

src-com.example.android.apis.view-Spinner1.java

package com.example.android.apis.view;
    
    /**
     * 演示如何使用下拉列表控件Spinner
     */
    import com.example.android.apis.R;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    import android.widget.Toast;
    import android.widget.AdapterView.OnItemSelectedListener;
    
    
    public class Spinner1 extends Activity {
    
        // 调用Toast控件来显示消息msg，用来提示用户
       void showToast(CharSequence msg) {
            Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
        }
        
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.spinner_1);
    
            // 通过findViewById方法获得一个Spinner对象s1，下同
            Spinner s1 = (Spinner) findViewById(R.id.spinner1);
            
            //根据颜色数组R.array.colors创建一个数组适配器
            //第二个参数 R.array.colors 为数组适配器数据源
            //第三个参数 是下拉列表中每个数据所占据的 View 的样式 。这里采用系统默认样式 android.R.layout.simple_spinner_item 
            ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                    this, R.array.colors, android.R.layout.simple_spinner_item);
            
            //设置适配器下拉样式，这里是系统默认样式 android.R.layout.simple_spinner_dropdown_item
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            
            //将 Spinner 控件绑定适配器 adapter
            s1.setAdapter(adapter);
            
            //设置监听器。当用户选择其中一个选项时，触发响应。
            s1.setOnItemSelectedListener(
            		//选择其中一个选项时，触发该响应
            		//parent:装载数据的视图列表
            		//view:列表中当前选中的item视图
            		//position:选中的item在AdapterView中的索引
            		//id:选中的item视图控件的id值
                    new OnItemSelectedListener() {
                        public void onItemSelected(
                                AdapterView<?> parent, View view, int position, long id) {
                            showToast("Spinner1: position=" + position + " id=" + id);
                        }
    
                        //什么选项都没选择时，触发该响应
                        public void onNothingSelected(AdapterView<?> parent) {
                            showToast("Spinner1: unselected");
                        }
                    });
    
            // 通过findViewById方法获得一个Spinner对象s2
            Spinner s2 = (Spinner) findViewById(R.id.spinner2);
            adapter = ArrayAdapter.createFromResource(this, R.array.planets,
                    android.R.layout.simple_spinner_item);
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            s2.setAdapter(adapter);
            s2.setOnItemSelectedListener(
                    new OnItemSelectedListener() {
                        public void onItemSelected(
                                AdapterView<?> parent, View view, int position, long id) {
                            showToast("Spinner2: position=" + position + " id=" + id);
                        }
    
                        public void onNothingSelected(AdapterView<?> parent) {
                            showToast("Spinner2: unselected");
                        }
                    });
        }
    }

预览效果;

![0_1330237021ieri.gif][]           ![0_1330237028eMBN.gif][]

欢迎大家关注我的[微信][Link 1]公众号：

[微信][Link 1]公众号：sn0wdr1am

![Center][]

[API Demos 2.3]: http://blog.csdn.net/yang_hui1986527/article/details/6707156
[0_13302366381mMf.gif]: /images/20220614/4af611c6cbc248e197c5e60782ddc372.png
[0_1330237021ieri.gif]: http://hi.csdn.net/attachment/201202/26/0_1330237021ieri.gif
[0_1330237028eMBN.gif]: /images/20220614/0ee52b8fb8cd42a3af3b4474fb037a25.png
[Link 1]: http://lib.csdn.net/base/wechat
[Center]: /images/20220614/7795ea6e21bb45abbfc3b0a3db6be8ff.png