简介：大三学生党一枚！主攻Android开发，对于Web和后端均有了解。
个人语录：取乎其上，得乎其中，取乎其中，得乎其下，以顶级态度写好一篇的博客。

在开发过程中，经常会用到Spinner列表，比如说选择学院班级，选择省市等。如何实现联动的省市选择，本篇会给出答案。Spinner用法比较简单，但是想要用的好，还是需要对它熟悉才可以，下面一起来学习Spinner。

一.Spinner的基础知识

1.1 spinner的常用方法

Spinner的常用方法如下

//有的概念不好理解，通过图片来展示         spinner.setAdapter();//设置适配器         spinner.setDropDownHorizontalOffset(xx pixel);//用来设置下拉列表选择框的水平偏移距离           spinner.setDropDownVerticalOffset(xx pixel);//用来设置下拉列表选择框的垂直偏移距离         spinner.setDropDownWidth(xx pixel);//设置下拉列表选择框的宽度         spinner.setGravity();//设置当前选中项的定位的对齐方式         spinner.setOnItemClickListener();//设置item的点击事件         spinner.setPopupBackgroundDrawable(Drawable drawable);//设置下拉列表选择框的背景颜色         spinner.setPopupBackgroundResource(int id);         spinner.setPrompt(String str);//设置该spinner的提示信息         spinner.setSelection(int position) 

1.2 图解方法作用

正常情况下（什么都不设置）Spinner如图：

setDropDownHorizontalOffset：不会超出最右边的边界

setDropDownVerticalOffset：可以设置负值，表示向上偏移

setDropDownWidth() ：设置选择框的宽度

setPopupBackgroundDrawable：设置背景效果

spinner.setPrompt:设置提示信息，仅在dailog模式下有效，需设置style

 <Spinner         android:id="@+id/spinner"         android:layout_width="200dp"         android:layout_height="wrap_content"         android:prompt="@string/app_name"         style="@android:style/Widget.Spinner"         android:layout_gravity="center_horizontal"> </Spinner> 

setSelection(int position):设置选中项

这样解释应该都可以知道每个方法的作用了！看这几张图，麻烦看官点个赞吧！

二.实战Spinner列表

使用原生的Spinner来制作一个列表，有以下两种方法

2.1 在布局中使用数组资源

 <Spinner         android:id="@+id/spinner"         android:layout_width="200dp"         android:entries="@array/subject"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"> </Spinner> 

<?xml version="1.0" encoding="utf-8"?> <resources> <array name="subject"> <item>计算机科学与技术</item> <item>软件工程</item> <item>信息科学与技术</item> <item>网络工程</item> <item>物联网</item> </array> </resources> 

使用很简单，只需要设置一个onItemSelectedListener
效果如图：

2.2 在代码中使用数组

在代码中使用数组，需要通过setAdapter() 进行设置，最常用的适配器就是ArrayAdapter，
具体用法：

String[] str = new String[]{"计算机科学与技术","软件工程","信息管理与科学","网络工程","物联网"};         ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item,str);         adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);         spinner.setAdapter(adapter);          spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {             @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { switch (position){ case 0:                         Toast.makeText(getApplicationContext(), "计算机科学与技术", Toast.LENGTH_SHORT).show(); break; case 1:                         Toast.makeText(getApplicationContext(), "软件工程", Toast.LENGTH_SHORT).show(); break; case 2:                         Toast.makeText(getApplicationContext(), "信息管理与科学", Toast.LENGTH_SHORT).show(); break; case 3:                         Toast.makeText(getApplicationContext(), "网络工程", Toast.LENGTH_SHORT).show(); break; case 4:                         Toast.makeText(getApplicationContext(), "物联网", Toast.LENGTH_SHORT).show(); break; } }              @Override public void onNothingSelected(AdapterView<?> parent) { } }); 

2.3 两个小点

