ReclerView的多种条目布局

一、效果图

        模仿QQ看点的布局： 

二、代码

 MoreTypeAdapter ：

package com.example.qq.ThirdFragment.Adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.example.qq.R;
import com.example.qq.ThirdFragment.Bean.MoreTypeBean;

import java.util.List;

import cn.jzvd.Jzvd;
import cn.jzvd.JzvdStd;


public class MoreTypeAdapter extends RecyclerView.Adapter {

    // 定义三个你标识表示三种类型
    public static final int TYPE_FULL_IMAGE = 0;
    public static final int TYPE_RIGHT_IMAGE = 1;
    public static final int TYPE_THREE_IMAGES = 2;
    public static final int TYPE_FURTH_VIDEO = 3;
    private Context mContext;
    private final List<MoreTypeBean> mData;

    public MoreTypeAdapter (List<MoreTypeBean>data,Context context){
        this.mData = data;
        mContext = context;
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       View view;
        // 这里要取创建ViewHolder
        if(viewType==TYPE_FULL_IMAGE){
            view = View.inflate(parent.getContext(), R.layout.item_type_full_image,null);
            return new FullImageHolder(view);
        }else if (viewType==TYPE_RIGHT_IMAGE){
            view =  View.inflate(parent.getContext(), R.layout.item_type_left_title_right_image,null);;
            return new RightImageHolder(view);
        }else if(viewType==TYPE_THREE_IMAGES) {
            view = View.inflate(parent.getContext(), R.layout.item_type_three__image,null); ;
            return new ThreeImageHolder(view);
        }else {
            view = View.inflate(parent.getContext(),R.layout.item_type_furth_video,null);
            return new VideoHolder(view);
        }


    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        // 这里不设置数据
        MoreTypeBean moreTypeBean = mData.get(position);
        switch (moreTypeBean.type){
            case 0:
                FullImageHolder fullImageHolder = (FullImageHolder) holder;
                fullImageHolder.mImageView.setImageResource(mData.get(position).getPic());
                break;
            case 1:
                RightImageHolder rightImageHolder = (RightImageHolder) holder;
                rightImageHolder.rightImage.setImageResource(mData.get(position).getPic());
                break;
            case 2:
                ThreeImageHolder threeImageHolder = (ThreeImageHolder) holder;
                threeImageHolder.mImageView1.setImageResource(mData.get(position).getPic());
                break;
            case 3:
                VideoHolder videoHolder = (VideoHolder) holder;
                // 设置视频数据
                videoHolder.jzVideo.setUp(mData.get(position).getUrl(), "新冠病毒大爆发！", Jzvd.SCREEN_NORMAL);
                // 如果在第一个条目会自动播放视频
                //                if (position==0){
//                    videoHolder.jzVideo.startVideo();
//                }
                // 添加视频封面
                Glide.with(mContext).load(mData.get(position).getUrl()).into(videoHolder.jzVideo.thumbImageView);

                break;
        }
    }

    @Override
    public int getItemCount() {
        if (mData != null) {
            return mData.size();
        }
        return 0;
    }

    // 复习一个方法,根据条件返回条目类型
    @Override
    public int getItemViewType(int position) {
        MoreTypeBean moreTypeBean = mData.get(position);
        if(moreTypeBean.type == 0){
            return TYPE_FULL_IMAGE;
        }else if(moreTypeBean.type==1){
            return TYPE_RIGHT_IMAGE;
        }else if (moreTypeBean.type==2){
            return TYPE_THREE_IMAGES;
        }else {
            return TYPE_FURTH_VIDEO;
        }
    }
    private class FullImageHolder extends RecyclerView.ViewHolder{
        ImageView mImageView;
        TextView title;
        public FullImageHolder(@NonNull View itemView) {
            super(itemView);
            mImageView = itemView.findViewById(R.id.full_image);
            title=itemView.findViewById(R.id.type_title);
        }
    }

    private class ThreeImageHolder extends RecyclerView.ViewHolder{
        ImageView mImageView,mImageView1,mImageView2;
        public ThreeImageHolder(@NonNull View itemView) {
            super(itemView);
            mImageView = itemView.findViewById(R.id.image1);
            mImageView1 = itemView.findViewById(R.id.image2);
            mImageView2 = itemView.findViewById(R.id.image3);
        }
    }

    private class RightImageHolder extends RecyclerView.ViewHolder{
        ImageView rightImage;
        public RightImageHolder(@NonNull View itemView) {
            super(itemView);
            rightImage = itemView.findViewById(R.id.right_image);
        }
    }
    private class VideoHolder extends RecyclerView.ViewHolder{

        public JzvdStd jzVideo;
        public VideoHolder(@NonNull View itemView) {
            super(itemView);
            jzVideo = itemView.findViewById(R.id.jzVideo);
        }
    }

}

1. 适配器类名：MoreTypeAdapter。

2. 构造函数：接受一个数据源 List<MoreTypeBean>。

3. 常量类型定义：

   • TYPE_FULL_IMAGE：代表全图类型的标识。
   • TYPE_RIGHT_IMAGE：代表右图类型的标识。
   • TYPE_THREE_IMAGES：代表三图类型的标识。
   • TYPE_FURTH_VIDEO：代表视频类型的标识。

4. onCreateViewHolder() 方法：根据不同的 viewType 返回对应的 ViewHolder。根据 viewType 的值，使用不同的布局文件创建相应的 View，并将其传入对应的 ViewHolder 中。

