使用RecyclerView实现瀑布流

最新推荐文章于 2024-04-15 12:26:31 发布

程序员张晴天

最新推荐文章于 2024-04-15 12:26:31 发布

阅读量622

点赞数 1

分类专栏： android学习文章标签： android 瀑布流 RecyclerView

本文链接：https://blog.csdn.net/sinat_24946363/article/details/89168192

版权

本文介绍了如何使用RecyclerView配合StaggeredGridLayoutManager实现Android瀑布流布局，详细讲述了如何处理滑动回顶部空隙、item乱跳问题，通过设置ImageView精确尺寸、Override方法以及使用notifyItemRangeInserted()确保更新稳定性。示例代码中采用Glide3加载图片，适配器关键代码和布局文件进行了展示。

摘要由CSDN通过智能技术生成

瀑布流也是个常用的显示控件了，但是在使用时经常遇到一些问题，比如滑动回顶部后出现空隙、item在滑动时乱跳等问题。

下面就来说说我怎么实现的瀑布流，并且怎么处理上面所说的这些问题的。

我使用了原生控件RecyclerView+StaggeredGridLayoutManager来实现的瀑布流，没有用第三方开源框架。下面以2列的瀑布流为例子开始讲解。

因为使用了StaggeredGridLayoutManager实现瀑布流，但是在设置后发现图片在滑动加载过程中高度会发生变化，在网上搜索了很多资料后，总结解决办法是在onBindViewHolder中绑定View时，给ImageView设置一个精确尺寸，就能解决这个问题。

先看一下最终实现效果：

正常显示的瀑布流.gif

提前说明下，我使用的是Glide3，读者们可以自行修改为Glide4。

1.实现瀑布流

先说说实现思路：

写布局文件，分别有2个布局文件，Activity的布局文件和Adapter的布局文件
写适配器，瀑布流的适配器里需要设置ImageView的宽高。
写RecyclerView，给RecyclerView设置StaggeredGridLayoutManager并设置适配器。
添加数据测试效果，根据效果反馈进行修改

第一步：写布局文件

Activity的布局文件只有一个RecyclerView就不贴了，贴一下Adapter的布局文件：

adapter_item_card.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:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:background="@android:color/holo_green_dark"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/card_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:src="@mipmap/ic_launcher