Kotlin笔记(44) — 下拉框Spinner

前言

在Android开发过程中，我们偶尔会用到下拉框选择的情况。那么今天就来讲讲实现这个功能的Spinner控件吧。

今天涉及知识有：

1. Spinner的使用详解
2. Spinner优劣分析
3. 下拉框功能优化
   3.1 添加 anko 库依赖
   3.2 TextView+弹框实现选择项
4. 效果图和项目结构图

先来波效果图

Spinner效果图.gif anko效果图.gif

一. Spinner的使用详解

其实我已经很久没有用Spinner控件了，甚至于已经有些陌生。那么下面就贴出Spinner控件具体使用的代码吧:

        var array:Array<String> = arrayOf("王者荣耀","吃鸡","暗黑破坏神","红色警戒")
        var adapter:ArrayAdapter<String> = ArrayAdapter(this,R.layout.spinner_item,array)
        //设置下拉模式风格
        adapter.setDropDownViewResource(R.layout.drop_item)
        mSpinner.prompt="请选择要进入的游戏" //标题栏
        mSpinner.adapter=adapter  //设置adapter
        mSpinner.setSelection(0)  //设置默认选中项
        //设置点击事件
        mSpinner.onItemSelectedListener= object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>?,
                view: View?,
                position: Int,
                id: Long
            ) {
                toast("选中游戏:${array[position]}")

            }

            override fun onNothingSelected(parent: AdapterView<*>?) {
                TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
            }

        }

这里需要注意的是，Spinner作为一个下拉控件，一般需要与适配器ArrayAdapter搭配使用。ArrayAdapter初始化时，需要传三个参数(结合以上代码讲解)：

• context： activity上下文
• R.layout.spinner_item：为自己定义的一个xml布局
• array：数组

其中spinner_item.xml布局即为一开始进入界面时，Spinner展示给我们看的背景布局，如下：

image.png
spinner_item.xml布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:textSize="20dp"
    android:typeface="serif"
    android:gravity="center"
    android:textColor="#000000"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"/>

可以看出spinner_item.xml布局中只能由一个控件，且为TextView。
而第三个参数array更是只能为数组，且数组只能存些基本数据类型。
接着看下面的代码：

        //设置下拉模式风格
        adapter.setDropDownViewResource(R.layout.drop_item)

此处setDropDownViewResource(R.layout.drop_item)是用于设置下拉框的布局的，如下：

image.png
R.layout.drop_item.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:background="@color/blue"
    android:gravity="center"
    android:orientation="vertical"
    android:textColor="#000000"
    android:textSize="20dp"/>

和之前的spinner_item.xml布局文件一样，R.layout.drop_item.xml中只能放一个TextView控件作为布局。
接下来的三行代码：

        mSpinner.prompt="请选择要进入的游戏" //标题栏
        mSpinner.adapter=adapter  //设置adapter
        mSpinner.setSelection(0)  //设置默认选中项

分别设置了标题栏,adapter和默认选中项。
最后一个监听是设置选中项点击事件的。
ok，这就是Spinner使用的基本内容，当然，Spinner作为基本的控件，别忘了在布局中添加该控件：

    <Spinner
        android:id="@+id/mSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mBtnTest"/>

Spinner使用效果图如下：

Spinner效果图.gif

二. Spinner优劣分析

通过以上的讲解，我们可以看到Spinner可以很快的实现一个下拉选择的功能，这是它的优点。当然由于现在app开发对于ui的高要求，Spinner控件也存在以下弊端：

• 展示的内容太过单一
• 弹出下拉框时遮盖原本显示的数据
• Spinner 右侧的 小三角形图标不是很明显，且替换修改比较难弄

总之，就是Spinner展示效果过于单一和固化，要改变起来异常艰难。这也是Spinner在开发中使用非常少的原因。

三.下拉框功能优化

既然Spinner在使用的过程中弊端太多，那么我们可以用 TextView+弹框 的方式来实现相同效果。在anko库的加持下，实现此效果更加简单。但是，在实现之前，我们先要引入anko的commons库。

3.1 添加 anko 库依赖

在app_module的build.gradle中添加如下依赖：