5. onBindViewHolder() 方法：根据不同的数据类型设置 ViewHolder 中的数据。

   • 如果是全图类型（TYPE_FULL_IMAGE），则从数据源中获取对应位置的图片资源，并设置到 FullImageHolder 的 ImageView 中。
   • 如果是右图类型（TYPE_RIGHT_IMAGE），则从数据源中获取对应位置的图片资源，并设置到 RightImageHolder 的 ImageView 中。
   • 如果是三图类型（TYPE_THREE_IMAGES），则从数据源中获取对应位置的图片资源，并分别设置到 ThreeImageHolder 的三个 ImageView 中。
   • 如果是视频类型（TYPE_FURTH_VIDEO），则从数据源中获取对应位置的视频链接和标题，并设置到 VideoHolder 的 JzvdStd 对象中。如果是第一个条目，自动开始播放视频。

6. getItemCount() 方法：返回数据源的长度。

7. getItemViewType() 方法：根据条目位置获取对应位置的数据类型，返回对应的 viewType。

8. 定义了四个 ViewHolder 类：

   • FullImageHolder：全图类型的 ViewHolder，包含一个 ImageView 和一个 TextView。
   • ThreeImageHolder：三图类型的 ViewHolder，包含三个 ImageView。
   • RightImageHolder：右图类型的 ViewHolder，包含一个 ImageView。
   • VideoHolder：视频类型的 ViewHolder，包含一个 JzvdStd 对象用于显示视频。

 WatchingFragment ：

package com.example.qq.ThirdFragment;

import android.os.Bundle;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.example.qq.Adapter.DataBean.Icon;
import com.example.qq.R;
import com.example.qq.ThirdFragment.Adapter.MoreTypeAdapter;
import com.example.qq.ThirdFragment.Bean.MoreTypeBean;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class WatchingFragment extends Fragment {
    private RecyclerView mRecyclerView;
    private List<MoreTypeBean> mData;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.watching_fragment, container, false);
        mRecyclerView = view.findViewById(R.id.more_type_list);
        // 准备数据
        mData = new ArrayList<>();
        // 创建和设置布局管理器
        LinearLayoutManager layoutManager = new LinearLayoutManager(getContext());
        mRecyclerView.setLayoutManager(layoutManager);

        initData();
        // 设置和创建适配器
        MoreTypeAdapter adapter = new MoreTypeAdapter(mData,getContext());
        mRecyclerView.setAdapter(adapter);
        return view;
    }

    private void initData() {
        Random random = new Random();
        for (int i = 0; i < Icon.icon.length; i++) {
            MoreTypeBean data = new MoreTypeBean();
            data.pic = Icon.icon[i];
            data.type = random.nextInt(4);
            data.setUrl("https://poss-videocloud.cns.com.cn/oss/2021/05/08/chinanews/MEIZI_YUNSHI/onair/25AFA3CA2F394DB38420CC0A44483E82.mp4");
            mData.add(data);
        }
    }
}

MoreTypeBean ： 

package com.example.qq.ThirdFragment.Bean;

public class MoreTypeBean {
    public int type;
    public int pic;
    public String url;

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public int getPic() {
        return pic;
    }

    public void setPic(int pic) {
        this.pic = pic;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

item_type_full_image： 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_height="match_parent">

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    app:cardUseCompatPadding="true"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/type_title"
         android:layout_centerHorizontal="true"
         android:textSize="14sp"
         android:text="全球科学家发现新型病毒，引发全球关注"
         android:scrollbarSize="30sp"/>

        <ImageView
            android:id="@+id/full_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/type_title"
            android:layout_marginTop="10dp"
            android:scaleType="fitXY"
            android:src="@drawable/img01" />
    </RelativeLayout>
</androidx.cardview.widget.CardView>




</RelativeLayout>

item_type_furth_video： 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <cn.jzvd.JzvdStd
        android:id="@+id/jzVideo"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="250dp" />
</androidx.cardview.widget.CardView>
</RelativeLayout>

item_type_left_title_right_image： 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_gravity="center_vertical"
    android:layout_height="match_parent">
    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardUseCompatPadding="true">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:maxLines="4"
            android:text="最近，一项重大的科学发现震动了全球。科学家们宣布他们在地球表面发现了一种迄今为止未知的物质，这引起了全球范围内的广泛关注与兴奋。"
            android:textSize="14sp"/>

        <ImageView
            android:id="@+id/right_image"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginLeft="20dp"
            android:layout_weight="1"
            android:scaleType="fitXY"
            android:src="@drawable/img01"/>




        </LinearLayout>



    </androidx.cardview.widget.CardView>


</LinearLayout>

 item_type_three__image：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="14sp"
        android:gravity="center"
        android:text="新研究揭示：暗能量之谜或即将解开！"/>

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardUseCompatPadding="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
     <ImageView
         android:id="@+id/image1"
         android:layout_width="0dp"
         android:layout_height="100dp"
         android:layout_weight="1"
         android:padding="5dp"
         android:scaleType="fitXY"
         android:src="@drawable/img01"/>
        <ImageView
            android:id="@+id/image2"
         android:layout_width="0dp"
         android:layout_height="100dp"
         android:layout_weight="1"
         android:padding="5dp"
         android:scaleType="fitXY"
         android:src="@drawable/img02"/>
        <ImageView
            android:id="@+id/image3"
         android:layout_width="0dp"
         android:layout_height="100dp"
         android:layout_weight="1"
         android:padding="5dp"
         android:scaleType="fitXY"
         android:src="@drawable/img03"/>


    </LinearLayout>
    </androidx.cardview.widget.CardView>

</LinearLayout>