使用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);
}
}

可以从最上面的最终效果看到，每一种布局都有相同的部分，把这一部分的实例写在同一个类中，然后初始化布局写在同一个方法中，比如下面这样：

//公共视图
static class CommonView{
...
//用户信息
ImageView iv_headpic;
TextView tv_name;
...
}

//初始化方法
private void initCommonView(View itemView, CommonView commonView) {
...

commonView.iv_headpic = (ImageView) itemView.findViewById(R.id.iv_headpic);
commonView.tv_name = (TextView) itemView.findViewById(R.id.tv_name);
...
}

接着非常简单的，在之前创建的各类型对应的ViewHolder把这些公共部分添加进去，同时初始化该类型特有的控件：

class VideoViewHolder extends RecyclerView.ViewHolder{
CommonView commonView = new CommonView();
JZVideoPlayerStandard jcv_videoplayer; // 节操播放器

public VideoViewHolder(View itemView) {
super(itemView);
//在这里实例化特有的
jcv_videoplayer = (JZVideoPlayerStandard) itemView.findViewById(R.id.jcv_videoplayer);
initCommonView(itemView, commonView);

}

}

class ImageViewHolder extends RecyclerView.ViewHolder{
CommonView commonView = new CommonView();
ImageView iv_image_icon;

public ImageViewHolder(View itemView) {
super(itemView);
iv_image_icon = (ImageView) itemView.findViewById(R.id.iv_image_icon);
initCommonView(itemView, commonView);
}
}

class TextViewHolder extends RecyclerView.ViewHolder{
CommonView commonView = new CommonView();

public TextViewHolder(View itemView) {
super(itemView);
initCommonView(itemView, commonView);
}
}

初始化布局基本上就完成了，接下来就是要把从网络获取的数据放到布局上，首先还是关于公共部分的数据获取，把所有公共视图的数据获取放在一个方法中，也可以避免很多重复的代码，比如：

private void bindCommonData(CommonView view, ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean data) {
if (data.getProfile_image() != null){
Glide.with(context).load(data.getProfile_image())
.diskCacheStrategy(DiskCacheStrategy.ALL)
.skipMemoryCache(false)
.error(R.drawable.user)
.into(view.iv_headpic);

}
if (data.getName() != null){
view.tv_name.setText(data.getName());
}
view.tv_time_refresh.setText(data.getCreate_time());
...
}

之后就是剩下的各类ViewHolder中的数据获取了，在onBindViewHolder方法中：

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean data = dataList.get(position);
if (holder instanceof VideoViewHolder){
VideoViewHolder videoViewHolder = (VideoViewHolder) holder;
bindCommonData(videoViewHolder.commonView, data);

videoViewHolder.jcv_videoplayer.setUp(data.getVideo_uri(), JZVideoPlayerStandard.SCREEN_WINDOW_NORMAL, "");
} else if (holder instanceof ImageViewHolder){
ImageViewHolder imageViewHolder = (ImageViewHolder) holder;
bindCommonData(imageViewHolder.commonView, data);

imageViewHolder.iv_image_icon.setImageResource(R.drawable.bg_item);
if(data.getImage0() != null){
Glide.with(context).load(data.getImage0()).placeholder(R.drawable.bg_item).error(R.drawable.bg_item).diskCacheStrategy(DiskCacheStrategy.ALL).into(imageViewHolder.iv_image_icon);
}
} else if (holder instanceof TextViewHolder){
TextViewHolder textViewHolder = (TextViewHolder) holder;
bindCommonData(textViewHolder.commonView, data);
}

}

需要注意到，上面节操播放器的用法，setUp这个方法接受三个参数，第一个是视频地址，第二个一种播放窗口的模式，第三个是视频的标题，没有就填”“,不能填null，不然会报错，节操播放器的控件在布局中差不多是这么用：

<cn.jzvd.JZVideoPlayerStandard
android:id="@+id/jcv_videoplayer"
android:layout_width="match_parent"
android:layout_height="220dp" />

最后是RecyclerView适配器的完整代码，关于布局的代码就不写了，因为非常非常多~~~：

