扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 移动开发 >使用RecyclerView实现瀑布流高度自适应
  • 710

0
分享到

使用RecyclerView实现瀑布流高度自适应

2024-04-02 19:04:59 710人浏览 泡泡鱼
摘要

使用RecyclerView实现的瀑布流高度自适应，供大家参考，具体内容如下 背景：使用时在RecyclerView外嵌套了自定义的ScrollView,需要让RecyclerVie

使用RecyclerView实现的瀑布流高度自适应，供大家参考，具体内容如下

背景：使用时在RecyclerView外嵌套了自定义的ScrollView,需要让RecyclerView高度自适应，由于是瀑布流格式网上找了好多方法都无法实现或是动态计算的高度不准确。估计大家都知道recyclerview 内容的高度不是 recyclerview 控制的而是由LayoutManager 来设置的。下面我来说下我的解决方案吧：

布局中的使用


<Android.support.v7.widget.RecyclerView
                android:id="@+id/rcv_indexfragment_article_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dimen12"
                android:padding="@dimen/dimen4"
                android:background="@color/bg_white"/>

方法一

个人认为最简单有效的方法，解决问题最终选用的方法。

官网博客翻译资料：

RecyclerView 控件提供了灵活一种创建列表和网格的基本方案，而且还支持动画。这个版本为 LayoutManager api带来了一个非常激动人心的新特性：自动测量！让RecyclerView可以根据其内容的大小调整自己。这意味着以前那些无解的场景，比如对RecyclerView的一个dimension 使用WRAP_CONTENT成为了可能。你会发现所有的内置LayoutManager现在都支持自动测量。
因为这个变化的原因，你得仔细检查 item view的 layout parameters 了：以前会被自动忽略的 layout parameters（比如在滚动方向上的MATCH_PARENT ），现在会被完全考虑进去。如果你有一个自定义的LayoutManager，且没有继承自内置的LayoutManager，那么这就是一个可选的API － 你需要调用setAutoMeasureEnabled(true) 并且根据这个方法的Javadoc中的描述做一些微小的改变。
注意，虽然RecyclerView可以让自己的子View动画，但是它不能动画自己的边界改变。如果你想要让RecyclerView的边界变化也呈现动画，你可以使用 Transition API。

配置的版本:


compile 'com.android.support:recyclerview-v7:23.2.1'

想要内容随高度变化需设置：（注意：此方式是Android Support Library 23.2中引入的，如果配置之前的版本会报错哦~）


layoutManager.setAutoMeasureEnabled(true);

Activity中的使用：


recyclerview= ViewFindUtils.find(view, R.id.recyclerview);
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setAutoMeasureEnabled(true);
recyclerview.setLayoutManager(layoutManager);
recyclerview.setHasFixedSize(true);
recyclerview.setNestedScrollingEnabled(false);
SpacesItemDecoration decoration = new SpacesItemDecoration(6);
recyclerview.addItemDecoration(decoration);

方法二

自定义CustomStaggeredGridLayoutManager类继承自StaggeredGridLayoutManager。（注：此方法用到我的项目中计算的高度不准确，列表后面总有一段空白，所以我放弃了~不过你们可以试试，可能是我布局嵌套的问题）

配置的版本(建议使用最新的版本):


compile 'com.android.support:recyclerview-v7:23.1.1'

Activity中的使用：


recyclerview= ViewFindUtils.find(view, R.id.recyclerview);
CustomStaggeredGridLayoutManager layoutManager = new CustomStaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
recyclerview.setLayoutManager(layoutManager);
recyclerview.setHasFixedSize(true);
recyclerview.setNestedScrollingEnabled(false);
SpacesItemDecoration decoration = new SpacesItemDecoration(6);
recyclerview.addItemDecoration(decoration);

SpacesItemDecoration.class


public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

        private int space;

        public SpacesItemDecoration(int space) {
            this.space = space;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            outRect.top = space;
            outRect.bottom = space;
            outRect.left = space;
            outRect.right = space;
        }
    }

CustomStaggeredGridLayoutManager.class


package com.sunny.demo.widget;

import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;
import android.view.ViewGroup;

import com.parkmecn.ehc.utils.LogUtil;


public class CustomStaggeredGridLayoutManager extends StaggeredGridLayoutManager {
    public CustomStaggeredGridLayoutManager(int spanCount, int orientation) {
        super(spanCount, orientation);
    }

    // 尺寸的数组，[0]是宽，[1]是高
    private int[] measuredDimension = new int[2];

    // 用来比较同行/列那个item罪宽/高
    private int[] dimension;


    @Override

