3.2.2 (下)完全掌握在 Kotlin 中实现 RecyclerView

如果你对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)
然后我们创建一个 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) }

感谢优秀的你跋山涉水看到了这里,不如关注下让我们永远在一起!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容