Android之MaterialDesign使用(二)—— RecyclerView的使用

RecyclerView是Material Design里面非常重要的一个控件,这也是我想单独把它拿出来的原因,记得刚开始工作的时候,还是使用的ListView,但是自从Google 推出了RecyclerView之后,很多小伙伴就开始抛弃ListView转而投入到RecyclerView的怀抱了,那么,RecyclerView到底好在哪里?相比较ListView它又有哪些亮点呢?

RecyclerView与ListView对比
(1)布局效果对比:Android 默认提供的 RecyclerView 就能支持 线性布局、网格布局、瀑布流布局 三种,而且同时还能够控制横向还是纵向滚动,而ListView仅仅只能支持线性布局。
(2)基础使用:RecyclerView 中ViewHolder的编写规范化了,而且所有的复用工作已经在底层全部实现,并不再需要人为通过代码去实现了。
(3)空数据处理:ListView 提供了 setEmptyView 这个 API 来让我们处理 Adapter 中数据为空的情况,只需轻轻一 set 就能搞定一切。而RecyclerView 并没有提供,需要自己手动去实现。
(4)添加头部和尾部:ListView自动提供了添加头部和底部的API,而RecyclerView 并没有这个支持,需要自己手动去实现。
(5)局部刷新:ListView 并没有提供局部刷新刷新某个 Item 的 API 给我们,只提供了全局刷新notifyDataSetChanged(),但是RecyclerView 不仅支持全局刷新,也支持局部刷新。
(6)动画效果:RecyclerView 在做局部刷新的时候有一个渐变的动画效果,而ListView 需要自己去实现。
(7)监听事件:ListView 为我们准备了几个专门用于监听 Item 的回调接口,如单击、长按、选中某个 Item 等,而RecyclerView 系统并没有提供这样的支持,需要我们自己去手动实现。
(8)嵌套滚动:RecyclerView 配合NestedScrollView可以实现嵌套滚动,但是使用ListView则无法实现。

上面这样看太累了,用表格来整理一下:

RecyclerView ListView
布局效果对比 支持 线性布局、网格布局、瀑布流布局 三种 支持线性布局
基础使用 ViewHolder编写规范化 需要手动去处理
空数据处理 自己手动去实现 提供了 setEmptyView
添加头部和尾部 自己手动去实现 提供了添加头部和底部的API
局部刷新 提供了API 自己手动去实现
动画效果 局部刷新的时候有一个渐变的动画效果 自己手动去实现
监听事件 自己手动去实现 准备了几个专门用于监听 Item 的回调接口,如单击、长按、选中某个 Item 等
嵌套滚动 RecyclerView 配合NestedScrollView可以实现嵌套滚动 无法实现这种效果

关于RecyclerView 和ListView的对比就到这里,因为这不是这次的重点,下面我们开始进入正题。

RecyclerView的使用
先来看一下效果


recyclerView.gif

1.编写布局文件

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".recyclerview.RecyclerViewActivity">

    <LinearLayout
        android:id="@+id/choose"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/linear_recycler_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="线性布局" />

        <Button
            android:id="@+id/grid_recycler_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="网格布局" />

        <Button
            android:id="@+id/staggered_recycler_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="瀑布流布局" />

        <Button
            android:id="@+id/multiple_recycler_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="多视图布局" />
    </LinearLayout>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/choose" />


</LinearLayout>

2.编写适配器

/**
 * author: zhoufan
 * data: 2021/8/17 13:43
 * content: RecyclerView的适配器
 */
class RecyclerViewAdapter : RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder>() {

    companion object {
        const val SPECIAL = 1
        const val NORMAL = 2
    }


    private var useList: MutableList<User> = arrayListOf()

    fun setUserList(list: MutableList<User>) {
        if (list.size > 0) {
            useList.addAll(list)
        }
    }

    /**
     * 处理多布局的情况
     */
    override fun getItemViewType(position: Int): Int {
        if (useList[position].userName.contains("明")) {
            return SPECIAL
        }
        return NORMAL
    }

    inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var recyclerImageView: ImageView = itemView.findViewById(R.id.adapter_recycler_view_image)
        var recyclerName: TextView = itemView.findViewById(R.id.adapter_recycler_view_name)
        var recyclerContent: TextView = itemView.findViewById(R.id.adapter_recycler_view_content)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        var view: View? = null
        if (viewType == SPECIAL) {
            view = LayoutInflater.from(parent.context)
                .inflate(R.layout.adapter_recycler_view, parent, false)
        }else {
            view = LayoutInflater.from(parent.context)
                .inflate(R.layout.adapter_recycler_view_two, parent, false)
        }
        return MyViewHolder(view!!)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        Glide.with(holder.itemView.context).load(useList[position].userImageUrl)
            .into(holder.recyclerImageView)
        holder.recyclerName.text = useList[position].userName
        holder.recyclerContent.text = useList[position].userInfo
    }

    override fun getItemCount() = useList.size
}

