RecyclerView实现瀑布流的效果

最新推荐文章于 2024-04-28 09:33:15 发布
最新推荐文章于 2024-04-28 09:33:15 发布
阅读量522 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongfuqiang/article/details/78582316
版权

效果图如下




源代码如下:

MainActivity页面

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private StaggeredGridLayoutManager staggeredGridLayoutManager;
    private MyAdapter adapter;
    public final static String[] imageUrls = new String[]{
            "https://img-my.csdn.net/uploads/201309/01/1378037235_3453.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037235_7476.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037235_9280.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037234_3539.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037234_6318.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037194_2965.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037193_1687.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037193_1286.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037192_8379.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037178_9374.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037177_1254.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037177_6203.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037152_6352.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037151_9565.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037151_7904.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037148_7104.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037129_8825.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037128_5291.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037128_3531.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037127_1085.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037095_7515.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037094_8001.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037093_7168.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037091_4950.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949643_6410.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949642_6939.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949630_4505.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949630_4593.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949629_7309.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949629_8247.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949615_1986.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949614_8482.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949614_3743.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949614_4199.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949599_3416.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949599_5269.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949598_7858.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949598_9982.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949578_2770.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949578_8744.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949577_5210.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949577_1998.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949482_8813.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949481_6577.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949480_4490.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949455_6792.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949455_6345.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949442_4553.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949441_8987.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949441_5454.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949454_6367.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949442_4562.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037235_3453.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037235_7476.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037235_9280.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037234_3539.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037234_6318.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037194_2965.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037193_1687.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037193_1286.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037192_8379.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037178_9374.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037177_1254.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037177_6203.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037152_6352.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037151_9565.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037151_7904.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037148_7104.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037129_8825.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037128_5291.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037128_3531.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037127_1085.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037095_7515.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037094_8001.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037093_7168.jpg",
            "https://img-my.csdn.net/uploads/201309/01/1378037091_4950.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949643_6410.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949642_6939.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949630_4505.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949630_4593.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949629_7309.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949629_8247.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949615_1986.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949614_8482.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949614_3743.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949614_4199.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949599_3416.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949599_5269.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949598_7858.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949598_9982.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949578_2770.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949578_8744.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949577_5210.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949577_1998.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949482_8813.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949481_6577.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949480_4490.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949455_6792.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949455_6345.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949442_4553.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949441_8987.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949441_5454.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949454_6367.jpg",
            "https://img-my.csdn.net/uploads/201308/31/1377949442_4562.jpg",
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //去除title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        //去掉Activity上面的状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(3,
                StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
        adapter = new MyAdapter(imageUrls);
        recyclerView.setAdapter(adapter);
    }

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
        private String[] dataSet;

        public MyAdapter(String[] dataSet) {
            this.dataSet = dataSet;
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            private ImageView textview;

            public ViewHolder(View itemView) {
                super(itemView);
                this.textview = (ImageView) itemView.findViewById(R.id.images);
            }
        }

        @Override
        public int getItemCount() {
            return dataSet.length;
        }

        @Override
        public void onBindViewHolder(ViewHolder vh, int position) {
            Glide.with(vh.textview.getContext()).load(dataSet[position]).into(vh.textview);
        }

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.griditem_layout,
                    parent, false);
            ViewHolder vh = new ViewHolder(v);
            return vh;
        }
    }
}


MainActivity.xml布局

<android.support.constraint.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.example.zhouliu3_1.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>



girditem布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/images"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

drawable放入你网上找的图片就可以实现瀑布流的效果


