RecycleView多类型布局

最新推荐文章于 2024-07-18 11:35:02 发布
最新推荐文章于 2024-07-18 11:35:02 发布
阅读量1.3k 收藏 6
点赞数 1
分类专栏： Android

在项目中列表是基本都会用到的，然而在显示列表时，我们需要的数据可能需要不止一种item显示，对于复杂的数据就需要多种item，以不同的样式显示出来，这样效果是很棒的，我们先看一下效果
这里写图片描述

这里写图片描述

我们可以看到，这个RecyclerView中有多种item显示出来，那么具体怎么实现呢，其实在RecyclerView中，我们可以重写方法getItemViewType()，这个方法会传进一个参数position表示当前是第几个Item，然后我们可以通过position拿到当前的Item对象，然后判断这个item对象需要那种视图，返回一个int类型的视图标志，然后在onCreatViewHolder方法中给引入布局，这样就能够实现多种item显示了，讲了这么多我们看一下具体的例子

[java] view plain copy

@Override  
public int getItemViewType(int position) {  
    if(list.size() == 0){  
        return EMPTY_VIEW;  
    } else if(list.get(position) == null){  
        return PROGRESS_VIEW;  
    } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){  
        return IMAGE_VIEW;  
    } else {  
        return super.getItemViewType(position);  
    }  
}

首先我们重写了getItemViewType这个方法，在这个方法中根据position对item对象做了一些判断，如果存储item对象的集合大小为空，返回空view标识（这里为1），如果item对象为null，返回进度条标识，这个主要是用于实现下拉加载更多，如果item对象类型属于图片类型，就返回图片类型对应的Item，这个就是效果图中的第一个Item类型，否则就是其它类型，也就是效果图中的另一种item布局，然后我们在onCreatViewHolder中具体的为每一种类型引入其布局

[java] view plain copy

@Override  
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
    View view;  
    if(viewType == PROGRESS_VIEW){  
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);  
        return new ProgressViewHolder(view);  
    } else if(viewType == EMPTY_VIEW){  
        return null;  
    } else if(viewType == IMAGE_VIEW){  
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);  
        return new ImageViewHolder(view);  
    } else {  
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);  
        return new NewsViewHolder(view);  
    }  
}

上面的代码就是具体为每种viewType引入其对应的布局，这样就基本实现了多种item布局，但是仅仅是这些还不够，因为我们还要对每种item设置数据，所以还要对每种item写一个VIewHolder来为item显示数据

[java] view plain copy

class NewsViewHolder extends RecyclerView.ViewHolder{  

    @BindView(R.id.news_title)TextView title;  
    @BindView(R.id.news_digest)TextView digest;  
    @BindView(R.id.news_time)TextView time;  
    @BindView(R.id.news_src)ImageView image;  

    public NewsViewHolder(View itemView) {  
        super(itemView);  
        ButterKnife.bind(this, itemView);  
    }  
}  

class ImageViewHolder extends RecyclerView.ViewHolder{  

    @BindView(R.id.news_title) TextView title;  
    @BindView(R.id.image_left) ImageView imageLeft;  
    @BindView(R.id.image_right) ImageView imageRight;  
    @BindView(R.id.image_middle) ImageView imageMiddle;  
    @BindView(R.id.news_time) TextView time;  

    public ImageViewHolder(View itemView) {  
        super(itemView);  
        ButterKnife.bind(this, itemView);  
    }  
}  

class ProgressViewHolder extends RecyclerView.ViewHolder {  

    @BindView(R.id.progressBar) ProgressBar progressBar;  
    @BindView(R.id.textView) TextView textView;  

    public ProgressViewHolder(View itemView) {  
        super(itemView);  
        ButterKnife.bind(this, itemView);  
    }  
}

上面就是item对应的几个ViewHolder，判断viewHolder属于那种对象，然后在onBindViewHolder中根据对应的ViewHolder对其控件设置数据并显示

[java] view plain copy

@Override  
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {  
    holder.itemView.setOnClickListener(new View.OnClickListener() {  
        @Override  
        public void onClick(View v) {  
            clickListener.onItemClick(v, position);  
        }  
    });  
    if(holder instanceof NewsViewHolder){  
        NewsViewHolder viewHolder = (NewsViewHolder)holder;  
        viewHolder.title.setText(list.get(position).getTitle());  
        viewHolder.time.setText(list.get(position).getTime());  
        /** 
         * Glide加载图片 
         */  
        Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);  
        if(list.get(position).getType().equals(News.TEXT_NEWS)){  
            viewHolder.digest.setText(list.get(position).getDigest());  
        } else {  
            viewHolder.digest.setText("");  
        }  
    } else if(holder instanceof ImageViewHolder){  
        ImageViewHolder viewHolder = (ImageViewHolder)holder;  
        viewHolder.title.setText(list.get(position).getTitle());  
        viewHolder.time.setText(list.get(position).getTime());  
        setItemImage(viewHolder, list, position);  
    } else if(holder instanceof ProgressViewHolder){  
        ProgressViewHolder viewHolder = (ProgressViewHolder)holder;  
        viewHolder.progressBar.setIndeterminate(true);  

    }  
}

