[Android]~~优雅~~列表实现指北

作者 : 开心源码 本文共6826个字,预计阅读时间需要18分钟 发布时间: 2022-05-12 共200人阅读

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

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » [Android]~~优雅~~列表实现指北

发表回复