android Spinner控件详解

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