3.通过代码实现所有效果

class RecyclerViewActivity : AppCompatActivity() {

    private var useList: MutableList<User> = arrayListOf()
    private var adapter: RecyclerViewAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_recycler_view)
        initUserInfo()
        initRecyclerView()
        initEvent()
    }

    private fun initEvent() {
        // 切换到线性布局
        linear_recycler_view.setOnClickListener {
            recycler_view.layoutManager = LinearLayoutManager(this)
            runLayoutAnimation(recycler_view)
        }
        // 切换到网格布局
        grid_recycler_view.setOnClickListener {
            recycler_view.layoutManager = GridLayoutManager(this, 3)
            runLayoutAnimation(recycler_view)
        }
        // 切换到瀑布流布局
        staggered_recycler_view.setOnClickListener {
            recycler_view.layoutManager = StaggeredGridLayoutManager(
                2,
                StaggeredGridLayoutManager.VERTICAL
            )
            runLayoutAnimation(recycler_view)
        }
    }

    private fun initRecyclerView() {
        recycler_view.layoutManager = LinearLayoutManager(this)
        adapter = RecyclerViewAdapter()
        recycler_view.adapter = adapter
        adapter!!.setUserList(useList)
    }

    private fun initUserInfo() {
        val userJackie = User(
            "成龙",
            "中国影视男演员 [1]  、导演、制作人、编剧、歌手 [2]  ,国家一级演员。",
            "https://bkimg.cdn.bcebos.com/pic/2f738bd4b31c87016b20bd8e287f9e2f0608ffc0?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
        )
        val userJet = User(
            "李连杰",
            "华语影视男演员、导演、制作人、武术运动员、商人。",
            "https://bkimg.cdn.bcebos.com/pic/a044ad345982b2b78cb4089e3eadcbef76099b44?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto"
        )
        val userChow = User(
            "周润发",
            "华语影视男演员、摄影家,国家一级演员。",
            "https://bkimg.cdn.bcebos.com/pic/d31b0ef41bd5ad6e8d802d198bcb39dbb7fd3cc3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
        )
        val userLeon = User(
            "黎明",
            "中国香港男歌手、演员、导演。",
            "https://bkimg.cdn.bcebos.com/pic/7dd98d1001e93901b24f585472ec54e736d1960f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
        )
        val userAaron = User(
            "郭富城",
            "华语影视男演员、歌手、舞者。",
            "https://bkimg.cdn.bcebos.com/pic/adaf2edda3cc7cd98d10ad8d8d49363fb80e7bec3b04?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyMjA=,g_7,xp_5,yp_5/format,f_auto"
        )
        val userRichie = User(
            "任贤齐",
            "华语流行乐男歌手、影视演员、词曲创作人、导演、赛车手。",
            "https://bkimg.cdn.bcebos.com/pic/faedab64034f78f0915e29c973310a55b3191cb6?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto"
        )
        val userChen = User(
            "陈道明",
            "中国影视男演员、国家一级演员",
            "https://bkimg.cdn.bcebos.com/pic/9f2f070828381f30520de8c2a6014c086e06f041?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
        )
        val userAndy = User(
            "刘德华",
            "华语影视男演员、歌手、制片人、作词人",
            "https://bkimg.cdn.bcebos.com/pic/a08b87d6277f9e2f07089a9d537bfe24b899a9015558?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
        )
        val userG = User(
            "古天乐",
            "华语影视男演员、歌手 [1]  ,香港演艺人协会会长",
            "https://bkimg.cdn.bcebos.com/pic/622762d0f703918fa0ec47229771319759ee3c6d6e8c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto"
        )
        val userNick = User(
            "张家辉",
            "华语影视男演员、导演",
            "https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ed21b5bf67f9bba6eddc451da92f9?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
        )
        for (i in 0..2) {
            useList.add(userJackie)
            useList.add(userJet)
            useList.add(userChow)
            useList.add(userLeon)
            useList.add(userAaron)
            useList.add(userRichie)
            useList.add(userChen)
            useList.add(userAndy)
            useList.add(userG)
            useList.add(userNick)
        }
    }

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

推荐阅读更多精彩内容