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

使用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;

/**
 * 解决ScrollView嵌套RecyclerView时RecyclerView需要高度自适应的问题
 */
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;
    }

    /**
     * 得到最数组中最小元素的下标
     *
     * @param array
     * @return
     */
    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;
    }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android RecyclerView详解之实现 ListView GridView瀑布流效果

     什么是RecyclerView RecyclerView 是Google推出的最新的 替代ListView.GridView的组件,RecyclerView是用来显示大量数据的容器,并通过有限数量的子View,来提高滚动时的性能. 与ListView不同,RecyclerView 不再负责布局,而是专注于布局复用.布局主要通过 LayoutManager来管理,目前提供了3种常用的布局管理: LinearLayoutManager 线性布局管理器 (ListView效果) GridLayout

  • Android Flutter自适应瀑布流案例详解

    目录 Flutter自适应瀑布流 根据效果图可以分为四步: 1.图片自适应: 2.自适应标签: 3.上拉刷新和下拉加载 4.底部的点赞按钮 Flutter自适应瀑布流 前言:在电商app经常会看到首页商品推荐的瀑布流,或者类似短视频app首页也是瀑布流,这些都是需要自适应的,才能给用户带来好的体验 (具体代码请联系我,当天会回复) 话不多说先上效果图: 根据效果图可以分为四步: 图片自适应 自适应标签 上拉刷新和下拉加载 底部的点赞按钮可以去掉或者自己修改样式,我这里使用的like_button

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

    使用RecyclerView实现的瀑布流高度自适应,供大家参考,具体内容如下 背景:使用时在RecyclerView外嵌套了自定义的ScrollView,需要让RecyclerView高度自适应,由于是瀑布流格式网上找了好多方法都无法实现或是动态计算的高度不准确.估计大家都知道recyclerview 内容的高度不是 recyclerview 控制的而是由LayoutManager 来设置的.下面我来说下我的解决方案吧: 布局中的使用 <android.support.v7.widget.Rec

  • javascript实现瀑布流自适应遇到的问题及解决方案

    这几天看了Amy老师的用javascript实现瀑布流,我跟着把代码敲出来.发现这样写只能第一次载入时适应屏幕,以后改变窗口大小就不能做到自适应了. 于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的, 复制代码 代码如下: window.onload=function(){     //瀑布流函数     waterfall('content','box');     //模拟数据加载     var dataInt = {"data":[{"s

  • javascript自适应宽度的瀑布流实现思路

    这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和

  • JavaScript实现图片瀑布流和底部刷新

    瀑布流现在基本上是图片显示网页的标配,主要是为了适配图片和文字块的大小,使显示出的效果没有那么呆板 实现这个功能首先要有html,css和js基础 首先先实现瀑布流 即下一行的图片放在上一行的凹下去的地方 基本的html代码如下 <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="style

  • 详解javascript实现瀑布流列式布局

    本文介绍了javascript瀑布流列式布局的相关内容,分享给大家供大家参考,具体内容如下 JS原理 上面说了,列式布局简直算是完虐绝对式布局. 绝对式布局,简直就像10元/天 的搬砖工.而列式布局就是站在那看他搬砖的监工. 同样都是搬砖的,一个卖苦力,一个秀智商.简直了!!! 听了逼逼,我们来直面一下惨淡的人生. 列式布局的原理其实和绝对式布局没有太大的却别. 同样也有3个部分, 一是页面加载自适应,二是滑动加载,三是响应式布局. 分别讲解: 1.加载自适应 我们先看一下代码吧: var $

  • 深入探秘jquery瀑布流的实现

    瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我想重新谈起瀑布流,一是想满足我自己的愿望,写一个详细的介绍(不敢自名为教程),二是,给大家一份参考,因为search很多,但是他们给的是一个插件,然后教你怎样配置,当然,也有很多其他的大神也细心的做了很多教程,比如 imooc上面 Amy 姐姐 发布的瀑布流教程,也

  • jQuery实现瀑布流的取巧做法分享

    分析:瀑布流,做法有2种 (1)绝对定位方案:每个单元格设置为绝对定位,通过计算,分别设置 top , left 即可实现 (2)浮动方案:弄N列布局(浮动),然后图片数据,按顺序依次插入,如N为3列 ,第一张图片插入到第一列,第二张图片插入到第二列,第三张图片插入到第三列,第四张图片插入到第一列........这样循环插入(不能自适应) CSS与HTML代码: 复制代码 代码如下: body,ul,li{margin:0;margin:0;}     ul{list-style:none;}

  • jQuery图片瀑布流的简单实现代码

    简单版的Jquery实现图片瀑布流思路,供大家参考,具体内容如下 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特点:列数自适应,图片宽度固定 已知BUG: 像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题,解决办法就是给予样式的时候不按顺序,而是先将图片放在top值最低的列 1.预备 1.基础html <div id="main"> <div class="img-item"><img src="images/

随机推荐