类似支付宝首页——RecycleView多布局结构实现

大家都知道,RecycleView默认只能通过setLayoutManager()方法指定一种布局结构,那么像支付宝首页这样复杂的多布局情况如何处理呢?在ListView中,我们也遇到过这种情况,是通过getItemViewType结合其他方法,通过判断类型来加载不同的布局。在RecycleView中也同样使用,今天我们主要介绍RecycleView多布局实现,其中布局嵌套了GridView,有些坑需要注意,避免陷入。

一、效果图

废话不多说,献上效果图。



从图中可以看出,一共有三种布局样式。第一种:头布局,包含各种类型的新闻频道。第二种布局:普通的新闻。第三种布局:多图图集新闻。

二、多布局实现的思路

步骤一、getItemViewType()方法判断不同的布局,返回判断结果。

步骤二、创建不同的ViewHolder类,针对不同的布局类型,进行对应的布局内控件的初始化。

步骤三、onCreateViewHolder()方法根据第一步的判断结果,得到viewType,根据viewType值,实例化不同类型的ViewHolder对象。

步骤四、onBindViewHolder()方法判断holder所属类型,进行相对应类型的布局内控件内容的赋值。

以上就是实现多布局的思路,很简单(可能描述不到位,不易理解),下面我们以代码的形式更直观的来了解具体步骤。

三、RecycleView多布局实现代码

首先定义三种类型常量

 //新闻模式
    private static final int TYPE_SINGLE = 0;
    //图集模式
    private static final int TYPE_MULTI = 1;
    //头布局模式
    private static final int TYPE_HEADER = 2;

getItemViewType()方法判断不同的布局,返回判断结果

@Override
    public int getItemViewType(int position) {
        //所有的新闻详情数据,在第一个位置自己手动加入了一个假的新闻数据,把它的title设置为“头布局”
        NewsInfo info = list.get(position);
        //识别出“头布局”,则是第一个数据,把它归于头布局类型
        if(info.getTitle().endsWith("头布局")){
            return TYPE_HEADER;
        }
       //有新闻具体内容,是普通新闻
        if (!TextUtils.isEmpty(info.getDigest()))
        {
            return TYPE_SINGLE;
        }
      //其他情况,是图集新闻
        return TYPE_MULTI;
    }

创建不同的ViewHolder类,针对不同的布局类型,进行对应的布局内控件的初始化。

省略了具体的初始化操作

 public class SingleViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
         .......
         .......
        public SingleViewHolder(View itemView) {
            super(itemView);
         .......
         .......
        }

        @Override
        public void onClick(View view) {
            Toast.makeText(context,"点击了",Toast.LENGTH_SHORT).show();
        }
    }
    public class MultiViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
         .......
         .......

        public MultiViewHolder(View itemView) {
            super(itemView);
        .......
        .......
        }

        @Override
        public void onClick(View view) {
            Toast.makeText(context,"点击了",Toast.LENGTH_SHORT).show();
        }
    }
    public class HeaderViewHolder extends RecyclerView.ViewHolder{
         .......
         .......
        public HeaderViewHolder(View itemView) {
            super(itemView);
          .......
          .......
        }
    }

onCreateViewHolder()方法根据第一步的判断结果,得到viewType,根据viewType值,实例化不同类型的ViewHolder对象。

@Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case TYPE_SINGLE:
                return new SingleViewHolder(inflater.inflate(R.layout.item_news, parent, false));
            case TYPE_MULTI:
                return new MultiViewHolder(inflater.inflate(R.layout.item_news_photo, parent, false));
            case TYPE_HEADER:
                return new HeaderViewHolder(inflater.inflate(R.layout.item_news_header,parent,false));
        }
        return null;
    }

onBindViewHolder()方法判断holder所属类型,进行相对应类型的布局内控件内容的赋值。

@Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        //设置不同的布局内控件的值
        if (holder instanceof SingleViewHolder) {
            setNormalItemValues((SingleViewHolder) holder,position);
        }else if(holder instanceof  MultiViewHolder){
            setMultiItemValues((MultiViewHolder) holder,position);
        }else{
            setHeaderItemValues((HeaderViewHolder) holder);
        }
    }

针对不同类型,设置布局内控件的值的具体内容就不介绍了,比较繁多,下面有源码链接。

由于本例中头布局是个GridView,需要注意的一点是RecycleView中嵌套GridView会出现只显示一行的问题。下面给出具体解决方法:

setHeaderItemValues((HeaderViewHolder) holder);中,主动测量出GridView的高度,并设置给布局。本例中默认GridView是两行。

 //解决GridView只显示一行的原因 主动设置GridView的高度
        ViewGroup.LayoutParams params = holder.mGridView.getLayoutParams();
        View view = mAdapter.getView(0, null, holder.mGridView);
        view.measure(0,0);
        int height =view.getMeasuredHeight();
        int totalHeight = holder.mGridView.getVerticalSpacing() * 2 + height * 2;
        params.height = totalHeight;
        holder.mGridView.setLayoutParams(params);

源码地址比较乱,直接看NewsFragment相关内容即可。

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

推荐阅读更多精彩内容