1.spinner.setOnItemClickListener会报错，需要使用spinner.setOnItemSelectdListenter
2.如果之前选择了某一项，当前屏幕方向发生变化时，该项的事件会被重新触发一次。

三.自定义Spinner列表

下面进入重头戏，如何改造Spinner,打造炫酷的列表呢？

3.1 设计layout布局

创建ArrayAdapter时，传入了一个布局android.R.layout.simple_spinner_item,可以看一下源码

<TextView xmlns:android="https://schemas.android.com/apk/res/android"      android:id="@android:id/text1"     style="?android:attr/spinnerItemStyle"     android:singleLine="true"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:ellipsize="marquee"     android:textAlignment="inherit"/> 

这可以看出为什么使用ArrayAdapter只能显示简单的文字，他只有一个TextView控件
可见自定义Spinner可以分成以下几步：
1.自定义Layout
2.自定义Adapter
3.处理逻辑

下面做一个和微信顶部效果相同的列表

layout布局

<?xml version="1.0" encoding="utf-8"?> <LinearLayout     android:layout_marginTop="5dp"     xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="80dp"> <ImageView         android:id="@+id/wechat_image"         android:layout_marginLeft="16dp"         android:layout_gravity="center_vertical"         android:src="@drawable/add_friend"         android:layout_width="64dp"         android:layout_height="64dp"> </ImageView> <LinearLayout         android:orientation="vertical"         android:layout_width="match_parent"         android:layout_height="match_parent"> <TextView             android:text="新的朋友"             android:id="@+id/wechat_text"             android:textSize="24sp"             android:textColor="#555555"             android:gravity="center_vertical"             android:layout_marginLeft="24dp"             android:layout_width="match_parent"             android:layout_height="79dp"> </TextView> <View             android:background="#EEEEEE"             android:layout_width="match_parent"             android:layout_height="1dp"> </View> </LinearLayout> </LinearLayout> 

3.2 实现Adapter

Adapter代码

  @Override public void initWidget() { int[] photos = new int[]{R.drawable.add_friend,R.drawable.friends,R.drawable.ttag,R.drawable.pub};         String[] des = new String[]{"新的朋友","群聊","标签","公众号"}; MyAdapter myAdapter = new MyAdapter(photos,des,getApplicationContext());         spinner.setAdapter(myAdapter); } public class MyAdapter extends BaseAdapter implements SpinnerAdapter{ private int[] photos; private String[] des; private Context context; public MyAdapter(int[] photos,String[] des,Context context){ this.photos=photos; this.des=des; this.context=context; }         @Override public int getCount() { return photos.length; }          @Override public Object getItem(int position) { return des[position]; }          @Override public long getItemId(int position) { return position; }          @Override public View getView(int position, View convertView, ViewGroup parent) {             convertView = LayoutInflater.from(context).inflate(R.layout.wechat_item, null); ImageView imageView = convertView.findViewById(R.id.wechat_image); TextView textView = convertView.findViewById(R.id.wechat_text);             imageView.setImageResource(photos[position]);             textView.setText(des[position]); return convertView; } } 

3.3 添加逻辑

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {             @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { switch (position){ case 0:                         Toast.makeText(getApplicationContext(), "新的朋友", Toast.LENGTH_SHORT).show(); break; case 1:                         Toast.makeText(getApplicationContext(), "群聊", Toast.LENGTH_SHORT).show(); break; case 2:                         Toast.makeText(getApplicationContext(), "标签", Toast.LENGTH_SHORT).show(); break; case 3:                         Toast.makeText(getApplicationContext(), "公众号", Toast.LENGTH_SHORT).show(); break; } } 

效果图

虽然有差别，但还是有点像的，大佬们不要挑细节哈

四.总结

感谢阅读本篇博客，希望对您能有所帮助
先别走，我有一个资源学习群要推荐给你，它是白嫖党的乐园，小白的天堂！

别再犹豫，一起来学习！