一只向上的小蜗牛
关注
UnityRecyclingListView：Unity UI的快速滚动列表组件，可回收其子元素
02-06
RecyclingListView for Unity 这个是来做什么的？ 创建列表的一种方法就是简单地创建列表中的每个项目，然后将其添加到Unity ScrollRect的内容视图中，也许使用ContentFitter自动扩展它，然后使用VerticalLayoutGroup对其进行定位。 这有一个问题：大音量时它真的很慢。 大多数UI系统都不是在后台执行此操作。 取而代之的是，它们仅分配足够的视觉资源来覆盖可见区域（加上安全区域），然后在滚动时回收子视图-退出视图的视图将重新用于刚刚进入视图的部件。 这样，无论列表多大，您都有固定的开销。 此存储库包含此概念的最小可能的实现，有时称为
Unity工程 照片墙 瀑布流
03-29
Unity大屏展示照片墙 1、照片墙设置：是否流动动态照片、流动速度 2、照片的点击弹出；（含有碰撞、挤压） 3、照片的出场动画、弹出动画 4、2D物理系统 5、弹出翻页功能
Android RecyclerView 实现瀑布流
程序员徐师兄的博客
03-10 5588
瀑布流也是个常用的显示控件了，但是在使用时经常遇到一些问题，比如滑动回顶部后出现空隙、item在滑动时乱跳等问题。下面就来说说我怎么实现的瀑布流，并且怎么处理上面所说的这些问题的。我使用了原生控件RecyclerView+StaggeredGridLayoutManager来实现的瀑布流，没有用第三方开源框架。下面以2列的瀑布流为例子开始讲解。
使用RecyclerView实现瀑布流，仿照小红书，解决顶部留白、卡顿等问题
软件人生
09-18 3567
一、最终效果： 二、工程结构框架： 三、核心实现： （1）、实现RecyclerView控件的适配器类 主要就是实现下面三个函数的重载： @NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(mCon
Android使用RecyclerView实现瀑布流
m0_57473261的博客
03-19 1003
在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。
Anroid利用RecyclerView实现瀑布流效果
03-10
本教程将深入讲解如何利用RecyclerView来实现瀑布流效果。 瀑布流布局，又称Pinterest布局，是一种多列布局方式，其中每个元素的宽度相同，高度则根据内容自适应。在RecyclerView中实现这种布局，我们需要自定义...
Android RecyclerView实现瀑布流，图片自适应高度，不闪烁，解决位置交换
01-20
本篇文章将详细讲解如何在RecyclerView中实现瀑布流效果，同时确保图片自适应高度且不闪烁，并解决位置交换时的问题。 首先，我们要创建两个XML布局文件。`activity_waterfall`是主布局，`item_waterfall`是...
RecyclerView实现瀑布流
07-04
本教程将深入讲解如何使用RecyclerView来实现瀑布流效果，一种常见的布局方式，常见于电商应用的商品展示。 瀑布流布局，又称流式布局或Infinite Scrolling，特点是每一列的高度不固定，每个单元格（item）会根据其...
RecyclerView实现瀑布流，快速滑动，侧滑删除，点击图片放大等效果
12-05
本教程将深入探讨如何使用RecyclerView实现瀑布流布局、快速滑动、侧滑删除以及点击图片放大等功能。 首先，我们需要理解RecyclerView的基本结构。RecyclerView包含一个LayoutManager、一个Adapter和一个ViewHolder...
安卓 RecyclerView瀑布流效果实现
12-15
2. **StaggeredGridLayoutManager**: 这是实现瀑布流效果更自然的选择，因为它允许每一行的item数量不同。StaggeredGridLayoutManager提供了GAP_HANDLING_NONE、GAP_HANDLING_ADJUST_SIZES和GAP_HANDLING_MOVE_ITEMS...
RecyclerView用法之瀑布流的实现
沐风的博客
03-25 1132
随着md风格的推行，RecyclerView的使用日趋增多，而且经常与CardView组合起来形成强大绚丽的布局效果，而瀑布流就是其中比较常见的效果之一，今天就来记录一下如何简单实现瀑布流效果。 1.首先，先来讲下RecyclerView的item常见分布形式，RecyclerView用RecyclerView.LayoutManager类实现其item的排布方式，系统已经为我们默认提供了三个实
Android使用RecyclerView和StaggeredGridLayoutManager实现瀑布流效果-实现
Edwin_C 的博客
12-09 4471
经过构建基础代码框架、创建StaggeredAdapter适配器、实现空界面效果之后，瀑布流的实现只是一个在StaggeredAdapter中添加ViewType类型的问题，这个类型就是FORMAL_ITEM对应正常的服务器数据，当然创建新的ViewHolder也是必须的。 7、实现StaggeredFormalViewHolder完成正常数据展示 ...
Android 一分钟使用RecyclerView完美实现瀑布
shenggaofei的博客
12-15 1155
【免费】安卓RecyclerView瀑布流效果实现资源-CSDN文库
android 9(13)
最新发布
2301_82241775的博客
04-28 425
现在新技术层出不穷，如果每次出新的技术，我们都深入的研究的话，很容易分散精力。新的技术可能很久之后我们才会在工作中用得上，当学的新技术无法学以致用，很容易被我们遗忘，到最后真的需要使用的时候，又要从头来过（虽然上手会更快）。我觉得身为技术人，针对新技术应该是持拥抱态度的，入了这一行你就应该知道这是一个活到老学到老的行业，所以面对新技术，不要抵触，拥抱变化就好了。Flutter 明显是一种全新的技术，而对于这个新技术在发布之初，花一个月的时间学习它，成本确实过高。
精通Android布局管理——从RecyclerView到瀑布流布局完全解析
youmashengyue的博客
04-22 867
在Android开发中，高效地展示数据集合是构建动态和响应式应用的核心。RecyclerView作为ListView和GridView的强大替代者，提供了更灵活的布局配置和性能优化。本篇博客将深入探讨RecyclerView的使用方法，包括其瀑布流布局实现，并提供实例源码，帮助你在项目中实现精美的界面布局。### RecyclerView简介 `RecyclerView`是Android标准开发包中的一个强大组件，用于在有限的窗口展示大量数据项。它通过复用视图单元格来优化内存使用，极大提升了滑动的流畅性。#
RecyclerView瀑布流优化方案探讨(1)，一线互联网移动架构师Android框架体系架构
2401_84132176的博客
04-11 955
RecyclerView莫名的Inconsistency detected崩溃；出现这个异常原因：使用RecyclerView加官方下拉刷新的时候，如果绑定的List对象在更新数据之前进行了clear，而这时用户紧接着迅速上滑RV，就会造成崩溃，而且异常不会报到你的代码上，属于RV内部错误。自定义一个CustomStaggeredGridLayoutManager 在onLayoutChildren对异常进行捕获：@Overridetry {
recyclerView实现瀑布流
潇湘夜雨
10-13 383
那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢？ 整体上看RecyclerView架构，提供了一种插拔式的体验，高度的解耦，异常的灵活，通过设置它提供的不同LayoutManager，ItemDecoration , ItemAnimator实现令人瞠目的效果。 你想要控制其显示的方式，请通过布局管理器LayoutManager 你想要
Android Material Design 新控件
03-08
本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法
Android学习：RecyclerView瀑布流实现教程
本资源主要介绍了在Android平台上使用RecyclerView实现瀑布流布局的教程。通过学习，开发者可以掌握如何设计自定义的item布局、创建对象适配器Adapter以及使用Fragment展示内容。 在Android应用开发中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值