欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

3.2.2 完全掌握在 Kotlin 中实现 RecyclerView

程序员文章站 2022-03-13 20:49:42
...

3.2.2 完全掌握在 Kotlin 中实现 RecyclerView

点此进入:从零快速构建APP系列目录导图
点此进入:UI编程系列目录导图
点此进入:四大组件系列目录导图
点此进入:数据网络和线程系列目录导图
如果你对RecyclerView还没有完全了解,可参看我的这一篇:

3.2.1 一篇文章完全掌握 RecycleView 的六大用法

想要知道 Kotlin 是如何简化我们的人生的个很有趣的方式就是去创造一个 RecyclerView 适配器,在上一篇中,我们学会了 RecyclerView 的使用,这一篇我们用 Kotlin 实现 RecyclerView 中用到的 Adapter,你会发现整个工程代码会用如此简单并且易懂的方式组织在一起。

一、Kotlin 中的 RecyclerView Adapter

我们会创造一个包含一个图片和一个标题的条目适配器,之所以做的如此简单,是因为我们不必花过多的精力在修改单个的条目上面,所以我们现在需要创建一个简单的数据类条目,然后创建一个适配器,最后把它放到 RecyclerView。
- 数据类条目

data class Item(val id: Long, val title: String, val url: String)

在我们这样定义过这个数据类之后,他就自己创建了它的构造器,并且他此时此刻已经有了自己的一些不可变的属性以及一些有用的函数实现,比如:equals 或 hashCode。

  • 适配器 Adapter
    适配器的结构如下,它会自己创建一些必须的方法:
class MyAdapter : RecyclerView.Adapter() {

    override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder {
    }

    override fun onBindViewHolder(holder: ViewHolder?, position: Int) {
    }

    override fun getItemCount(): Int {
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

这样我们就创建了一个由原始 ViewHolder 扩展而来的 ViewHolder 类,因为适配器需要原始抽象类的实现。另外,有些元素被标注为 nullable。这是因为如果库没有适当的 @NonNull 标注的话 Kotlin 就没有方法知道 null 类型是否是允许的,所以这就要让我们来决定了。如果我们通过默认方式创建方法了,它就会认为其值是 nullable,但是进一步研究支持库,我们就知道哪些值是为 null,所以我们在这里就能够删除它,于是代码可以简化成这样:

class MyAdapter : RecyclerView.Adapter() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    }

    override fun getItemCount(): Int {
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}
  • 构造器 constructor
    适配器需要接收项目参数和适配器,这就像这样:
class MyAdapter(val items: List, val listener: (Item) -> Unit)

我们可以借助扩展函数的方式来进行实现,那么接下来的代码就变得非常简单:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ViewHolder(parent.inflate(R.layout.view_item))
override fun onBindViewHolder(holder: ViewHolder, position: Int) = holder.bind(items[position], listener)
override fun getItemCount() = items.size

这里面的三个方法都可以实现如此简约的形式,并获得以前的结果,仅仅用量三行我们就实现了完整的适配器。

关于扩展函数,我们在之前的文章当已经详细讲解过了,没有看过的同学请移步这里。。。,当然,在这里我们可以简单的理解为我们为 ViewGroup 和 ViewHolder 添加了额外扩展出来的 inflate 、bind 这样的函数,以便于我们可以直接像上面这样使用。

当然了,如果你觉得还是有一点难以理解的话,那么我们暂且为止可以把他先还原成下面的代码:

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(TextView(parent.context))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = items.[position]
    }

    override fun getItemCount(): Int = items.size

你会发现又是如此,我们可以像访问属性一样访问 context 和 text,当然我们也可以保持以往那样操作(使用 getters 和 setters),但是我们会得到一个编译器的警告。如果你还是倾向于Java中的使用方式,这个检查也是可以被关闭的。但是一旦你使用上了这种属性调用的方式你就会发现他帮我们节省了额外的字符总量。

  • ViewHolder
    ViewHolder 里面的值就是由刚才的数据类分配来的:
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun bind(item: Item, listener: (Item) -> Unit) = with(itemView) {
        itemTitle.text = item.title
        itemImage.loadUrl(item.url)
        setOnClickListener { listener(item) }
    }
}
  • 绑定适配器
    最后剩下的事就是绑定适配器,我们回到 MainActivity,现在简单地创建一系列的String放入List中,然后使用创建分配Adapter实例:
private val items = listOf(
    "Kotlin ",
    "RecyclerView",
    "WilFlow")
override fun onCreate(savedInstanceState: Bundle?) {
    ...
    val testList = findViewById(R.id.list) as RecyclerView
    testList .layoutManager = LinearLayoutManager(this) 
    testList .adapter = TestListAdapter(items)
}
List的创建

尽管我们以后会说到 Collection ,但是我们现在仅仅简单地通过使用一个函数 listOf 创建一个常量的 List(很快我们就会学习 mmutable)。它接收一个任何类型的 vararg(可变长的参数),它会自动推断出结果的类型。

当然也还有很多其它的函数可以选择,比如:setOf、arrayListOf 或者 hashSetOf。

如果你想要代码更加精简,你可以采用 Kotlin 扩展函数对 ViewHolder 进行简化详情参看这篇:Kotlin 扩展函数详解。

二、为 RecyclerView 添加点击事件

