Mehrere Eintragslayouts für ReclerView

Mobile 2023-10-01 10:03:19 views: null

1. Effektzeichnung

        Imitieren Sie das Layout der QQ-Highlights: 

 

2. Code

 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. Name der Adapterklasse: MoreTypeAdapter.

  2. Konstruktor: Akzeptiert eine Datenquelle List<MoreTypeBean>.

  3. Konstantentypdefinition:

    • TYPE_FULL_IMAGE: Stellt die Kennung des vollständigen Bildtyps dar.
    • TYPE_RIGHT_IMAGE: Stellt die Kennung des richtigen Bildtyps dar.
    • TYPE_THREE_IMAGES: Identifikation, die die drei Bildtypen darstellt.
    • TYPE_FURTH_VIDEO: Eine Kennung, die den Videotyp darstellt.

  4. onCreateViewHolder()-Methode: Gibt den entsprechenden ViewHolder entsprechend verschiedenen ViewTypes zurück. Verwenden Sie entsprechend dem Wert von viewType unterschiedliche Layoutdateien, um entsprechende Ansichten zu erstellen und diese an den entsprechenden ViewHolder zu übergeben.

  5. onBindViewHolder()-Methode: Legen Sie die Daten in ViewHolder entsprechend verschiedenen Datentypen fest.

    • Wenn es sich um einen vollständigen Bildtyp (TYPE_FULL_IMAGE) handelt, rufen Sie die Bildressource an der entsprechenden Position aus der Datenquelle ab und setzen Sie sie auf die ImageView von FullImageHolder.
    • Wenn es sich um einen rechten Bildtyp handelt (TYPE_RIGHT_IMAGE), rufen Sie die Bildressource an der entsprechenden Position aus der Datenquelle ab und setzen Sie sie auf ImageView von RightImageHolder.
    • Wenn es sich um einen Typ mit drei Bildern handelt (TYPE_THREE_IMAGES), rufen Sie die Bildressourcen am entsprechenden Speicherort aus der Datenquelle ab und legen Sie sie jeweils auf die drei ImageViews von ThreeImageHolder fest.
    • Wenn es sich um einen Videotyp (TYPE_FURTH_VIDEO) handelt, rufen Sie den Videolink und den Titel der entsprechenden Position aus der Datenquelle ab und legen Sie sie auf das JzvdStd-Objekt von VideoHolder fest. Handelt es sich um den ersten Eintrag, startet die Videowiedergabe automatisch.

  6. Methode getItemCount(): Gibt die Länge der Datenquelle zurück.

  7. Methode getItemViewType (): Rufen Sie den Datentyp der entsprechenden Position entsprechend der Elementposition ab und geben Sie den entsprechenden Ansichtstyp zurück.

  8. Es sind vier ViewHolder-Klassen definiert:

    • FullImageHolder: Vollbild-ViewHolder, einschließlich einer ImageView und einer TextView.
    • ThreeImageHolder: Ein ViewHolder vom Typ drei Bilder, einschließlich drei ImageViews.
    • RightImageHolder: ViewHolder des rechten Bildtyps, einschließlich einer ImageView.
    • VideoHolder: ViewHolder vom Typ Video, der ein JzvdStd-Objekt zum Anzeigen von Videos enthält.

 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>

 

 

 

 

Je suppose que tu aimes

Origine blog.csdn.net/A125679880/article/details/133147741
conseillé
Classement
du quotidien
Plus
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(2)
2024-06-03(0)
2024-06-02(1)

Code World

© 2018 codetd.com