    public void onMeasure(RecyclerView.Recycler recycler, RecyclerView.State state, int widthSpec, int heightSpec) {
        // 宽的mode+size
        final int widthMode = View.MeasureSpec.getMode(widthSpec);
        final int widthSize = View.MeasureSpec.getSize(widthSpec);
        // 高的mode + size
        final int heightMode = View.MeasureSpec.getMode(heightSpec);
        final int heightSize = View.MeasureSpec.getSize(heightSpec);

        // 自身宽高的初始值
        int width = 0;
        int height = 0;
        // item的数目
        int count = getItemCount();
        // item的列数
        int span = getSpanCount();
        // 根据行数或列数来创建数组
        dimension = new int[span];

        for (int i = 0; i < count; i++) {
            measureScrapChild(recycler, i, View.MeasureSpec.makeMeasureSpec(i, View.MeasureSpec.UNSPECIFIED), View
                    .MeasureSpec.makeMeasureSpec(i, View.MeasureSpec.UNSPECIFIED), measuredDimension);

            // 如果是竖直的列表，计算item的高，否则计算宽度
//            LogUtil.d("LISTENER", "position " + i + " height = " + measuredDimension[1]);
            if (getOrientation() == VERTICAL) {
                dimension[findMinIndex(dimension)] += measuredDimension[1];
            } else {
                dimension[findMinIndex(dimension)] += measuredDimension[0];
            }
        }
        if (getOrientation() == VERTICAL) {
            height = findMax(dimension);
        } else {
            width = findMax(dimension);
        }


        switch (widthMode) {
            // 当控件宽是match_parent时，宽度就是父控件的宽度
            case View.MeasureSpec.EXACTLY:
                width = widthSize;
                break;
            case View.MeasureSpec.AT_MOST:
                break;
            case View.MeasureSpec.UNSPECIFIED:
                break;
        }
        switch (heightMode) {
            // 当控件高是match_parent时，高度就是父控件的高度
            case View.MeasureSpec.EXACTLY:
                height = heightSize;
                break;
            case View.MeasureSpec.AT_MOST:
                break;
            case View.MeasureSpec.UNSPECIFIED:
                break;
        }
        // 设置测量尺寸
        setMeasuredDimension(width, height);
        LogUtil.e("setMeasuredDimension(width, height)--->height==" + height);
    }