我们知道在开发App的过程中,前列表的每一个item布局都应该做一些工作的,比如我们接下来要说的点击事件。那么我们要做的第一件事就是去创建一个合适的XML布局文件,当然了这个布局文件能够符合我们的需要就行,所以让我们创建一个名为item.xml的layout:
- item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="@dimen/spacing_xlarge">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        tools:src="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/spacing_xlarge"
        android:layout_marginRight="@dimen/spacing_xlarge"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            tools:text="May 14, 2015" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            tools:text="Light Rain" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <TextView
            android:id="@+id/maxTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            tools:text="30º" />

        <TextView
            android:id="@+id/minTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            tools:text="15º" />

    </LinearLayout>

</LinearLayout>
对于我们需要用到的数据类,我们可以这样去加载它:
data class Forecast(val date: String, val description: String, val high: Int, val low: Int, val iconUrl: String)

熟悉上节我们说过的 RecyclerView 监听器创建和绑定过程的同学应该知道,我们此时此刻应该创建一个 click listener,如果你还不熟悉的话,请到这里来看一下:。。。

接下来我们来这样定义它:
public interface OnItemClickListener {
     operator fun invoke(forecast: Forecast)
}
然后我们可以这样使用:
itemClick.invoke(forecast)

或者省略掉 invoke:

itemClick(forecast)

注意:其中的 invoke 是我们至今为止还没有看到的,这个是 Kotlin 中的操作符重载,关于更多的操作符重载内容你可以看这篇,里面有详细的介绍:。。。

然后我们创建一个 ViewHolder

它将负责去绑定数据到新的View:

class ViewHolder(view: View, val itemClick: OnItemClickListener) :
                RecyclerView.ViewHolder(view) {
    private val iconView: ImageView
    private val dateView: TextView
    private val descriptionView: TextView
    private val maxTestView: TextView
    private val minTestView: TextView

    init {
        iconView = view.find(R.id.icon)
        dateView = view.find(R.id.date)
        descriptionView = view.find(R.id.description)
        maxTestView = view.find(R.id.maxTest)
        minTestView = view.find(R.id.minTest)
    }

    fun bindTest(test: Test) {
        with(forecast) {
            Picasso.with(itemView.ctx).load(iconUrl).into(iconView)
            dateView.text = date
            descriptionView.text = description
            maxTestView.text = "${high.toString()}"
            minTestView.text = "${low.toString()}"
            itemView.setOnClickListener { itemClick(test) }
        }
    }
}
改变 Adapter:

现在 Adapte r的构造方法可以接收一个 itemClick了,那么创建和绑定数据也就变得更加简单,我们这样来改写它:

public class TestListAdapter(val weekTest: TestList,
         val itemClick: TestListAdapter.OnItemClickListener) :
        RecyclerView.Adapter<TestListAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
            ViewHolder {
        val view = LayoutInflater.from(parent.ctx)
            .inflate(R.layout.item_forecast, parent, false)
        return ViewHolder(view, itemClick)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bindForecast(weekTest[position])
    }
    ......
}
设置适配器

最后我们就可以在 MainActivity 中调用 setAdapter 来为我们的 RecyclerView 设置适配器并实现监听功能了,最后结果是这样的:

testList.adapter = TestListAdapter(result,
        object : TestListAdapter.OnItemClickListener{
            override fun invoke(test: Test) {
                toast(forecast.date)
            }
        })

三、对 setOnClickListener() 的简化与使用

(1)用 Lambda 简化setOnClickListener()

正如我们开篇提到的那样,Kotlin 是允许 Java 库的一些优化的,所以我们的 Interface 中包含的单个函数可以被替代为一个函数。所以如果我们这么去定义上面的点击监听器的话,它依然会正常执行:

fun setOnClickListener(listener: (View) -> Unit)

一个 lambda 表达式通过参数的形式被定义在箭头的左边(被圆括号包围),然后在箭头的右边返回结果值。在这个例子中,我们接收一个View,然后返回一个Unit(没有东西)。所以根据这种思想,我们可以把前面的代码简化成这样:

view.setOnClickListener({ view -> toast("Click")})

这是非常棒的简化了:当我们定义了一个方法,我们必须使用大括号包围,然后在箭头的左边指定参数,在箭头的右边返回函数执行的结果。而如果左边的参数没有使用到的话,我们甚至可以更加简化这段代码,那就是省略左边的参数:

view.setOnClickListener({ toast("Click") })

更为凑巧的是,我们这个函数的最后一个参数是一个函数,所以我们可以把这个函数移动到圆括号外面:

view.setOnClickListener() { toast("Click") }

并且,因为我们这个函数只有一个参数,所以最后我们可以省略这个圆括号:

view.setOnClickListener { toast("Click") }

到此为止,我们对 setOnClickListener() 的简化工作就结束了,你会发现这比原始的Java代码简短了约5倍多,并且更加容易理解它所做的事情,是不是瞬间爱上 Kotlin 了呢。接下来我们在 Adapter 中使用。

(2)在 Adapter的使用简化的 OnClickListener

在上面的简化过程中,我如此艰苦地写了click listener 的目的就是更好的在这里进行使用。我们首先从TestListAdapter 中删除 listener 接口,然后使用 lambda 代替:

public class TestListAdapter(val weekTest: TestList,
                                 val itemClick: (Test) -> Unit)

这个itemClick函数接收一个test参数然后不返回任何东西,ViewHolder中也可以这么修改:

class ViewHolder(view: View, val itemClick: (Test) -> Unit)

然后其它的代码保持不变,仅仅改变MainActivity:

val adapter = TestListAdapter(result) { test -> toast(test.date) }

按照上面简化的规则,我们最后做出如下的简化:

val adapter = TestListAdapter(result) { toast(it.date) }

联系方式:

简书:WillFlow
CSDN:WillFlow
微信公众号:WillFlow

3.2.2 完全掌握在 Kotlin 中实现 RecyclerView