Android-- 优雅列表实现指北

RecyclerView框架Brvah简介与实践,本文旨在快速上手,对于二者详细介绍,不在赘述
实际上笔者对于Brvah源码,就没有怎么看....也说不出个啥
demo代码使用koltin androidx,代码很详细,完整贴出,选择阅读

RecyclerView是什么

Android开发过去使用ListView来实现列表,随着数据量增大,屏幕变大,ListView显得越来越不灵活,于是RecyclerView应运而生
Android 5.0,由google推出

A flexible view for providing a limited window into a large data set.

当前需要导包

'implementation 'androidx.recyclerview:recyclerview:1.0.0'

优点简述

• RecyclerView标准化了ViewHolder,省去了复用view的模板代码
• 高度解耦,布局和item显示分开控制
• 非常灵活的布局,由布局管理器控制,横向、竖向以及瀑布流,并且可以设置Item的间隔样式
• 可以控制Item增删的动画

虽然比listview好很多了,但是模板代码还是很多,实现复杂功能依然很麻烦

Brvah是什么

BRVAH是一个强大的RecyclerAdapter框架(什么是RecyclerView？)，它能节约开发者大量的开发时间，集成了大部分列表常用需求解决方案。为什么会有它？请查看「Android开源框架BRVAH由来篇」该框架于2016年4月10号发布的第1个版本到现在已经一年多了，经历了800多次代码提交，140多次版本打包，修复了1000多个问题，获得了9000多star，非常感谢大家的使用以及反馈。

以上是官方说明,实际上现在改项目16363个star,是同类型框架最多人使用的,现在还在维护更新
使用了Brvah后,感觉到美好妈妈再也不用担心我的头发了

基本使用

我们要做成这个样子

效果预览图.png

基本的列表,每个项里面有一个图片,一个介绍,一个按钮,按钮有不同的功能,每一项点击不同的跳转
实现一个Android列表我们需要:
一个有含有RecyclerView的布局 ,单项item的布局, 一个装有你需要展示数据的list ,最关键最核心的是一个告诉程序这些数据应该是如何展示在界面上的适配器（Adapter）

• 先是含有RecyclerView的Avtivity布局
  非常简单:
  activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.coair.scarlet.commondemo.activity.MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvMain"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/item_for_main_rv" />

</androidx.constraintlayout.widget.ConstraintLayout>

其实就是一个只配置布局属性的RecyclerView

• 接着是，单项item的布局,就是列表中每一项的布局
  这里要注意,因为android的布局绘制是先计算子view的长宽再计算父view,在写item的布局的时候,最外层layout的layout_height 不要设置为match_parent否则会出现,一个item占满RecyclerView整个高度的事故
  下面是布局文件, 就是一个CardView 里面一个ConstraintLayout包含Button1,TextView1,ImageView*1
  item_for_main_rv.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        tools:context="com.coair.scarlet.commondemo.activity.MainActivity">

        <Button
            android:id="@+id/btMainItem"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:minWidth="48dp"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/txDesMainItem"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text=""
            android:textSize="16sp"
            app:layout_constraintBottom_toTopOf="@+id/btMainItem"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imgMainItem"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imgMainItem"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginStart="8dp"
            android:layout_marginBottom="8dp"
            android:background="@drawable/shape_bg"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toBottomOf="@+id/btMainItem"
            app:layout_constraintDimensionRatio="h,1:1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/txDesMainItem" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

引用了一个圆角矩形作为图片背景
shape_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="6dp" />
    <solid android:color="@color/colorPrimaryLight" />
</shape>

color资源

<color name="colorPrimaryLight">#DCEDC8</color>

现在在android studio中的预览应该是:

布局预览.png

像这样要在预览中就能看到item显示在RecyclerView中样子,在RecyclerView属性中加上tools:listitem="@layout/item_for_main_rv"即可,值为你想填入的item的布局

• 一个装有你需要展示数据的list
  构造假数据

data class MainItem(
    //描述
    var description: String,
    //按钮的文本
    var param1: String = "",
    val param2: String = "",
    val param3: String = "",
    //整个item的点击事件，看实际需求，一般的数据类里面肯定没这种
    private val itemClickEvent: MainItem.() -> Unit = {}
) {
    fun onClick() {
        itemClickEvent(this)
    }
}


