本文为菜鸟窝作者蒋志碧的连载。“从 0 开始开发一款直播 APP ”系列来聊聊时下最火的直播 APP，如何完整的实现一个类"腾讯直播"的商业化项目
视频地址：http://www.cniao5.com/course/10121
【从 0 开始开发一款直播 APP】3.1 高层封装之 Adapter — ListView & GridView
【从 0 开始开发一款直播 APP】3.2 高层封装之 Adapter — RecyclerView 实现单布局展示
【从 0 开始开发一款直播 APP】3.3 高层封装之 Adapter -- RecyclerView 实现多条目展示
【从 0 开始开发一款直播 APP】3.4 高层封装之 Adapter -- RecyclerView 优雅的添加 Header、Footer
一、多条目 Adapter 封装实现聊天界面
上章已经讲解了 RecyclerView 的基本封装，这次对于多条目展示进行讲解，效果如下：
RecyclerView.Adapter 的 getItemViewType(int position) 这个方法，可以根据当前位置获取一个 viewType 最终会传到 onCreateViewHolder() 这个方法中， 通过一个标识来判断条目的布局。
1.1、定义一个接口，用来获取布局
public interface MutipleTypeSupport<T> {
//根据当前条目获取布局
int getLayoutId(T t);
}
1.2、在原来的Adapter基础上做修改，将MutipleTypeSupport接口传入，让用户传递布局类型
private MutipleTypeSupport<T> mMutipleTypeSupport;
public RecyclerViewAdapter(Context context,List<T> datas,MutipleTypeSupport typeSupport){
this(context,-1,datas);
this.mMutipleTypeSupport = typeSupport;
}
1.3、根据 getItemViewType 获取当前位置的 item 类型， position 就是当前 item 的值
//调用 onCreateViewHolder() 方法之前调用 getItemViewType()
@Override
public int getItemViewType(int position) {
if (mMutipleTypeSupport != null){
return mMutipleTypeSupport.getLayoutId(mDatas.get(position));
}
return super.getItemViewType(position);
}
@Override
public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//判断是否需要多布局
if (mMutipleTypeSupport != null){
mLayoutId = viewType;
}
View itemView = mInflater.inflate(mLayoutId,parent,false);
return new RecyclerViewHolder(itemView);
}
1.4、其它方法不变，所有代码
public abstract class RecyclerViewAdapter<T> extends RecyclerView.Adapter<RecyclerViewHolder> {
protected int mLayoutId;
protected List<T> mDatas;
protected Context mContext;
private LayoutInflater mInflater;
private MutipleTypeSupport<T> mMutipleTypeSupport;
public RecyclerViewAdapter(Context context,List<T> datas,MutipleTypeSupport typeSupport){
this(context,-1,datas);
this.mMutipleTypeSupport = typeSupport;
}
public RecyclerViewAdapter(Context context, int layoutId, List<T> datas) {
this.mContext = context;
this.mLayoutId = layoutId;
this.mDatas = datas;
this.mInflater = LayoutInflater.from(mContext);
}
//调用onCreateViewHolder方法之前调用getItemViewType
@Override
public int getItemViewType(int position) {
//如果支持多布局，返回所有布局
if (mMutipleTypeSupport != null){
return mMutipleTypeSupport.getLayoutId(mDatas.get(position));
}
return super.getItemViewType(position);
}
@Override
public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//多布局支持
if (mMutipleTypeSupport != null){
mLayoutId = viewType;
}
View itemView = mInflater.inflate(mLayoutId,parent,false);
return new RecyclerViewHolder(itemView);
}
@Override
public void onBindViewHolder(RecyclerViewHolder holder, final int position) {
//ViewHolder优化
bindData(holder,mDatas.get(position),position);
}
/**
* 把必要参数传进去
* @param holder RecyclerViewHolder
* @param t 数据
* @param position 当前位置
*/
protected abstract void bindData(RecyclerViewHolder holder, T t,int position);
@Override
public int getItemCount() {
return mDatas.size();
}
}
封装完就写的 Demo 看看效果吧。
二、多布局 Demo 实现
2.1、 MutipleAdapter 继承 RecyclerViewAdapter ，通过 getLayoutId() 传递布局
public class MutipleAdaper extends RecyclerViewAdapter<Item> {
public MutipleAdaper(Context context, List<Item> datas) {
super(context, datas, new MutipleTypeSupport<Item>() {
@Override
public int getLayoutId(Item item) {
if (item.getType() == 1){//该处1是通过 item 传过来的
return R.layout.list_item;
}else {
return R.layout.list_item1;
}
}
});
}
@Override
protected void bindData(RecyclerViewHolder holder, final Item item, int position) {
holder.setText(R.id.tv1,item.getTv1())
.setImageResource(R.id.img,item.getRes())
.setOnClickListener(R.id.tv1, new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext,item.getTv1(),Toast.LENGTH_SHORT).show();
}
});
}
}
**2.2、 AdapterActivity **
public class AdapterActivity extends BaseActivity {
private MutipleAdaper mMutipleAdaper;
private RecyclerView mRecyclerView;
@Override
protected void setToolbar() {
}
@Override
protected void setListener() {
}
//填充数据
@Override
protected void initData() {
Datas = new ArrayList<>();
for (int i = 1; i <= 30; i++) {
if (i % 2 == 0) {
Datas.add(new Item(R.drawable.tab_publish_normal,"我 get 新技能 " + i,0));//根据 Item 类 最后一个参数确定填充数据的不同
}else {
Datas.add(new Item(R.drawable.tab_publish_normal,"你 get 新技能 " + i,1));
}
}
mMutipleAdaper = new MutipleAdaper(this,Datas);
mRecyclerView.setAdapter(mMutipleAdaper);
}
@Override
protected void initView() {
mRecyclerView = obtainView(R.id.recyclerView);
mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST));
mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
}
@Override
protected int getLayoutId() {
return R.layout.activity_adapter;
}
}
2.3、 Item 类
public class Item {
private int res;//图片
private String tv1;//文字
private int type;//类型
public Item(int res, String tv1,int type) {
this.res = res;
this.tv1 = tv1;
this.type = type;
}
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public int getRes() {
return res;
}
public void setRes(int res) {
this.res = res;
}
public String getTv1() {
return tv1;
}
public void setTv1(String tv1) {
this.tv1 = tv1;
}
}
对于RecyclerView 实现多布局讲解完毕，下一章继续为大家讲解 RecyclerView 封装之优雅添加 Header、Footer。
总结
多条目的封装
1、在单条目基础上通过构造函数传递一个提供布局的接口，通过 ViewType 类型判断到底使用什么布局。
2、在 getItemViewType() 方法中判断布局类型，在 onCreateViewHolder() 方法中判断是否需要多布局，根据用户需要实现不同的构造函数>#####本文为菜鸟窝作者蒋志碧的连载。“从 0 开始开发一款直播 APP ”系列来聊聊时下最火的直播 APP，如何完整的实现一个类"腾讯直播"的商业化项目
视频地址：http://www.cniao5.com/course/10121
【从 0 开始开发一款直播 APP】3.1 高层封装之 Adapter — ListView & GridView
【从 0 开始开发一款直播 APP】3.2 高层封装之 Adapter — RecyclerView 实现单布局展示
【从 0 开始开发一款直播 APP】3.3 高层封装之 Adapter -- RecyclerView 实现多条目展示
【从 0 开始开发一款直播 APP】3.4 高层封装之 Adapter -- RecyclerView 优雅的添加 Header、Footer
一、多条目 Adapter 封装实现聊天界面
上章已经讲解了 RecyclerView 的基本封装，这次对于多条目展示进行讲解，效果如下：
RecyclerView.Adapter 的 getItemViewType(int position) 这个方法，可以根据当前位置获取一个 viewType 最终会传到 onCreateViewHolder() 这个方法中， 通过一个标识来判断条目的布局。
1.1、定义一个接口，用来获取布局
public interface MutipleTypeSupport<T> {
//根据当前条目获取布局
int getLayoutId(T t);
}
1.2、在原来的Adapter基础上做修改，将MutipleTypeSupport接口传入，让用户传递布局类型
private MutipleTypeSupport<T> mMutipleTypeSupport;
public RecyclerViewAdapter(Context context,List<T> datas,MutipleTypeSupport typeSupport){
this(context,-1,datas);
this.mMutipleTypeSupport = typeSupport;
}
1.3、根据 getItemViewType 获取当前位置的 item 类型， position 就是当前 item 的值
//调用 onCreateViewHolder() 方法之前调用 getItemViewType()
@Override
public int getItemViewType(int position) {
if (mMutipleTypeSupport != null){
return mMutipleTypeSupport.getLayoutId(mDatas.get(position));
}
return super.getItemViewType(position);
}
@Override
public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//判断是否需要多布局
if (mMutipleTypeSupport != null){
mLayoutId = viewType;
}
View itemView = mInflater.inflate(mLayoutId,parent,false);
return new RecyclerViewHolder(itemView);
}
1.4、其它方法不变，所有代码
public abstract class RecyclerViewAdapter<T> extends RecyclerView.Adapter<RecyclerViewHolder> {
protected int mLayoutId;
protected List<T> mDatas;
protected Context mContext;
private LayoutInflater mInflater;
private MutipleTypeSupport<T> mMutipleTypeSupport;
public RecyclerViewAdapter(Context context,List<T> datas,MutipleTypeSupport typeSupport){
this(context,-1,datas);
this.mMutipleTypeSupport = typeSupport;
}
public RecyclerViewAdapter(Context context, int layoutId, List<T> datas) {
this.mContext = context;
this.mLayoutId = layoutId;
this.mDatas = datas;
this.mInflater = LayoutInflater.from(mContext);
}
//调用onCreateViewHolder方法之前调用getItemViewType
@Override
public int getItemViewType(int position) {
//如果支持多布局，返回所有布局
if (mMutipleTypeSupport != null){
return mMutipleTypeSupport.getLayoutId(mDatas.get(position));
}
return super.getItemViewType(position);
}
@Override
public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//多布局支持
if (mMutipleTypeSupport != null){
mLayoutId = viewType;
}
View itemView = mInflater.inflate(mLayoutId,parent,false);
return new RecyclerViewHolder(itemView);
}
@Override
public void onBindViewHolder(RecyclerViewHolder holder, final int position) {
//ViewHolder优化
bindData(holder,mDatas.get(position),position);
}
/**
* 把必要参数传进去
* @param holder RecyclerViewHolder
* @param t 数据
* @param position 当前位置
*/
protected abstract void bindData(RecyclerViewHolder holder, T t,int position);
@Override
public int getItemCount() {
return mDatas.size();
}
}
封装完就写的 Demo 看看效果吧。
二、多布局 Demo 实现
2.1、 MutipleAdapter 继承 RecyclerViewAdapter ，通过 getLayoutId() 传递布局
public class MutipleAdaper extends RecyclerViewAdapter<Item> {
public MutipleAdaper(Context context, List<Item> datas) {
super(context, datas, new MutipleTypeSupport<Item>() {
@Override
public int getLayoutId(Item item) {
if (item.getType() == 1){//该处1是通过 item 传过来的
return R.layout.list_item;
}else {
return R.layout.list_item1;
}
}
});
}
@Override
protected void bindData(RecyclerViewHolder holder, final Item item, int position) {
holder.setText(R.id.tv1,item.getTv1())
.setImageResource(R.id.img,item.getRes())
.setOnClickListener(R.id.tv1, new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext,item.getTv1(),Toast.LENGTH_SHORT).show();
}
});
}
}
**2.2、 AdapterActivity **
public class AdapterActivity extends BaseActivity {
private MutipleAdaper mMutipleAdaper;
private RecyclerView mRecyclerView;
@Override
protected void setToolbar() {
}
@Override
protected void setListener() {
}
//填充数据
@Override
protected void initData() {
Datas = new ArrayList<>();
for (int i = 1; i <= 30; i++) {
if (i % 2 == 0) {
Datas.add(new Item(R.drawable.tab_publish_normal,"我 get 新技能 " + i,0));//根据 Item 类 最后一个参数确定填充数据的不同
}else {
Datas.add(new Item(R.drawable.tab_publish_normal,"你 get 新技能 " + i,1));
}
}
mMutipleAdaper = new MutipleAdaper(this,Datas);
mRecyclerView.setAdapter(mMutipleAdaper);
}
@Override
protected void initView() {
mRecyclerView = obtainView(R.id.recyclerView);
mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST));
mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
}
@Override
protected int getLayoutId() {
return R.layout.activity_adapter;
}
}
2.3、 Item 类
public class Item {
private int res;//图片
private String tv1;//文字
private int type;//类型
public Item(int res, String tv1,int type) {
this.res = res;
this.tv1 = tv1;
this.type = type;
}
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public int getRes() {
return res;
}
public void setRes(int res) {
this.res = res;
}
public String getTv1() {
return tv1;
}
public void setTv1(String tv1) {
this.tv1 = tv1;
}
}
对于RecyclerView 实现多布局讲解完毕，下一章继续为大家讲解 RecyclerView 封装之优雅添加 Header、Footer。
总结
多条目的封装
1、在单条目基础上通过构造函数传递一个提供布局的接口，通过 ViewType 类型判断到底使用什么布局。
2、在 getItemViewType() 方法中判断布局类型，在 onCreateViewHolder() 方法中判断是否需要多布局，根据用户需要实现不同的构造函数
更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。 转载请注明出处，本文出自菜鸟窝，原文链接http://www.cniao5.com/forum/thread/f5906bb6122f11e7b98900163e0230fa
关注公众号免费领取“N套客户端实战项目教程”
网友评论