android Spinner控件详解

2021-12-07 14:04 Android开发

这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！Spinner提供了从一个数据集合中快速选择一项值的办法。默认情况下Spinner显示的是当前选择的值，点击Spinner会弹出一个包含所有可选值的dropdown菜单，从该菜单中可以为Spinner选择一个新值。<img src="/up_pic/201812/211023027319.png" title="211023027319.png" alt="1.png"/>上图显示的是Spinner常见的样式。这篇文章中我将讨论1.Spinner的基本用法 2.设置Spinner的Adapter (arrayadapter 和自定义BaseAdapter)3.Spinner的菜单显示方式 4.Spinner的xml属性<h2 >最简单的Spinner</h2>在布局文件中添加Spinner控件<pre class="brush:xml;toolbar:false"><LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Spinner android:id="@+id/spinner1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:entries="@array/languages" /> </LinearLayout></pre>其中android:entries="@array/languages"表示Spinner的数据集合是从资源数组languages中获取的，languages数组资源定义在values/arrays.xml中：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" ><?xmlversion="1.0"encoding="utf-8"?><resources><string-arrayname="languages"><item>c语言</item><item>java</item><item>php</item><item>xml</item><item>html</item></string-array></resources></pre> 如果你不需要对Spinner的选择事件做响应，那么一个完整的Spinner使用流程就结束了。运行结果：<img src="/up_pic/201812/211025258763.jpg" title="211025258763.jpg" alt="1.jpg"/> 当然，一般情况下我们是需要响应Spinner选择事件的,可以通过OnItemSelectedListener的回调方法实现<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >publicclassMainActivityextendsActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Spinnerspinner=(Spinner)findViewById(R.id.spinner1);spinner.setOnItemSelectedListener(newOnItemSelectedListener(){@OverridepublicvoidonItemSelected(AdapterView<?>parent,Viewview,intpos,longid){String[]languages=getResources().getStringArray(R.array.languages);Toast.makeText(MainActivity.this,"你点击的是:"+languages[pos],2000).show();}@OverridepublicvoidonNothingSelected(AdapterView<?>parent){//Anotherinterfacecallback}});}}</pre>上面的Spinner看起来非常漂亮，不过它并不是总是如此，刚刚看到的是在android:Theme.Holo.Light主题下的效果，同样的代码如果在android:Theme.Light下面就会变得很丑。 <img src="/up_pic/201812/211025409890.jpg" title="211025409890.jpg" alt="2.jpg"/><img src="/up_pic/201812/211025441186.jpg" title="211025441186.jpg" alt="3.jpg"/> 想必这也是很多人不想使用Spinner的原因了吧。如果想兼容2.3，则只能忍受这样的效果。<h2 >设置Spinner的Adapter</h2>上面使用Spinner数据源于xml数组，其实用的最多的还是通过adapter来跟Spinner绑定数据。<h3 >使用ArrayAdapter</h3><pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >//初始化控件Spinnerspinner=(Spinner)findViewById(R.id.spinner1);//建立数据源String[]mItems=getResources().getStringArray(R.array.languages);//建立Adapter并且绑定数据源ArrayAdapter<String>adapter=newArrayAdapter<String>(this,android.R.layout.simple_spinner_item,mItems);adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);//绑定Adapter到控件spinner.setAdapter(adapter);spinner.setOnItemSelectedListener(newOnItemSelectedListener(){@OverridepublicvoidonItemSelected(AdapterView<?>parent,Viewview,intpos,longid){String[]languages=getResources().getStringArray(R.array.languages);Toast.makeText(MainActivity.this,"你点击的是:"+languages[pos],2000).show();}@OverridepublicvoidonNothingSelected(AdapterView<?>parent){//Anotherinterfacecallback}});</pre>这是Spinner的标准使用方法，其中，有两行代码可以决定Spinner的外观：1 <pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >ArrayAdapter<String>adapter=newArrayAdapter<String>(this,android.R.layout.simple_spinner_item,mItems);</pre>第二个参数是Spinner未展开菜单时Spinner的默认样式，android.R.layout.simple_spinner_item是系统自带的内置布局。2 <pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);</pre>设置的是展开的时候下拉菜单的样式（注意和上面区别），同理android.R.layout.simple_spinner_dropdown_item也是内置布局。如果不设置adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)会怎样呢？会造成未展开的sipnner和展开的菜单都是一种布局样式。下面一运行截图来说明：没有adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)：<img src="/up_pic/201812/211026037639.jpg" title="211026037639.jpg" alt="4.jpg"/>有setDropDownViewResource：<img src="/up_pic/201812/211026076195.jpg" title="211026076195.jpg" alt="5.jpg"/>你可能会很好奇如果设置了setDropDownViewResource但是setDropDownViewResource的参数和ArrayAdapter的第二个布局参数（simple_spinner_item）一致的情况下会怎样。情况是和没有setDropDownViewResource是一样的，因为上面说了不设置setDropDownViewResource Spinner未展开和展开都是用的一样的布局。其实simple_spinner_item和simple_spinner_dropdown_item两者的名字正好反映了他们的区别。一个应用于下拉一个应用于Spinner本身。 <h3 >使用自定义的BaseAdapter</h3>这种情况适用于spinner比较复杂的情况，比如带有图标。下面我们定义一个选择联系人的Spinner。<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="80dip"android:orientation="vertical"><Spinnerandroid:id="@+id/spinner2"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout></pre>activity中：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >//初始化控件Spinnerspinner2=(Spinner)findViewById(R.id.spinner2);//建立数据源List<Person>persons=newArrayList<Person>();persons.add(newPerson("张三","上海"));persons.add(newPerson("李四","上海"));persons.add(newPerson("王五","北京"));persons.add(newPerson("赵六","广州"));//建立Adapter绑定数据源MyAdapter_MyAdapter=newMyAdapter(this,persons);//绑定Adapterspinner2.setAdapter(_MyAdapter);</pre>Person.java<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >packagecom.example.spinnerdemo;publicclassPerson{privateStringpersonName;privateStringpersonAddress;publicPerson(StringpersonName,StringpersonAddress){super();this.personName=personName;this.personAddress=personAddress;}publicStringgetPersonName(){returnpersonName;}publicvoidsetPersonName(StringpersonName){this.personName=personName;}publicStringgetPersonAddress(){returnpersonAddress;}publicvoidsetPersonAddress(StringpersonAddress){this.personAddress=personAddress;}}</pre>MyAdapter.java<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >packagecom.example.spinnerdemo;importjava.util.List;importandroid.content.Context;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.BaseAdapter;importandroid.widget.ImageView;importandroid.widget.TextView;/***自定义适配器类*@authorjiangqq<ahref=http://blog.csdn.net/jiangqq781931404></a>**/publicclassMyAdapterextendsBaseAdapter{privateList<Person>mList;privateContextmContext;publicMyAdapter(ContextpContext,List<Person>pList){this.mContext=pContext;this.mList=pList;}@OverridepublicintgetCount(){returnmList.size();}@OverridepublicObjectgetItem(intposition){returnmList.get(position);}@OverridepubliclonggetItemId(intposition){returnposition;}/***下面是重要代码*/@OverridepublicViewgetView(intposition,ViewconvertView,ViewGroupparent){LayoutInflater_LayoutInflater=LayoutInflater.from(mContext);convertView=_LayoutInflater.inflate(R.layout.item_custom,null);if(convertView!=null){ImageViewimageView=(ImageView)convertView.findViewById(R.id.image);imageView.setImageResource(R.drawable.ic_launcher);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());}returnconvertView;}}</pre>运行效果： <img src="/up_pic/201812/211026241164.png" title="211026241164.png" alt="1.png"/> <h2 >Spinner的菜单显示方式</h2>它有两种显示形式，一种是下拉菜单，一种是弹出框，菜单显示形式是spinnerMode属性决定的：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >android:spinnerMode="dropdown"android:spinnerMode="dialog"</pre>在android2.3上没有这个属性，系统默认将Spinner弹出菜单显示成dialog。下面是Theme.Light和Theme.Holo.Light下Spinner在不同模式下的效果对比图。<table width="890"><tbody ><tr class="firstRow" ><td valign="top" width="526" > </td><td valign="top" width="526" >dropdown</td><td valign="top" width="526" >dialog</td></tr><tr ><td valign="top" width="526" >Theme.Light默认为弹出框的形式</td><td valign="top" width="526" ><img src="/up_pic/201812/211026433076.jpg" title="211026433076.jpg" alt="1.jpg"/></td><td valign="top" width="526" > <img src="/up_pic/201812/211026472761.jpg" title="211026472761.jpg" alt="2.jpg"/></td></tr><tr ><td valign="top" width="526" >Theme.Holo.Light 默认为下拉菜单的形式 </td><td valign="top" width="526" > <img src="/up_pic/201812/211026509810.jpg" title="211026509810.jpg" alt="3.jpg"/></td><td valign="top" width="526" ><img src="/up_pic/201812/211026547551.jpg" title="211026547551.jpg" alt="4.jpg"/></td></tr></tbody></table> <h2 >Spinner的xml属性</h2>其实上面已经提到了Spinner的两个属性：1 entries: 直接在xml布局文件中绑定数据源（可以不设置，即可以在Activity中动态绑定）2 spinnerMode: Spinner的显示形式除此之外还有如下属性：prompt：在Spinner弹出选择对话框的时候对话框的标题：<img src="/up_pic/201812/211027188270.jpg" title="211027188270.jpg" alt="1.jpg"/> 属性名称android:dropDownHorizontalOffset对应方法： <pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >setDropDownHorizontalOffset(int)</pre>spinnerMode=”dropdown”时，下拉的项目选择窗口在水平方向相对于Spinner窗口的偏移量。它必须是一个带有单位的浮点型尺寸值，如：”14.5sp”。有效的单位包括：px(像素)、dp(密度无关的像素)、sp(基于引用字体的尺寸来缩放的像素)、in(英寸)、mm(毫米)。这个属性还可以引用一个资源(格式：@[package:]type:name）或者是包含这种类型值的主题属性（格式：?[package][type:]name）。这个属性对应全局属性资源符号dropDownHorizontalOffset。android:dropDownSelector用于设定spinnerMode=”dropdown”时列表选择器的显示效果。它可以用”@[+][package]:type:name”格式来引用另外的资源，或者是用”?[package:][type:]name”的格式来应用主题属性，还可以是”#rgb”、”#argb”、”#rrggbb”、”aarrggbb”格式的颜色值。它对应的全局属性资源符号是dropDownSelector。android:dropDownVerticalOffset对应方法：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >setDropDownVerticalOffset(int)</pre>spinnerMode=”dropdown”时，下拉的项目选择窗口在垂直方向相对于Spinner窗口的偏移量。这个属性它必须是一个带有单位的浮点型尺寸值，如：”14.5sp”。有效的单位包括：px(像素)、dp(密度无关的像素)、sp(基于引用字体的尺寸来缩放的像素)、in(英寸)、mm(毫米)。还可以引用一个资源(格式：@[package:]type:name）或者是包含这种类型值的主题属性（格式：?[package][type:]name）。这个属性对应全局属性资源符号dropDownVerticalOffset。android:dropDownWidth对应方法：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >setDropDownWidth(int)</pre>在spinnerMode=”dropdown”时，设定下拉框的宽度。这个属性可以是带有单位的浮点型的尺寸值，如：14.5sp。有效的单位包括：px(像素)、dp(密度无关的像素)、sp(基于引用字体的尺寸来缩放的像素)、in(英寸)、mm(毫米)。还可以引用一个资源(格式：@[package:]type:name）或者是包含这种类型值的主题属性（格式：?[package][type:]name）。还可以是下列常量之一：fill_parent = -1，下拉框的宽度应该使用屏幕的宽度来设定。这个常量从API Level 8开始被废弃了，并且使用mach_parent常量来代替。mach_parent = -1，下拉框的宽度应该使用屏幕的宽度来设定。在API Level 8中被引入。wrap_content = -2，下拉框的宽度应该跟它的内容相适应。它对应的全局资源符号是dropDownWidth。android:gravity对应方法：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >setGravity(int)</pre>这个属性用于设置当前选择的项目的对齐方式。它必须是以下常量值之一或组合（用”|”符号分离）。top = 0x30：把选择的对象放到它的容器的顶部，不改变它的尺寸。bottom = 0x50：把选择的对象放到它的容器的底部，不改变它的尺寸。left = 0x03：把选择的对象放到它的容器的左边，不改变它的尺寸。right = 0x05：把选择的对象放到它的容器的右边，不改变它的尺寸。center_vertical = 0x10：把选择的对象放到它的容器的垂直中心，不改变它的尺寸。fill_vertical = 0x70：为了完全的填充它的容器，系统会根据需要来增加选择对象的垂直尺寸。center_horizontal = 0x01：把选择的对象放到它的容器的水平中心，不改变它的尺寸。fill_horizontal = 0x07：为了完全的填充它的容器，系统会根据需要来增加选择对象的水平尺寸。center = 0x11：把选择的对象放到它的容器的垂直和水平中心，不改变它的尺寸。fill = 0x77：为了完全的填充它的容器，系统会根据需要来增加选择对象的水平和垂直尺寸。clip_vertical = 0x80：附加的可选设置，它可以设置容器内子对象的上下边缘裁剪它的容器边框。裁剪会基于垂直对齐的方式：顶部对齐的会裁剪底部边缘，底部对齐的会裁剪顶部边缘，不会上下边缘都裁剪。clip_horizontal = 0x08：附加的可选设置，它可以设置容器内子对象的左右边缘裁剪它的容器边框。裁剪会基于水平对齐的方式：左对齐的会裁剪右边缘，右对齐的会裁剪左边缘，不会左右边缘都裁剪。start = 0x00800003：把对象放到它的容器的开始位置，不改变它的尺寸。end = 0x00800005：把对象放到它的容器的结束位置，不改变它的尺寸。对应的全局属性资源符号是gravity。注：Spinner对象是一个视窗对象容器，设置它的gravity属性时，只会改变容器内部子视窗对象的对齐方式，并不会改变子视窗内部内容的对齐方式。android:popupBackground对应方法：<pre class="brush:js;toolbar:false prettyprint linenums prettyprinted" >setPopupBackgroundResource(int)</pre>在spinner=”dropdown”时，使用这个属性来设置下拉列表的背景。可以使用”@[+][package:]type:name”格式来引用另外的资源，或者使用”?[package:][type:]name”格式来应用主题属性，也可以使用”#rgb”、”#argb”、”#rrggbb”、”#aarrggbb”格式的颜色值。对应的全局属性资源符号是popupBackground