Use Recyclerview with Jiaozivideoplayer to load different types of layouts

Want to be able to implement multiple types of layouts placed in a Recyclerview page, the final result of the demo is the following:

You can see that the entire list has a video layout, a plain text joke layout, a long picture layout, and a dynamic picture layout; The last two can be combined in one layout to show.

So first of all, to show the above things you need to use the following controls:

1. Moral Integrity player (probably a long time ago, this control often changed its name)
GitHub Address: Https://github.com/lipangit/JiaoZiVideoPlayer
The use method is to add dependencies:

Compile ' cn.jzvd:jiaozivideoplayer:6.1.2 '

2.Glide, this will not talk about:

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

3.RecyclerView, this much less talk about, anyway, and V7 library, add dependencies together. There are also networking privileges will not say.

Before is the use of the ListView to achieve this effect, but now Recyclerview is the trend (I see "The second line of code" inside Guo Shen said), anyway the ListView can do, Recyclerview can.

Although the use of multiple recyclerview, but the specific how to achieve such an effect or a little trouble, so on the Internet to see the following two big-brother (everyone is big, only I a niche) article, concise and clear, quite easy to understand:

Recyclerview usage (i)--Show multiple types of item data
http://blog.csdn.net/cxc19890214/article/details/49226743

Recyclerview implementing multiple Item layouts
http://blog.csdn.net/zhumintao/article/details/53023920

Want to quickly get started by the small partner suggested to see above is OK, I just want to record my study results, so write this article.

If you are in the ListView to achieve this effect, you need to write two more methods

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

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

One is to get the type of item and the other is to get the number of all types, and if there are 5 types, the following method returns 5.

However, in Recyclerview, you can only see the first method, and the second method is equivalent to the second parameter in Oncreateviewholder (viewgroup parent, int viewtype).

So create a Recyclerview adapter typesnewsrecycleradapter;

public class Typesnewsrecycleradapter extends recyclerview.adapter<recyclerview.viewholder>{}

Before there is only one kind of data, the above viewholder is the viewholder of this data, but now there are a variety of data, viewholder nature can not be written into a certain, Instead, it needs to be written Recyclerview.viewholder, and then the inheritance of all types of Viewholder recyclerview.viewholder.

Then I need three types of viewholder, namely video, text, picture, so first create three identifiers:

    private static final int type_video = 0;  Video type
    private static final int type_image = 1;    Picture type
    private static final int type_text = 2;//text type

The type data returned from the network is then assigned to the Getitemviewtype:

    @Override public
    int getitemviewtype (int position) {
        ManyTypesNewsBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean data = datalist.get (position);
        String type = Data.gettype ();
        int itemviewtype =-1;
        if ("$". Equals (Type)) {
            itemviewtype = Type_video;
        } else if ("Ten". Equals (Type)) {
            Itemviewtype = Type_ IMAGE;
        } else if ("+". Equals (Type)) {
            itemviewtype = type_text;
        }
        return itemviewtype;
    }

Then create the corresponding viewholder for each type:

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

You can see from the top of the final effect that each layout has the same part, writes this part of the instance in the same class, and then initializes the layout in the same way, such as the following:

    public view
    Static class commonview{...
        User information
        ImageView iv_headpic;
        TextView Tv_name;
    ...
    }

    Initialization method
    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);
    ...
    }

The

is then very simple to add the common parts to the various types of viewholder that were created earlier, and initialize the type-specific controls:

    Class Videoviewholder extends recyclerview.viewholder{commonview commonview = new Commonview (); Jzvideoplayerstandard Jcv_videoplayer;
            Moral Integrity player public Videoviewholder (View Itemview) {super (Itemview);
            Here instantiate the unique 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); }
    }

The initialization layout is basically done, and the next step is to put the data obtained from the network on the layout, first or the public part of the data acquisition, all the public views of the data obtained in a method, you can avoid a lot of duplicate code, such as:

    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 ());
       ...
    }

After that is the data obtained from the remaining types of Viewholder, in the Onbindviewholder method:

    @Override public void Onbindviewholder (recyclerview.viewholder holder, int position) {MANYTYPESNEWSBEAN.S
        HowapiResBodyBean.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). E Rror (R.drawable.bg_item). Diskcachestrategy (Diskcachestrategy.all). into (Imageviewholder.iv_imaGe_icon); }} else if (holder instanceof Textviewholder) {Textviewholder Textviewholder = (textviewholder) Holde
            R
        Bindcommondata (Textviewholder.commonview, data); }

    }

Note that the above moral integrity player usage, Setup This method accepts three parameters, the first is the video address, the second mode of playing the window, the third is the title of the video, do not fill in the "", can not fill null, otherwise will error, moral integrity Player control in the layout is almost so used:

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

Finally, the complete code of the Recyclerview adapter, the code on the layout is not written, because very much ~ ~ ~:

public class TypesNewsRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
Private static final int type Ou video = 0; / / video type
Private static final int type u image = 1; / / picture type
Private static final int type_text = 2; / / text type
Private static final int type_sound = 3; / / sound type
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);
//Instantiate specific
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) {
public TextViewHolder(View itemView) {
super(itemView);
initCommonView(itemView, commonView);
}
}
//Public view
static class CommonView{
//User information
ImageView iv_headpic;
TextView tv_name;
TextView tv_time_refresh;
ImageView iv_right_more;
/ / top and praise
TextView tv_shenhe_ding_number;
TextView tv_shenhe_cai_number;
/// / download bar
//        LinearLayout ll_download;
//Middle public part - all have
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);
}
}

————————————————————————————————————————————————————————— Added : Add a click to the long chart to display the large image effect.

This is the use of custom dialog, on the Internet to see a very good article, as follows:

Photoview+glide+dialog+viewpager: Creating a lightweight picture-viewing solution
http://www.jianshu.com/p/629300228921

I did a piece of the article. Photoview displays a long graph of dialog, first customizing the display effect of the dialog, adding in style:

    <!--full Screen background translucent 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>

Then customize the layout file for the 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>

Then the custom creates a config class that sets the width and height of the dialog:

public class  Config {public
    static int exact_screen_height;
    public static int exact_screen_width;
}

Next start customizing the dialog: