Kotlin笔记(44) — 下拉框Spinner

立即下载用AI写一个

发布时间：2021-01-27

1人 | 浏览：5465次 | 收藏 |

技术：Android

运行环境：Androidstudio

概述

kotlin中Spinner的使用，及实现下拉选择的优化办法

详细

今天涉及知识有：
1. Spinner的使用详解
2. Spinner优劣分析
3. 下拉框功能优化
     3.1 添加 anko 库依赖
4. Activity中示例代码
5. 效果图和项目结构图

先来波效果图
![](/contentImages/image/20210127/Vh5XD0KuBeVVRgDqFlh.gif)

![](/contentImages/image/20210127/freKcRWFSdLq4xcISTq.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](https://upload-images.jianshu.io/upload_images/6127340-af06277f969e8302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
`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](https://upload-images.jianshu.io/upload_images/6127340-a2350db76bc2725a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
`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](https://upload-images.jianshu.io/upload_images/6127340-a7a0071a87d654e3.gif?imageMogr2/auto-orient/strip)
#### 二. Spinner优劣分析
通过以上的讲解，我们可以看到`Spinner`可以很快的实现一个下拉选择的功能，这是它的优点。当然由于现在app开发对于ui的高要求，`Spinner`控件也存在以下弊端：
- 展示的内容太过单一
- 弹出下拉框时遮盖原本显示的数据
- Spinner 右侧的 小三角形图标不是很明显，且替换修改比较难弄

总之，就是`Spinner`展示效果过于单一和固化，要改变起来异常艰难。这也是`Spinner`在开发中使用非常少的原因。
#### 三.下拉框功能优化
既然`Spinner`在使用的过程中弊端太多，那么我们可以用 `TextView+弹框` 的方式来实现相同效果。在`anko`库的加持下，实现此效果更加简单。但是，在实现之前，我们先要引入`anko`的`commons`库。

在`app_module`的`build.gradle`中添加如下依赖：
```
dependencies {
    //anko库关于界面跳转简化的依赖 
    implementation 'org.jetbrains.anko:anko-commons:0.10.8'

//其他代码省略
    //......
}
```
为了方便依赖的统一管理，我们也可以在`project`对应的`build.gradle`中声明版本常量，类似如下：
```
buildscript {
    //声明anko库版本常量
    ext.anko_version='0.10.8'
    
    //其他代码省略
    //......
}
```
`anko`库的最新版本可查看[anko官网](https://github.com/Kotlin/anko)
接着在`app_module`的`build.gradle`中添加依赖，类似如下：
```
dependencies {
    //anko库关于界面跳转简化的依赖 
    implementation "org.jetbrains.anko:anko-commons:$anko_version"

//其他代码省略
    //......
}
```
**需要注意的是，此时库依赖添加时必须用双引号，而不能用单引号**
#### 四. Activity中示例代码
下面给出`Activity`示例代码：
```
open class MainActivity : AppCompatActivity(), View.OnClickListener {

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

initData()
        setListener()
    }

private fun initData() {
//        spinnerDemo()

showSpinnerByAnko()
    }

private fun setListener() {
        mBtnTest.setOnClickListener(this@MainActivity)

mBtnTest.setOnClickListener(View.OnClickListener {

})
    }

override fun onClick(v: View) {
       when(v.id){
           R.id.mBtnTest -> {

}
       }
    }
}
```
更多代码，参看demo，这里就不赘述了。
#### 五.效果图和项目结构图
![](/contentImages/image/20210127/Vh5XD0KuBeVVRgDqFlh.gif)

![](/contentImages/image/20210127/freKcRWFSdLq4xcISTq.gif)

![](/contentImages/image/20210127/Xi1iua7F8k2bueaRc4D.png)

ok,今天的内容就介绍到这里了，谢谢大家。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Kotlin笔记(44) — 下拉框Spinner

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子