ReclerView的多种条目布局

最新推荐文章于 2024-11-08 23:02:35 发布
最新推荐文章于 2024-11-08 23:02:35 发布
阅读量221 收藏
点赞数
分类专栏： 莫名其妙的东西 文章标签： android java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a125679880/article/details/133147741
版权

一、效果图

        模仿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>

 

 

 

 

敬往事一杯酒哈
关注
专栏目录
ListView显示多种布局样式
春水碧于天的博客
04-03 2217
有时候我们可能需要在ListView中展示多种布局样式，比如qq中的聊天界面，会展示出至少两种布局，一个是接收到的消息，另一个则是发送出去的消息。这时候我们就可以使用BaseApdater为我们提供的方法来实现我们所需要的用来实现多种布局样式的ListView。先看一下运行效果：在定义BaseAdapter的时候，我们需要重写它的getView()方法，这个方法就是用来获取布局的，那么我们只需要在获
Android ListView实现多种Item布局
weixin_33727510的博客
01-10 2774
前言 有时，我们的ListView的Item布局并非都是一样的，比如，我们需要一个按拼音排序的列表，如下图： 有的同学可能会说，直接把两种布局放在一个Item布局中，在getView中隐藏不用的那个布局不就行了。这种方法确实能够实现，也没什么问题，但是如果布局种类不止两种，而是20种或者更多呢？显然每次加载所有布局是很不明智的，而且很可能会造成界面卡顿。 其实，Google早想到了这一点，并提供...
RecyclerView实现加载多种条目类型,仿新闻列表多种item布局.
热门推荐
周浩__的博客
07-04 2万+
本技术博客来自 http://blog.csdn.net/qq_35353487 今天咱们是用RecyclerView来实现这个多种Item的加载. 其实最关键的是要复写RecyclerView的Adapter中的getItemViewType()方法 这个方法就根据条件返回条目的类型 其实就是从activity中传到adapter中的数据中
Kotlin_RecyclerView_多种类型的条目
whjk20的专栏
06-26 1174
RecyclerView 多种类型的条目的实现： 三种不同类型条目： 只有一张图片、 标题+图片 、 三种图片 1. 条目的布局： 条目1： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
RecyclerView显示多种Item布局
Zheng
03-09 5072
如果大家不了解RecyclerView，请点击下面博客先进行了解： http://blog.csdn.net/zheng_jiao/article/details/52389707 如果大家使用过RecyclerView，显示多个item非常简单； 我们项目中有6个不同的布局，在这里我为了大家方便查看，我显示2个不同的布局； /** * Created by ZhengJiao on
Android RecycleView切换条目布局visibility导致列表滑动
怪咖小白的博客
11-02 1812
在项目开发过程遇到一个问题，切换布局中某个子view的visibility为gone后，RecyclerView 自己莫名其妙的滚动了一点。通过网上查找发现，这是RecyclerView 抢占焦点导致。可以用以下方式解决： 父布局设置属性descendantFocusability 为 blocksDescendants，RecyclerView 设置 属性overScrollMode 为never。 <com.xxxxxxxxxxxx.Layout android:layout_width="ma
理解RecyclerView（二）—不同类型条目item、头尾布局
https://juejin.cn/user/1654096907477549/posts
12-26 3584
前言： 世人总是恐惧失败，但失败了也大不从头再来。 一、概述   我们在上一篇文章RecyclerView（一）中对RecyclerView使用详细介绍了，在项目中，我们常遇到一个列表中有不同类型的item，RecyclerView中还有一个很重要的方法getItemViewType()，它的作用是获取item的类型，在onCreateViewHolder()方法中携带过来的viewType是区分item不同类型的参数，核心方法就在这里。原理就是根据viewType来创建不同
R ggplot2 改图例条目布局
m0_46084093的博客
01-10 1万+
# 快捷调整 base + theme( legend.direction = "horizontal" ) # 精准调整 base + guides( color = guide_legend( ncol = 2, byrow = TRUE, reverse = T) ) 语法 快捷调整方法在theme主题系统，精确调整在guides指南系统 快...
listview多种类型条目显示
Android_my的博客
05-29 7627
一、整个布局是一个listview实线的，而listview里面是嵌套了三种不同展示类型的item，平常只显示一种listview条目，我们会用到常用的四个方法，但是显示不同种类型item的时候，还需要实现两个重要的API（getViewTypeCount()、getItemViewType()）。 先看下主要的布局：<RelativeLayout xmlns:android="http://sc
Android 多布局仿今日头条完美加载多种条目类型（RecyclerView）
zkbilian的博客
04-26 5089
这个功能在新闻类的APP经常会用到过，这个效果大家都知道，废话不多说，来看我下实现后的效果图跟别的app是否一样： 实现的效果图： 请先看这篇博客,我是用RecyclerView实现的这些功能 根据上一篇博客稍微改动了一下代码: 1.重写getItemViewType方法 根据条件返回条目的类型 @Override public int getItem...
Android-RecyclerView优雅的实现多条目布局
08-13
1. **多类型条目布局**：要在RecyclerView中实现多种布局，我们需要重写Adapter的`getItemViewType()`方法。此方法根据数据项返回一个唯一标识符，表示不同的视图类型。当创建ViewHolder时，这个标识符用于确定应该...
多条目布局listview
12-07
多条目布局listview
android recycler多条目布局
07-17
recycler代替ScrollView,这个RecyclerView中有多种item显示出来，那么具体...然后判断这个item对象需要那种视图，返回一个int类型的视图标志，然后在onCreatViewHolder方法中给引入布局，这样就能够实现多种item显示了
Android高仿 微信朋友圈动态，动态GridView条目布局
11-09
本文将详细解析如何在Android平台上高仿微信的朋友圈动态，特别是动态GridView条目布局的设计与实现。 首先，理解"动态GridView"的概念。GridView是Android中的一个视图组件，它能够以网格的形式展示数据列表。而...
RecyclerView的基本使用、封装、多条目布局、添加头部和底部
07-16
RecyclerView支持多条目布局，这意味着一个列表中可以有多种不同的视图类型。在Adapter中，重写`getItemViewType()`方法来返回每个条目的视图类型，然后在`onCreateViewHolder()`中根据视图类型创建对应的ViewHolder...
Android 15 在状态栏时间中显示秒数
m0_60898338的博客
11-04 327
无论您选择使用ADB进行快速解决，还是通过修改系统源代码修改，显示秒数功能都将提升您的Android使用体验。在Android 15中，您可以通过两种方式在状态栏中显示秒数：使用ADB命令或修改系统源代码。下面详细介绍这两种方法。您可以使用ADB（Android调试桥）命令轻松启用状态栏中的秒数显示。对于希望永久启用该功能的用户，可以通过修改系统源代码来实现。这种方法简单快捷，不需要对系统文件进行任何更改。如果需要进一步调整或修改，请随时告诉我！，您将启用状态栏中的秒数显示。
安卓市场如何做APP的分发、推广？
2401_88539912的博客
11-08 410
然后再加上小米lookalike算法，然后他会为这批用户投放，然后他也有点击根据点击用户的一个画像，再跟用户去进行一个算法的融合，然后再针对这批用户，不断的一个循环曝光，你会发现，整个会越来越精准，我们的投放的广告，目标人群越来越细，我们选了750万的一个人群数量去做，到后来只会针对750万里面可能是我们用户的那150万去曝光，因为他这个效果是没有任何人为干扰，他就是一个黑科技去算的，最后做出来，我们整个作为效果是非常准的。包括一些宣传，主打是整个品牌度，拍照、有声有色，帅气，年轻化。
【北京迅为】itop-3588开发板摄像头使用手册Android12 双摄方案
Chihiro_S的专栏
11-08 456
【北京迅为】itop-3588开发板摄像头使用手册Android12 双路摄像头方案
【Android】名不符实的Window类
最新发布
2303_79296612的博客
11-08 770
FEATURE_开头的属性凡是以 FEATURE_ 开头的静态常量都是定义当前窗口具有什么特性（比如界面是带有标题栏呢，还是节目带有action bar）FEATURE_OPTIONS_PANEL：代表创建action bar的menuFEATURE_NO_TITLE：代表不显示标题栏FEATURE_PROGRESS：如果显示标题栏，则标题栏中显示进度条FEATURE_LEFT_ICON：如果显示标题栏，则标题栏显示左iconFEATURE_CUSTOM_TITLE：代表自定义标题栏。
android studio怎么新建条目布局
05-30
要在Android Studio中创建新条目布局，请按照以下步骤操作： 1. 打开Android Studio并打开您的项目。 2. 在左侧Project面板中，找到您的app模块并展开它。 3. 在app模块中，右键单击res文件夹并选择New > Android ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值