整个过程基本就是这样，这种方式在项目中经常会用到，我们就可以这样去处理，下拉加载更多就可以这样实现，在加载完数据后再往对象集合中传入null，然后判断如果出现null就加载progressBar布局，再加上Google官方的SwipeRefreshLayout，下拉刷新，上拉加载就搞定了，其实很容易，而且也有点Material Design 的感觉~~

看下Adapter的全部代码

[java] view plain copy

package com.zmt.e_read.Adapter;  

import android.content.Context;  
import android.support.v7.widget.RecyclerView;  
import android.util.DisplayMetrics;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.ImageView;  
import android.widget.TextView;  

import com.bumptech.glide.Glide;  
import com.zmt.e_read.Module.News;  
import com.zmt.e_read.Module.OnItemClickListener;  
import com.zmt.e_read.R;  
import com.zmt.e_read.Utils.ProgressViewHolder;  

import java.util.Collection;  
import java.util.Collections;  
import java.util.List;  

import butterknife.BindView;  
import butterknife.ButterKnife;  

/** 
 * Created by Dangelo on 2016/9/27. 
 */  
public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {  

    private final int EMPTY_VIEW = 1;  
    private final int PROGRESS_VIEW = 2;  
    private final int IMAGE_VIEW = 3;  

    private Context context;  
    private List<News> list;  
    private OnItemClickListener clickListener;  

    public NewsAdapter(Context context, List<News> list, OnItemClickListener clickListener) {  
        this.context = context;  
        this.list = list;  
        this.clickListener = clickListener;  
    }  

    public void addOnItemClickListener(OnItemClickListener clickListener){  
        this.clickListener = clickListener;  
    }  

    @Override  
    public int getItemViewType(int position) {  
        if(list.size() == 0){  
            return EMPTY_VIEW;  
        } else if(list.get(position) == null){  
            return PROGRESS_VIEW;  
        } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){  
            return IMAGE_VIEW;  
        } else {  
            return super.getItemViewType(position);  
        }  
    }  

    @Override  
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
        View view;  
        if(viewType == PROGRESS_VIEW){  
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);  
            return new ProgressViewHolder(view);  
        } else if(viewType == EMPTY_VIEW){  
            return null;  
        } else if(viewType == IMAGE_VIEW){  
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);  
            return new ImageViewHolder(view);  
        } else {  
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);  
            return new NewsViewHolder(view);  
        }  
    }  

    @Override  
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {  
        holder.itemView.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View v) {  
                clickListener.onItemClick(v, position);  
            }  
        });  
        if(holder instanceof NewsViewHolder){  
            NewsViewHolder viewHolder = (NewsViewHolder)holder;  
            viewHolder.title.setText(list.get(position).getTitle());  
            viewHolder.time.setText(list.get(position).getTime());  
            /** 
             * Glide加载图片 
             */  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);  
            if(list.get(position).getType().equals(News.TEXT_NEWS)){  
                viewHolder.digest.setText(list.get(position).getDigest());  
            } else {  
                viewHolder.digest.setText("");  
            }  
        } else if(holder instanceof ImageViewHolder){  
            ImageViewHolder viewHolder = (ImageViewHolder)holder;  
            viewHolder.title.setText(list.get(position).getTitle());  
            viewHolder.time.setText(list.get(position).getTime());  
            setItemImage(viewHolder, list, position);  
        } else if(holder instanceof ProgressViewHolder){  
            ProgressViewHolder viewHolder = (ProgressViewHolder)holder;  
            viewHolder.progressBar.setIndeterminate(true);  

        }  
    }  

    public void setItemImage(ImageViewHolder viewHolder, List<News> list, int position){  
        viewHolder.imageMiddle.setVisibility(View.VISIBLE);  
        viewHolder.imageRight.setVisibility(View.VISIBLE);  
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();  
        if(list.get(position).getImageUrl().size() == 1){  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(displayMetrics.widthPixels - dpToPx(10), dpToPx(90))  
                    .centerCrop().into(viewHolder.imageLeft);  
            viewHolder.imageMiddle.setVisibility(View.GONE);  
            viewHolder.imageRight.setVisibility(View.GONE);  
        } else if(list.get(position).getImageUrl().size() == 2){  
            int imageWidth = (displayMetrics.widthPixels - dpToPx(20)) / 2;  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageLeft);  
            Glide.with(context).load(list.get(position).getImageUrl().get(1))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageMiddle);  
            viewHolder.imageRight.setVisibility(View.GONE);  
        } else if(list.get(position).getImageUrl().size() >= 3){  
            int imageWidth = (displayMetrics.widthPixels - dpToPx(30)) / 3;  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageLeft);  
            Glide.with(context).load(list.get(position).getImageUrl().get(1))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageMiddle);  
            Glide.with(context).load(list.get(position).getImageUrl().get(2))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageRight);  
        }  
    }  

    @Override  
    public int getItemCount() {  
        return list.size();  
    }  

    public int dpToPx(float dp){  
        float px = context.getResources().getDisplayMetrics().density;  
        return (int)(dp * px + 0.5f);  
    }  

    class NewsViewHolder extends RecyclerView.ViewHolder{  

        @BindView(R.id.news_title)TextView title;  
        @BindView(R.id.news_digest)TextView digest;  
        @BindView(R.id.news_time)TextView time;  
        @BindView(R.id.news_src)ImageView image;  

        public NewsViewHolder(View itemView) {  
            super(itemView);  
            ButterKnife.bind(this, itemView);  
        }  
    }  

    class ImageViewHolder extends RecyclerView.ViewHolder{  

        @BindView(R.id.news_title) TextView title;  
        @BindView(R.id.image_left) ImageView imageLeft;  
        @BindView(R.id.image_right) ImageView imageRight;  
        @BindView(R.id.image_middle) ImageView imageMiddle;  
        @BindView(R.id.news_time) TextView time;  

        public ImageViewHolder(View itemView) {  
            super(itemView);  
            ButterKnife.bind(this, itemView);  
        }  
    }  

    <pre name="code" class="java">    class ProgressViewHolder extends RecyclerView.ViewHolder {  

        @BindView(R.id.progressBar) ProgressBar progressBar;  
        @BindView(R.id.textView) TextView textView;  

        public ProgressViewHolder(View itemView) {  
            super(itemView);  
            ButterKnife.bind(this, itemView);  
        }  
    }

}