public class TypesNewsRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static final int TYPE_VIDEO = 0;  //视频类型
private static final int TYPE_IMAGE = 1;    //图片类型
private static final int TYPE_TEXT = 2; //文本类型
private static final int TYPE_SOUND = 3;   //声音类型

private Context context;
private List<ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean> dataList;

public TypesNewsRecyclerAdapter(Context context, List<ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean> dataList) {
this.context = context;
this.dataList = dataList;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (context != null){
this.context = parent.getContext();
}

View view;
if(viewType == TYPE_VIDEO){
view = View.inflate(context, R.layout.all_video_item, null);
return new VideoViewHolder(view);
} else if(viewType == TYPE_IMAGE){
view = View.inflate(context, R.layout.all_image_item, null);
return new ImageViewHolder(view);
} else {
view =View.inflate(context, R.layout.all_text_item, null);
return new TextViewHolder(view);
}
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean data = dataList.get(position);
if (holder instanceof VideoViewHolder){
VideoViewHolder videoViewHolder = (VideoViewHolder) holder;
bindCommonData(videoViewHolder.commonView, data);

videoViewHolder.jcv_videoplayer.setUp(data.getVideo_uri(), JZVideoPlayerStandard.SCREEN_WINDOW_NORMAL, "");
} else if (holder instanceof ImageViewHolder){
ImageViewHolder imageViewHolder = (ImageViewHolder) holder;
bindCommonData(imageViewHolder.commonView, data);

imageViewHolder.iv_image_icon.setImageResource(R.drawable.bg_item);
if(data.getImage0() != null){
Glide.with(context).load(data.getImage0()).placeholder(R.drawable.bg_item).error(R.drawable.bg_item).diskCacheStrategy(DiskCacheStrategy.ALL).into(imageViewHolder.iv_image_icon);
}
} else if (holder instanceof TextViewHolder){
TextViewHolder textViewHolder = (TextViewHolder) holder;
bindCommonData(textViewHolder.commonView, data);
}

}

private void bindCommonData(CommonView view, ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean data) {
if (data.getProfile_image() != null){
Glide.with(context).load(data.getProfile_image())
.diskCacheStrategy(DiskCacheStrategy.ALL)
.skipMemoryCache(false)
.error(R.drawable.user)
.into(view.iv_headpic);

}
if (data.getName() != null){
view.tv_name.setText(data.getName());
}
view.tv_time_refresh.setText(data.getCreate_time());
view.tv_shenhe_ding_number.setText(data.getLove());
view.tv_shenhe_cai_number.setText(data.getHate());
view.tv_context.setText(data.getText());
}

@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;
}
// else if ("31".equals(type)) {
//            itemViewType = TYPE_SOUND;
//        }
return itemViewType;
}

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

class VideoViewHolder extends RecyclerView.ViewHolder{
CommonView commonView = new CommonView();
JZVideoPlayerStandard jcv_videoplayer;

public VideoViewHolder(View itemView) {
super(itemView);
//在这里实例化特有的
jcv_videoplayer = (JZVideoPlayerStandard) itemView.findViewById(R.id.jcv_videoplayer);
initCommonView(itemView, commonView);

}

}

class ImageViewHolder extends RecyclerView.ViewHolder{
CommonView commonView = new CommonView();
ImageView iv_image_icon;

public ImageViewHolder(View itemView) {
super(itemView);
iv_image_icon = (ImageView) itemView.findViewById(R.id.iv_image_icon);
initCommonView(itemView, commonView);
}
}

class TextViewHolder extends RecyclerView.ViewHolder{
CommonView commonView = new CommonView();

public TextViewHolder(View itemView) {
super(itemView);
initCommonView(itemView, commonView);
}
}

//公共视图
static class CommonView{
//用户信息
ImageView iv_headpic;
TextView tv_name;
TextView tv_time_refresh;
ImageView iv_right_more;

//顶和赞
TextView tv_shenhe_ding_number;
TextView tv_shenhe_cai_number;

//        //下载栏
//        LinearLayout ll_download;

//中间公共部分 -所有的都有
TextView tv_context;
}

