Android RecyclerView加载复杂布局

用一个RecyclerView实现多种复杂布局,复用机制要保存

Github源码地址
码云源码地址

  • 在开发过程中,特别是电商类的,有时要开发一个很复杂的页面,但是又要性能好,不怎么出现内存问题,所以今天就写一个demo,一来巩固知识,二来给大家一个看看我实现的方式。
1.jpg

  • 我们先看看两种内存消耗的情况


    gaollg0.GIF
  • 第一种是NestedScrollView ,可以看到瞬间内存就增加,然后不停的滑动,加载越来越多的内容,内存消耗越来越大,没用复用机制的缺点。
gaollg1.GIF
  • 第二种是只用一个RecyclerView的情况,内存就不会继续上涨了,即使后面再增加内容,内存也是相对稳定。

  • 比如像这样的布局要求,如果用一个NestedScrollView里面嵌套多个RecyclerView,就能轻松解决,但是随着越用越久,上滑继续加载,越滑动,消耗的内存越多,而且,一进到这个界面,就开始加载全部的图片,有的用户不需要看到最底下的东西,就导致消耗流量。网速慢的情况下,下面的图片内容也在加载,抢占上面的网络资源,就会下面有的图片,比上面先出现,这样体验不好。如果你试试后台给你1000个item,一下子加载出来,小米6都会吃不消的。

  • 因为NestedScrollView嵌套的缺点,导致我换一种写法,用一个RecyclerView,多种item,来实现这种布局,一是复用了,内存消耗就小了,然后你滑到哪里,就加载到哪,流量消耗也好一些.


  • 先看NestedScrollView实现功能
 <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/item_head"/>

            <include layout="@layout/item_message_1"/>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerView_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerView_product"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@color/line_color"/>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerView_other"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>


        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>
  1. 这是NestedScrollView是布局xml,我用的是25.3.1版本,就不会有无法计算里面RecyclerView的高度问题。
//设置滑动惯性
recyclerViewProduct.setNestedScrollingEnabled(false);
  1. 要记得RecyclerView要设置恢复滑动惯性,不然上下滑动没有惯性了。
       //GridLayoutManager,垂直方向
        gridLayoutManagerProduct = new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false);
       //设置头部占3个,其他占1个
        gridLayoutManagerProduct.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup()
        {
            @Override
            public int getSpanSize(int position)
            {
                if (productAdapter.getItemViewType(position) == ProductAdapter.ITEM_HEAD)
                {
                    return 3;
                } else
                {
                    return 1;
                }
            }
        });
  1. 使用网格布局的话,就用setSpanSizeLookup这个 方法,这个不是说每行3个item,你也能写6,然后分组头占6份,他就占满整行宽度了,item写2份,这样的话,就能每行3个item。这个自己去试一试就懂了,就是return 多少,占几份。
        //滑动监听
        nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener()
        {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY)
            {
                View view = v.getChildAt(0);
                if (view.getHeight() == scrollY + v.getHeight())
                {
                    //加载更多、增加数据
                    otherAdapter.addData(DataOther.getOtherList());
                }
            }
        });

4.NestedScrollView的滑动监听,判断滑动到底部的方法。


  • 接下来说重点,就是使用一个RecyclerView来实现复制的布局,主要讲Adapter。
    //头部
    public static final int ITEM_HEAD = 0;
    //信息
    public static final int ITEM_MESSAGE = 1;
    //图片
    public static final int ITEM_IMAGE = 2;
    //还有别类型
  1. 首先把这个布局进行拆分,我将它分为 6 种,像“头部”部分,还有“信息”部分,只会出现一次的,其他的就会多出出现,
    其实之前,我是将“头部”和“信息”放一起,但是这个item太大了,超出2个屏幕高度,导致显示不全,原因估计是item的高度计算问题,如果不解决问题,可以把item拆成不大于屏幕高度的大小。
    @Override
    public int getItemViewType(int position)
    {
        if (position == 0)
        {
            //确定第一个是头部
            return ITEM_HEAD;
        } else if (position == 1)
        {
            //确定第二个是信息
            return ITEM_MESSAGE;
        } else if (datas.get(position) instanceof BeanImage)
        {
            return ITEM_IMAGE;
        } else if (datas.get(position) instanceof BeanProduct.BeanData)
        {
            return ITEM_PRODUCT;
        } else if (datas.get(position) instanceof BeanOther)
        {
            return ITEM_OTHER;
        } else
        {
            //确定String用户商品头部
            return ITEM_PRODUCT_HEAD;
        }
    }
  1. 在adapter里面,要重写 getItemViewType 这个方法,这个方法呢,就是根据 item 的下标 position 返回对应的 ViewHolder,
    demo可以看到,“头部”和“信息”部分,我能确定他是出现一次,而且位置是固定的,所以,position 为 0 和 1 的时候,我就放回对应的值,其他ViewHolder 我根据对应的数据类型来放回。
   @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
    {
        if (viewType == ITEM_HEAD)
        {
            return new HeadViewHolder(LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_head, parent, false));
        }
        .
        .        
        //还有别的类型,省略
    }
  1. adapter必须重新的 onCreateViewHolder 这个 方法,给我们一个参数 int viewType,这个参数就是上面 getItemViewType 这个方法判断类型后返回的值,我们根据这个值,来 create 对应的 ViewHolder。
    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView)
    {
        super.onAttachedToRecyclerView(recyclerView);
        RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
        if (layoutManager instanceof GridLayoutManager)
        {
            GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
            gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup()
            {
                @Override
                public int getSpanSize(int position)
                {
                    //取多个item的每行占用个数的最小公倍数,
                    //比如item1一行2个,item2一行3个,item3一行1个,就取6
                    //他们对应的return 3,return 2,return 6 
                    if (ITEM_PRODUCT == getItemViewType(position))
                    {
                        return 2;
                    } else if (ITEM_OTHER == getItemViewType(position))
                    {
                        return 3;
                    } else
                    {
                        return 6;
                    }
                }
            });
        }
    }
  1. adapter再写一个方法 onAttachedToRecyclerView,这个方法就能获取到RecyclerView ,然后再获取到 对应的LayoutManager,复制的布局,一般都是用网格(GridLayoutManager),或者瀑布流( StaggeredGridLayoutManager)
    这个看自己的需求了,获取到之后,再根据position对应的ViewHolder,设置他们的占位值(我理解的)。
       //滑动监听
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener()
        {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState)
            {
                super.onScrollStateChanged(recyclerView, newState);
                //判断是否到底部,offset是滑动距离,Extent是控件高度,range是总的内容高度
                if (recyclerView.getChildCount() > 0
                        && recyclerView.computeVerticalScrollOffset() + recyclerView.computeVerticalScrollExtent()
                        >= recyclerView.computeVerticalScrollRange())
                {
                    detailAdapter.addData(DataOther.getOtherList());
                }
            }
        });
  1. 最后来个RecyclerView的滑动到底部,可靠的方法。

这个demo用原始的方法,继承 RecyclerView.Adapter ,将方法一个个重写,好处就是让你理解RecyclerView,可以实现复杂的布局复用,缺点就是写起来,有点费时间,不过学习嘛,搞懂了再去用开源框架。
介绍一些可能用的到的
BaseRecyclerViewAdapterHelper

SwipeLayout 滑动(删除)菜单
SwipeLayout 滑动(删除)菜单

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

推荐阅读更多精彩内容