    private void measureScrapChild(RecyclerView.Recycler recycler, int position, int widthSpec, int heightSpec, int[]
            measuredDimension) {

        // 挨个遍历所有item
        if (position < getItemCount()) {
            try {
                View view = recycler.getViewForPosition(position);//fix 动态添加时报IndexOutOfBoundsException

                if (view != null) {
                    RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) view.getLayoutParams();
                    int childWidthSpec = ViewGroup.getChildMeasureSpec(widthSpec, getPaddingLeft() + getPaddingRight
                            (), lp.width);
                    LogUtil.e(position + "--->heightSpec=" + heightSpec + ";getPaddingTop()=" + getPaddingTop() + ";" +
                            "getPaddingBottom()" + getPaddingBottom() + ";lp.height=" + lp.height);
                    int childHeightSpec = ViewGroup.getChildMeasureSpec(heightSpec, getPaddingTop() +
                            getPaddingBottom(), lp.height);
                    LogUtil.e(position + "--->viewchildHeightSpec=" + childHeightSpec);
                    // 子view进行测量，然后可以通过getMeasuredWidth()获得测量的宽，高类似
                    view.measure(childWidthSpec, childHeightSpec);
                    // 将item的宽高放入数组中
                    measuredDimension[0] = view.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
                    //FIXME 此处计算的高度总比实际高度要高一些，导致最后RecycerView的高度计算不对最后留有一段空白，暂时没有找到问题所在，待大神的解决啊~
                    measuredDimension[1] = view.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
                    LogUtil.e(position + "--->view.getMeasuredHeight()=" + view.getMeasuredHeight() + ";lp" +
                            ".topMargin=" + lp.topMargin + ";lp.bottomMargin=" + lp.bottomMargin);
                    recycler.recycleView(view);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    private int findMax(int[] array) {
        int max = array[0];
        for (int value : array) {
            if (value > max) {
                max = value;
            }
        }
        return max;
    }

    
    private int findMinIndex(int[] array) {
        int index = 0;
        int min = array[0];
        for (int i = 0; i < array.length; i++) {
            if (array[i] < min) {
                min = array[i];
                index = i;
            }
        }
        return index;
    }


}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: 使用RecyclerView实现瀑布流高度自适应

本文链接: https://lsjlt.com/news/135837.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用RecyclerView实现瀑布流高度自适应
    使用RecyclerView实现的瀑布流高度自适应，供大家参考，具体内容如下 背景：使用时在RecyclerView外嵌套了自定义的ScrollView,需要让RecyclerVie...
    99+
    2024-04-02
  • Android RecyclerView实现瀑布流，图片自适应高度，不闪烁，解决位置交换
    记录一下以前自己代码中用到过代码效果，也做个备份，省的以后代码找不到，大家也可以参考参考，也许看过网上某些笔记，但是不记得了链接了，有问题可以联系本人 以下会写从布局到java...
    99+
    2022-06-06
    图片 recyclerview 瀑布 瀑布流 自适应 Android
  • Android怎么使用RecyclerView实现瀑布流界面
    今天小编给大家分享一下Android怎么使用RecyclerView实现瀑布流界面的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下...
    99+
    2023-07-05
  • Android Flutter自适应瀑布流案例详解
    目录Flutter自适应瀑布流根据效果图可以分为四步：1.图片自适应：2.自适应标签：3.上拉刷新和下拉加载4.底部的点赞按钮Flutter自适应瀑布流 前言：在电商app经常会看到...
    99+
    2024-04-02
  • Android入门之使用RecyclerView完美实现瀑布流界面详解
    目录前言什么是瀑布流怎么实现瀑布流基于MVVM设计模式的RecyclerView实现瀑布流代码工程整体结构布局后端代码总结正确的做法错误的做法前言 网上充满着不完善的基于Recycl...
    99+
    2023-02-22
    Android RecyclerView实现瀑布流界面 Android RecyclerView瀑布流界面 Android RecyclerView瀑布流
  • Android RecyclerView详解之实现 ListView GridView瀑布流效果
     什么是RecyclerView RecyclerView 是Google推出的最新的 替代ListView、GridView的组件，RecyclerView是用来...
    99+
    2022-06-06
    recyclerview listview gridview Android
  • 使用postMessage怎么实现iframe自适应高度
    这篇文章将为大家详细讲解有关使用postMessage怎么实现iframe自适应高度，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。index.html ：<!DOCTYPE ...
    99+
    2023-06-09
  • 使用js实现瀑布流效果
    本文实例为大家分享了js实现瀑布流效果的具体代码，供大家参考，具体内容如下 源码： <!DOCTYPE html> <html lang="en"> &...
    99+
    2024-04-02
  • 如何使用Bootstrap实现瀑布流布局
    这篇文章将为大家详细讲解有关如何使用Bootstrap实现瀑布流布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、案例介绍瀑布流是近几年流行起来的一种网页布局，视觉表...
    99+
    2024-04-02
  • 如何使用纯css实现瀑布流布局
    这篇文章主要为大家展示了“如何使用纯css实现瀑布流布局”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用纯css实现瀑布流布局”这篇文章吧。 　　1、纯...
    99+
    2024-04-02
  • js怎么实现无限加载自适应屏幕瀑布流图片效果
    这篇文章主要讲解了“js怎么实现无限加载自适应屏幕瀑布流图片效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“js怎么实现无限加载自适应屏幕瀑布流图片效果”...
    99+
    2024-04-02
  • css高度自适应怎么实现
    这篇文章跟大家分析一下“css高度自适应怎么实现”。内容详细易懂，对“css高度自适应怎么实现”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下，希望阅读后能够对大家有所帮助。...
    99+
    2024-04-02
  • css怎么实现高度自适应
    本篇内容主要讲解“css怎么实现高度自适应”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css怎么实现高度自适应”吧!在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求，比如...
    99+
    2023-06-20
  • 使用CSS实现响应式瀑布流卡片布局的技巧
    使用CSS实现响应式瀑布流卡片布局的技巧，需要具体代码示例在当今移动设备普及的时代，响应式设计已经成为现代网站的必备要素之一。而响应式瀑布流卡片布局作为一种流行的布局方式，可以在不同屏幕尺寸下实现流畅的展示效果。本文将介绍如何使用CSS实现...
    99+
    2023-11-21
    响应式 CSS 瀑布流布局
  • 使用CSS实现响应式卡片瀑布流布局的技巧
    使用CSS实现响应式卡片瀑布流布局的技巧随着移动设备的普及和网页内容的多样化，响应式设计已经成为现代web开发的基本要求之一。其中，卡片式布局和瀑布流布局都逐渐成为广受欢迎的设计风格。本文将介绍如何使用CSS实现一个响应式的卡片瀑布流布局，...
    99+
    2023-11-21
    响应式 CSS 瀑布流布局
  • 怎么在HTML5中使用 textarea实现高度自适应
    今天就跟大家聊聊有关怎么在HTML5中使用 textarea实现高度自适应，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。方案一HTML5 Textarea 元素1. 自动获得焦点点击...
    99+
    2023-06-09
  • 如何用js实现瀑布流布局
    这篇“如何用js实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用js实现瀑布流布局”文章吧。一、前端代码编...
    99+
    2023-07-05
  • 如何使用JS或CSS实现瀑布流布局
    本篇内容主要讲解“如何使用JS或CSS实现瀑布流布局”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用JS或CSS实现瀑布流布局”吧!本着实用精神，我们今天...
    99+
    2024-04-02
  • 如何使用HTML和CSS实现瀑布流布局
    如何使用HTML和CSS实现瀑布流布局瀑布流布局（Waterfall Layout）是一种常见的网页布局方式，它可以使网页内容呈现出像瀑布流一样的效果，每一列的高度可以不同，让网页看起来更加有趣和动感。在这篇文章中，我们将介绍如何使用HTM...
    99+
    2023-10-24
    CSS html 瀑布流布局
  • 使用CSS3怎么实现一个瀑布流布局
    使用CSS3怎么实现一个瀑布流布局？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。掌握点：column-count 把div中的文本分为多少列column-width 规定列宽c...
    99+
    2023-06-08
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作