val mainItems by lazy {
    mutableListOf(
        MainItem("图表库测试MPAndroidChart", "弹个吐司") {
            //都是些自己学习时写的demo Activity，随便换
            ActivityUtils.startActivity(ChartActivity::class.java)
        },
        MainItem("下载相关", "换图片") {
            ActivityUtils.startActivity(DownloadActivity::class.java)
        },
        MainItem("http demo", "DownloadActivity") {
            ActivityUtils.startActivity(HttpActivity::class.java)
        },
        MainItem("数据库LITEPAL", "err") {
            ActivityUtils.startActivity(LitePalActivity::class.java)
        }
        。。。。。。
    )
}

• adapter
  关键点,Brvah的威力体现在此，直接看代码吧，想说的写在注释里

/**
 * 继承Brvah框架中的BaseQuickAdapter<T, K extends BaseViewHolder>
 * 泛型T 为list的泛型,K为ViewHolder,这里使用框架自带的基础BaseViewHolder即可
 *
 * [layoutResId]是item的布局文件,[data]是数据集合
 */
class MainAdapter(layoutResId: Int, data: MutableList<MainItem>) :
    BaseQuickAdapter<MainItem, BaseViewHolder>(layoutResId, data) {

    //必须实现的一个方法,使用BaseViewHolder将MainItem和view对应上
    override fun convert(helper: BaseViewHolder, item: MainItem) {
        helper.apply {

            //param1为按钮文本,没有就不显示
            if (item.param1.isEmpty()) {
                setVisible(R.id.btMainItem, false)
            } else {
                setText(R.id.btMainItem, item.param1)
            }
            //将description绑定到R.id.txDesMainItem上~
            setText(R.id.txDesMainItem, item.description)
            //随机显示一个图标 [icList]一个drawable list
            setImageResource(R.id.imgMainItem, icList.random())
            
            //标准实现子控件的点击事件:把子控件的点击事件注册给Listener,Listener之后在activity中实现
            //addOnClickListener(R.id.btMainItem)

            //也可以使用方法回调来实现子控件的相关操作.
            //我发现Brvah的子控件点击事件容易多次点击触发多次,
            //就这样写了[clickWithTrigger]是我弄的一个防多次点击的方法
            getView<Button>(R.id.btMainItem).clickWithTrigger {
                onclick(item, adapterPosition)
            }
        }
    }

    //一个回调方法,一会在activity中实现
    var onclick: (item: MainItem, position: Int) -> Unit = { _, _ -> }
}

我们需要的东西都有了，接下来就是使用了
初始化MainAdapter

private val mainItemAdapter by lazy {
    //填入item布局,数据集
    MainAdapter(R.layout.item_for_main_rv, mainItems).apply {
        //整个item的点击事件
        setOnItemClickListener { adapter, _, position ->
            (adapter.getItem(position) as MainItem).onClick()
        }
        //加载动画
        openLoadAnimation()

        //我们自定义的回调
        onclick = { item, position ->
            //根据param1不同做不同处理,其实最好是数据类中取一个字段来做判断,字符串或者Int写成const,或者用枚举
            when (item.param1) {
                "弹个吐司" -> {
                    ToastUtils.showShort("第${position}个item")
                }
                "换图片" -> {
                    //这里是更新单项item的方式
                    notifyItemChanged(position)
                }
                else -> {
                    try {
                        //无视即可,自己随便换
                        ActivityUtils.startActivity(Class.forName("com.coair.scarlet.commondemo.activity.${item.param1}") as Class<out AppCompatActivity>)
                    } catch (e: Exception) {
                        LogUtils.file(e.message)
                    }
                }
            }
        }
    }
}

在activity初始化控件的地方

        //非常重要,没有这个RecyclerView不会显示的.布局管理器也是RecyclerView灵活所在
        //第二个参数是列数,每行有几个item
        rvMain.layoutManager = GridLayoutManager(this, 1)
        rvMain.adapter = mainItemAdapter

以上,运行一下,就可以以看到要得效果啦~