项目地址：https://github.com/xiyouZmt/E-Read

转载：https://blog.csdn.net/zhumintao/article/details/53023920#commentsedit

kururunga
关注
专栏目录
RecycleView多Type布局的实现以及点击事件
故河的博客
08-22 640
RecycleView是开发中最常用的组件之一，因其优秀的回收机制而得到了广泛使用。最常用的效果就是用来实现复杂多布局列表。 所以当项目里需要实现如下布局时，我最先想到的便是使用Recycleview。 可以看到，整个Recycleview是方向垂直，而第一个itrm中有个水平滑动的recycleview。 而我们的demo实现的效果如图： 现在让我们开始实现这一步骤： 1.先编...
RecyclerView加载多类型item 实现淘宝首页布局
11-01
主要为大家介绍如何用RecycleView来实现淘宝首页复杂的布局，做电商类app的小伙伴们可以略作参考。
一个Adapter+recycleview实现多种布局，区分布局中
qq_46906413的博客
11-19 9460
最近因为需要所以学习了一下recycleview,使用Adapter修饰器修饰，使用一个Adapter+recycleview实现多种布局，而不是之前的三个Adapter在同一个recycleview中实现三个布局。点击区分布局中的gridview的图片和姓名。 嗯~，算是之前的在同一个recycleview中实现三个不同布局的升级版吧。因为之前使用了三个Adapter【修饰器】，而这个只是用了一个Adapter【修饰器】
recyclerview实现多种布局
最新发布
qq_68599810的博客
07-18 322
recyclerview实现多种布局
Android基础进阶 - RecyclerView列表加载多类型视图
Android、前端、小程序、后端
02-26 2042
你是否会经常见到在同一个 RecyclerView 列表中加载多种不同的布局效果？最近写了一篇 ConcatAdapter 相关内容，发现虽然之前一直在使用多类型视图列表，但从未记录过，故重新记录于此。
RecyclerView 实现多种布局
11-10
写了个Demo，RecyclerView实现不同布局的demo，上半部分是Gridview，下半部分是ListView，目前还没有添加点击的监听回调，大家可以自行添加。
RecyclerView中的多种布局
waynee
07-14 3876
概念RecyclerView可以用于加载不同的视图类型，基于服务器的反馈，可能会要求加载不同的布局。我们需要在适配器中重写的方法：getItemViewType(),onCreatViewHolder(),onBindViewHolder()实现首先在上一节的基础上我们要替换掉基础的SimpleItemRecyclerViewAdapter 而是用ComplexRecyclerViewAdapter
多类型的RecyclerView
ljngya的博客
10-14 428
1.由于recyclerView没有提供像Listview一样的addheadView的方法，就需要我们自己设置head。 布局很简单上下两个头和脚布局。内容写了一些假数据。贴一下adapter中的代码：public class HeadFootAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { /**
RecyclerView的加载显示多种布局
热门推荐
a516972602的博客
03-04 2万+
RecyclerView是对ListView的封装，所以ListView上能用的方法对RecyclerView同样适用，并且会更简单在实际开发中，我们可能需要一个列表，显示多种布局，getItemViewType()方法完美解决了这个问题，在BaseAdapter中还有getViewTypeCount()这个方法。这里我们使用RecyclerView.Adapter。只用getItemViewTyp
RecycleView实现多布局
luweicheng24的博客
03-23 1014
自从RecycleView推出后，其功能的强大让你纯粹能忘掉ListView和GridView等列表布局，因为RecycleView能够代替他们，而且使代码更加健壮，今天要说的是目前电商最流行的布局，如下图： 图中显示的就是一个RecycleView中实现排列的布局，下面我在一个RecycleView中运用了两种布局： 下面我们看一下具体的代码实现，我先创建了两种类型的数据，OneTypeB
Android RecyclerView多类型布局卡片解决方案
01-05
背景 随着公司业务越来越复杂，在同一个列表中需要展示各种类型的数据。 总体结构 ItemViewAdapter： 每种类型的卡片分别都是不同的ItemViewAdapter ItemViewAdapterFactory： 使用ItemViewAdapterFactory根据不同数据对应不同的ItemViewAdapter MultiRecyclerViewAdapter： MultiRecyclerViewAdapter就是RecylerView.Adapter,并是个ItemViewAdapterFactory。 具体只要继承MultiRecyclerViewAdapt
RecyclerView展示多种布局
04-19
RecyclerView展示多种布局
recycleview多布局的使用
12-21
以上就是关于“recycleview多布局的使用”的详细解释，涵盖了item高度自适应、处理多个list的显示以及添加点击事件等关键知识点。实际应用中，你可能需要根据具体需求进行调整和优化。记住，理解这些原理并熟练运用...
RecycleView 实现复杂首页布局
02-27
在实现复杂首页布局时，RecycleView 可能需要包含多种类型的视图项。这可以通过在 Adapter 中实现 getItemViewType() 方法来处理。返回不同的值表示不同类型的视图，然后在 onCreateViewHolder() 中创建对应类型的 ...
RecycleView实现多布局可展开列表
findhappy117的博客
09-15 1727
代码地址如下：http://www.demodashi.com/demo/13193.html 前言 在开发的时候，我们不免会遇到这么一种数据展示，该数据有以下特征： 1. 数据要以列表形式展示 2. 每条数据要分多行展示，如第一行展示姓名，第二行展示培训课程，第三行显示培训时间 3. 每行展示的数据样式不一样，姓名要求展示在左边，时间展示在右边 4. 更糟糕的是第二行展示...
RecyclerView实现多type页面
Android 开发架构
06-06 1432
目录介绍 先看看实际需求 adapter实现多个type 这样写的弊端 如何优雅实现adapter封装 01.先看看实际需求 比如一个APP的首页，包含Banner区、广告区、文本内容、图片内容、新闻内容等等。 RecyclerView 可以用ViewType来区分不同的item,也可以满足需求，但还是存在一些问题，比如： 在item过多逻辑复杂列表界面，Adapter里面的代码量庞大，逻辑复...
recycleview中适配多个item布局，并且对每条item进行操作
BIGJUZI的博客
06-12 404
这种现象在Android里面可以简单的理解为一个recycle view里面写了多个不同的item（示例展示的就是写了三个item）我们都知道大部分情况使用recycle view的时候都是写一个item,那像这种多个item的时候我们应该怎么实现呢？对于getItemViewType()方法的理解就是，根据传来的position值（每个item都有一个position值，值从0开始递增），来判断这个位置需要展示哪一种item，而返回的总条数就是数据的总大小啦。以下是我写的一个示例。
recycleview
10-02
RecycleView 是一个用于在 Android 应用中展示大量数据的高效视图组件。它可以用于显示列表、网格或瀑布流等不同类型的布局，并支持高度的重用和回收。这个组件可以大大提高应用程序的性能，因为它只会在屏幕上显示可见项，而不是将所有数据一次性加载到内存中。 使用 RecycleView，您需要创建一个适配器（Adapter）来将数据绑定到视图上，并且可以自定义视图的外观和交互。您可以使用默认的适配器（如 ArrayAdapter）或自定义适配器来满足特定的需求。 以下是一个示例代码，演示如何使用 RecycleView 在一个简单的列表中显示一组文本项： ```java public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { private List<String> mData; public MyAdapter(List<String> data) { mData = data; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { String item = mData.get(position); holder.textView.setText(item); } @Override public int getItemCount() { return mData.size(); } public static class ViewHolder extends RecyclerView.ViewHolder { public TextView textView; public ViewHolder(View itemView) { super(itemView); textView = itemView.findViewById(R.id.text_view); } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值