Android Spinner 只需要这一篇就能解决问题

 简介：大三学生党一枚！主攻Android开发，对于Web和后端均有了解。

个人语录：取乎其上，得乎其中，取乎其中，得乎其下，以顶级态度写好一篇的博客。

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

Spinner的秘密

• 一.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="http://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="http://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;
                }
            }

效果图



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

四.总结

感谢阅读本篇博客，希望对您能有所帮助