使用RecyclerView结合jiaozivideoplayer去加载不同类型的布局

想做一个能够实现多种类型布局放在一个RecyclerView中的页面,Demo最终的效果是下面这个样子:

这里写图片描述

可以看到,整个列表中,有视频布局,纯文本的笑话布局,长图片布局,动态图片布局;最后两个可以合并在一个布局里去展示。

所以首先,要显示上面的东西需要用到下面这些控件:

1.节操播放器(大概是很久以前的名字了,这个控件经常改名字)
github地址:https://github.com/lipangit/JiaoZiVideoPlayer
使用方法是添加依赖:

compile 'cn.jzvd:jiaozivideoplayer:6.1.2'

2.Glide,这个就不谈了:

compile 'com.github.bumptech.glide:glide:3.7.0'

3.RecyclerView,这个更不谈了,反正和V7库什么的一起添加依赖吧。还有联网权限就不说了。

之前是使用的ListView去实现这个效果的,不过现在RecyclerView才是大势所趋呀(我是看《第二行代码》里面郭神说的),反正ListView能做的,RecyclerView都可以。

虽然使用过多次RecyclerView,但是具体怎么去实现这么一个效果还是有点小麻烦的,所以就上网看到了下面这两篇大佬(人人皆大佬,唯我一小生)的文章,简洁明了,蛮容易看懂:

RecyclerView用法(一)——展示多种类型Item数据
http://blog.csdn.net/cxc19890214/article/details/49226743

RecyclerView实现多种item布局
http://blog.csdn.net/zhumintao/article/details/53023920

想快速上手的小伙伴建议先去看上面的就OK了,我只是想记录一下我的学习成果,所以写的这篇文章。

如果是在ListView中去实现这样的效果,需要多写两个方法

    @Override  
    public int getItemViewType(int position) {  
        return super.getItemViewType(position);  
    }  

    @Override  
    public int getViewTypeCount() {  
        return super.getViewTypeCount();  
    }  

一个是获取item的类型,另外一个是获取所有类型的数量,如果有5种类型,下面那个方法就返回5。

但是在RecyclerView中,只能看得到第一个方法,而第二个方法就相当于onCreateViewHolder(ViewGroup parent, int viewType)中的第二个参数。

所以创建一个RecyclerView的适配器TypesNewsRecyclerAdapter;

public class TypesNewsRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
   }

之前只有一种数据的时候,上面的ViewHolder就是这种数据的ViewHolder,不过现在有多种数据了,ViewHolder自然不能写成某一种,而是需要写成RecyclerView.ViewHolder,然后同样让所有类型的ViewHolder的继承RecyclerView.ViewHolder。

然后我需要三种类型的ViewHolder,分别是视频,文本,图片,所以首先创建三个标识符:


    private static final int TYPE_VIDEO = 0;  //视频类型
    private static final int TYPE_IMAGE = 1;    //图片类型
    private static final int TYPE_TEXT = 2; //文本类型

接着在getItemViewType中分别给从网络返回的type数据赋值:

    @Override
    public int getItemViewType(int position) {
        ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean data = dataList.get(position);
        String type = data.getType();
        int itemViewType = -1;
        if ("41".equals(type)) {
            itemViewType = TYPE_VIDEO;
        } else if ("10".equals(type)) {
            itemViewType = TYPE_IMAGE;
        } else if ("29".equals(type)) {
            itemViewType = TYPE_TEXT;
        }
        return itemViewType;
    }

然后为每种类型创建对应的ViewHolder:

class VideoViewHolder extends RecyclerView.ViewHolder{
   

    public VideoViewHolder(View itemView) {
            super(itemView);
    }
}

class ImageViewHolder extends RecyclerView.ViewHolder{
   

    public ImageViewHolder(View itemView) {
            super(itemView);
    }
}

class TextViewHolder extends RecyclerView.ViewHolder{
   

    public TextViewHolder(View itemView) {
            super(itemView);
    }
}

可以从最上面的最终效果看到,每一种布局都有相同的部分,

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值