private void initCommonView(View itemView, CommonView commonView) {
commonView.tv_context = (TextView) itemView.findViewById(R.id.tv_context);

commonView.iv_headpic = (ImageView) itemView.findViewById(R.id.iv_headpic);
commonView.tv_name = (TextView) itemView.findViewById(R.id.tv_name);
commonView.tv_time_refresh = (TextView) itemView.findViewById(R.id.tv_time_refresh);
commonView.iv_right_more = (ImageView) itemView.findViewById(R.id.iv_right_more);

commonView.tv_shenhe_ding_number = (TextView) itemView.findViewById(R.id.tv_shenhe_ding_number);
commonView.tv_shenhe_cai_number = (TextView) itemView.findViewById(R.id.tv_shenhe_cai_number);

//        commonView.ll_download = (LinearLayout) itemView.findViewById(R.id.ll_download);
}
}

—————————————————————————————————————————————————————————

补充：给长图添加点击显示大图效果。

这就用到了自定义Dialog，在网上看到了一篇非常不错的文章，如下：

PhotoView+Glide+Dialog+ViewPager:打造轻量级的图片浏览方案

http://www.jianshu.com/p/629300228921

我照着文章做了一个结合PhotoView显示长图的Dialog，首先自定义Dialog的显示效果，在style中添加：

<!--全屏背景半透明 dialog-->
<style name="transparentBgDialog" parent="@android:style/Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:background">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
</style>

然后自定义Dialog的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<uk.co.senab.photoview.PhotoView
android:id="@+id/pv_long"
android:scaleType="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="15dp"
android:layout_marginTop="15dp"/>
<TextView
android:id="@+id/tv_image_index"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="@android:color/white"/>
</FrameLayout>

接着是自定义创建一个Config类，用于设置Dialog的宽和高：

public class  Config {
public static int EXACT_SCREEN_HEIGHT;
public static int EXACT_SCREEN_WIDTH;
}

接下来开始自定义Dialog：

public class ShowImagesDialog extends Dialog {

private Context context;
private View view ;
private PhotoView photoView;
String url;

public ShowImagesDialog(@NonNull Context context, String url) {
super(context, R.style.transparentBgDialog);  //这里用到了自定义Dialog的样式
this.context = context;
this.url = url;

initView();
initData();
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(view);
Window window = getWindow();
WindowManager.LayoutParams wl = window.getAttributes();
wl.x = 0;
wl.y = 0;
wl.height = Config.EXACT_SCREEN_HEIGHT;
wl.width = Config.EXACT_SCREEN_WIDTH;
wl.gravity = Gravity.CENTER;
window.setAttributes(wl);
}

private void initView() {
view = View.inflate(context, R.layout.dialog_image, null);
photoView = (PhotoView) view.findViewById(R.id.pv_long);
}

private void initData(){
PhotoViewAttacher.OnPhotoTapListener listener = new PhotoViewAttacher.OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float x, float y) {
dismiss();
}
};

photoView.setOnPhotoTapListener(listener);

Glide.with(context)
.load(url)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.placeholder(R.drawable.bg_item)
.error(R.drawable.bg_item)
.into(new SimpleTarget<GlideDrawable>() { //这个灰常重要，作用是让图片清晰地显示
@Override
public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
photoView.setImageDrawable(resource);
}
});
}
}

最后在TypesNewsRecyclerAdapter的onBindViewHolder方法中添加：

else if (holder instanceof ImageViewHolder){
ImageViewHolder imageViewHolder = (ImageViewHolder) holder;
bindCommonData(imageViewHolder.commonView, data);

imageViewHolder.iv_image_icon.setImageResource(R.drawable.bg_item);
if(data.getImage0() != null){
Glide.with(context).load(data.getImage0()).placeholder(R.drawable.bg_item).error(R.drawable.bg_item).diskCacheStrategy(DiskCacheStrategy.RESULT).into(imageViewHolder.iv_image_icon);
getDeviceDensity();
if (data.getImage0().indexOf("gif") == -1){
imageViewHolder.iv_image_icon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new ShowImagesDialog(context, data.getImage0()).show();
}
});
}
}
}

看一下效果吧！