RecyclerView多布局写法，“我的”、“个人中心” 页面经典写法演示

最新推荐文章于 2024-07-18 11:35:02 发布
最新推荐文章于 2024-07-18 11:35:02 发布
阅读量3.5k 收藏 10
点赞数 2
分类专栏： Android 知识点 Android Demo 文章标签： Recycle多布局 RecyclerVi BRVAH
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yechaoa/article/details/78825588
版权
效果：

gif
pic


多布局的使用场景还是蛮多的，比如“首页”、“我的”等页面，早期的时候大家一般都是拼起来的，后来开始自定义ListView（支付宝现在的首页还是ListView），再到后来的RecyclerView。

其实多布局都是一个套路，根据类型去引入layout，本文以RecyclerView为例，以BaseRecyclerViewAdapterHelper为辅演示多布局的写法。


1.添加依赖

compile ‘com.github.yechaoa:YUtils:2.0.6’
compile ‘com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.34’

YUtils是一个快速开发工具集合，感兴趣的可以戳 YUtils


2.主页面

主页面采用的是 ViewPager + BottomNavigationView

稍微过一下吧。。不想看的直接跳到第3步


布局：
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.yechaoa.multipleitempage.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>


添加Listener让二者关联起来
mViewPager.addOnPageChangeListener(mOnPageChangeListener); 
mNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
private ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            mNavigation.getMenu().getItem(position).setChecked(true);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };


    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    mViewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_category:
                    mViewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_cart:
                    mViewPager.setCurrentItem(2);
                    return true;
                case R.id.navigation_my:
                    mViewPager.setCurrentItem(3);
                    return true;
            }
            return false;
        }
    };

ViewPager选中的时候让BottomNavigationView的item也选中，BottomNavigationView的item选中的时候让ViewPager切换page


3.Fragment（“我的”页面）

布局，SwipeRefreshLayout（下拉刷新）嵌套RecyclerView：
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.v4.widget.SwipeRefreshLayout>


初始化Data
private void initItemData() {
        itemDataList = new ArrayList<>();

        multipleItem = new MultipleItem(MultipleItem.TYPE_COUNT, 5);
        multipleItem.mString1 = "收藏";
        multipleItem.mString2 = "关注";
        itemDataList.add(multipleItem);

        multipleItem = new MultipleItem(MultipleItem.TYPE_ORDER_HEADER, 5);
        multipleItem.mString2 = "type2";
        itemDataList.add(multipleItem);

        for (int i = 0; i < 5; i++) {
            multipleItem = new MultipleItem(MultipleItem.TYPE_ORDER, 1);
            multipleItem.mString1 = "待付款";
            if (i % 2 == 0) {
                multipleItem.isShow = true;
                multipleItem.count = 6;
            } else {
                multipleItem.isShow = false;
                multipleItem.count = 0;
            }
            itemDataList.add(multipleItem);
        }

        multipleItem = new MultipleItem(MultipleItem.TYPE_BALANCE, 5);
        multipleItem.mString1 = "￥9999.00";
        itemDataList.add(multipleItem);

        multipleItem = new MultipleItem(MultipleItem.TYPE_TOOLS_HEADER, 5);
        multipleItem.mString1 = "type5";
        itemDataList.add(multipleItem);

        for (int i = 0; i < 5; i++) {
            multipleItem = new MultipleItem(MultipleItem.TYPE_TOOLS, 1);
            multipleItem.mString1 = "使用帮助";
            if (i % 2 == 0) {
                multipleItem.isShow = true;
                multipleItem.count = 100;
            } else {
                multipleItem.isShow = false;
                multipleItem.count = 0;
            }
            itemDataList.add(multipleItem);
        }
    }


获取id
mSwipeRefreshLayout = getActivity().findViewById(R.id.swipeRefreshLayout);
mRecyclerView = getActivity().findViewById(R.id.recyclerView);


初始化SwipeRefreshLayout
private void initSwipeRefreshLayout() {
        mSwipeRefreshLayout.setColorSchemeResources(
                android.R.color.holo_blue_bright,
                android.R.color.holo_green_light,
                android.R.color.holo_orange_light);

        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        multipleItemQuickAdapter.notifyDataSetChanged();
                        mSwipeRefreshLayout.setRefreshing(false);
                        YUtils.showToast("刷新完成");
                    }
                }, 2000);
            }
        });
    }


初始化RecyclerView
private void initRecyclerView() {
        GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), 5);
        mRecyclerView.setLayoutManager(gridLayoutManager);

        multipleItemQuickAdapter = new MultipleItemQuickAdapter(itemDataList);

        View headerView = getHeaderView(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                switch (view.getId()) {
                    case R.id.my_header_image:
                        YUtils.showToast("你点击了头像");
                        break;
                    case R.id.my_header_settings:
                        YUtils.showToast("你点击了设置");
                        break;
                }
            }
        });

        multipleItemQuickAdapter.addHeaderView(headerView);

        mRecyclerView.setAdapter(multipleItemQuickAdapter);
    }


添加Header
private View getHeaderView(View.OnClickListener listener) {
        View headerView = getLayoutInflater().inflate(R.layout.layout_my_header, (ViewGroup) mRecyclerView.getParent(), false);

        CircleImageView myHeaderImage = headerView.findViewById(R.id.my_header_image);
        myHeaderImage.setImageResource(R.drawable.header_image);
        myHeaderImage.setOnClickListener(listener);

        TextView myHeaderName = headerView.findViewById(R.id.my_header_name);
        myHeaderName.setText("名字");

        TextView myHeaderMobile = headerView.findViewById(R.id.my_header_mobile);
        myHeaderMobile.setText("手机号");

        ImageView myHeaderSettings = headerView.findViewById(R.id.my_header_settings);
        myHeaderSettings.setOnClickListener(listener);

        return headerView;
    }


初始化Listener
private void initListener() {
        multipleItemQuickAdapter.setSpanSizeLookup(new BaseQuickAdapter.SpanSizeLookup() {
            @Override
            public int getSpanSize(GridLayoutManager gridLayoutManager, int position) {
                return itemDataList.get(position).getSpanSize();
            }
        });

        multipleItemQuickAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {

                YUtils.showToast("第  " + position);

                //可以再加一层 类型 的判断，一般来说订单不是点了就消失的
                if (itemDataList.get(position).getItemType() == MultipleItem.TYPE_TOOLS) {
                    if (itemDataList.get(position).isShow) {
                        itemDataList.get(position).isShow = false;
                        LogUtil.i("count  =  " + itemDataList.get(position).count);
                        multipleItemQuickAdapter.notifyItemChanged(position + 1);
                    } else
                        itemDataList.get(position).isShow = false;
                }

            }
        });

        multipleItemQuickAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {
            @Override
            public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
                switch (view.getId()) {
                    case R.id.my_favorites:
                        YUtils.showToast("收藏");
                        break;
                    case R.id.my_bands:
                        YUtils.showToast("关注");
                        break;
                    case R.id.ll_my_order:
                        YUtils.showToast("全部订单");
                        break;
                    case R.id.my_balance_btn:
                        YUtils.showToast("立即充值");
                        break;
                }
            }
        });

    }

如果考虑到在GridLayoutManager复用item问题可以配置setSpanSizeLookup

setOnItemClickListener，item点击事件

setOnItemChildClickListener，item里面的子view点击事件

item点击的时候，角标（徽章）消失，然后局部刷新


4.Bean

实体类必须实现MultiItemEntity，在设置数据的时候，需要给每一个数据设置itemType

public class MultipleItem implements MultiItemEntity {

    public static final int TYPE_COUNT = 1;
    public static final int TYPE_ORDER_HEADER = 2;
    public static final int TYPE_ORDER = 3;
    public static final int TYPE_BALANCE = 4;
    public static final int TYPE_TOOLS_HEADER = 5;
    public static final int TYPE_TOOLS = 6;
    private int itemType;
    private int spanSize;

    public MultipleItem(int itemType, int spanSize) {
        this.itemType = itemType;
        this.spanSize = spanSize;
    }

    @Override
    public int getItemType() {
        return itemType;
    }

    public int getSpanSize() {
        return spanSize;
    }

    public void setSpanSize(int spanSize) {
        this.spanSize = spanSize;
    }


    public String mString1;

    public String mString2;

    public boolean isShow;

    public int count;

}


5.Adapter

多布局关键写法就在Adapter里面，根据类型返回不同的layout，然后填充数据、处理事件等等。

在构造里面addItemType绑定type和layout的关系

public class MultipleItemQuickAdapter extends BaseMultiItemQuickAdapter<MultipleItem, BaseViewHolder> {

    public MultipleItemQuickAdapter(List data) {
        super(data);
        addItemType(MultipleItem.TYPE_COUNT, R.layout.layout_my_count);
        addItemType(MultipleItem.TYPE_ORDER_HEADER, R.layout.layout_my_order_header);
        addItemType(MultipleItem.TYPE_ORDER, R.layout.layout_my_order);
        addItemType(MultipleItem.TYPE_BALANCE, R.layout.layout_my_balance);
        addItemType(MultipleItem.TYPE_TOOLS_HEADER, R.layout.layout_my_tools_header);
        addItemType(MultipleItem.TYPE_TOOLS, R.layout.layout_my_tools);
    }

    @Override
    protected void convert(BaseViewHolder helper, MultipleItem item) {
        switch (helper.getItemViewType()) {
            case MultipleItem.TYPE_COUNT:
                helper.setText(R.id.my_favorites, item.mString1).addOnClickListener(R.id.my_favorites);
                helper.setText(R.id.my_bands, item.mString2).addOnClickListener(R.id.my_bands);
                break;
            case MultipleItem.TYPE_ORDER_HEADER:
                helper.addOnClickListener(R.id.ll_my_order);
                break;
            case MultipleItem.TYPE_ORDER:
                helper.setImageDrawable(R.id.my_order_image, ContextCompat.getDrawable(mContext, R.drawable.ic_launcher));
                helper.setText(R.id.my_order_name, item.mString1);
                if (item.isShow) {
                    helper.getView(R.id.my_order_count).setVisibility(View.VISIBLE);
                    if (item.count > 0) {
                        if (item.count < 99) {
                            helper.setText(R.id.my_order_count, String.valueOf(item.count));
                        } else {
                            helper.setText(R.id.my_order_count, String.valueOf("99+"));
                        }
                    } else {
                        helper.getView(R.id.my_order_count).setVisibility(View.GONE);
                    }
                } else {
                    helper.getView(R.id.my_order_count).setVisibility(View.GONE);
                }
                break;
            case MultipleItem.TYPE_BALANCE:
                helper.setText(R.id.my_balance_text, item.mString1);
                helper.addOnClickListener(R.id.my_balance_btn);
                break;
            case MultipleItem.TYPE_TOOLS_HEADER:
                //helper.setText(R.id.tv_item_name, item.mString1);
                break;
            case MultipleItem.TYPE_TOOLS:
                helper.setImageDrawable(R.id.my_tools_image, ContextCompat.getDrawable(mContext, R.drawable.ic_launcher));
                helper.setText(R.id.my_tools_text, item.mString1);
                if (item.isShow) {
                    helper.getView(R.id.my_tools_count).setVisibility(View.VISIBLE);
                    if (item.count > 0) {
                        if (item.count < 99) {
                            helper.setText(R.id.my_tools_count, String.valueOf(item.count));
                        } else {
                            helper.setText(R.id.my_tools_count, String.valueOf("99+"));
                        }
                    } else {
                        helper.getView(R.id.my_tools_count).setVisibility(View.GONE);
                    }
                } else {
                    helper.getView(R.id.my_tools_count).setVisibility(View.GONE);
                }
                break;
        }
    }


item的layout就不用贴了吧，就一般的布局。。

角标（徽章）的话没用BadgeView，只直接用ImageView写的。

Demo是从项目里抽出来的，好像也没什么要注意的了吧。。忘了。。


Demo：https://github.com/yechaoa/MultipleItemPage

yechaoa
关注
专栏目录
MaterialDesign学习篇(八)，掌握RecyclerView和SwipeRefreshLayout
Chay_Chan的博客
08-03 1245
RecyclerView介绍RecyclerView是Android5.0添加的一个用于取代ListView的控件，它的灵活性比ListView和GridView更加优秀，ListView和GridView能够做到的，它都可以做到，可以说是ListView和GridView的升级版，但是它的使用又和ListView与GridView有些不同，下面将会对此进行介绍。如何使用RecyclerView先看
一个漂亮而强大的RecyclerView
findhappy117的博客
09-19 643
代码地址如下：http://www.demodashi.com/demo/13470.html 简介 主要提供了简单易用强大的RecyclerView库，包括自定义刷新加载效果、极简通用的万能适配器Adapter、万能分割线、多种分组效果、常见状态页面、item动画效果、添加多个header和footer、侧滑、拖拽、Sticky（黏性）效果、多item布局等,各模块之间灵活、解耦、通用、又能...
recyclerView横条指示器——仿淘宝菜单模块
01-03
电商首页菜单模块，可以横向滑动，底部的滑动位置指示器该如何实现呢？ 实现思路： 1.上方横滑列表可以直接使用RecyclerView实现； 2.下方的指示器： （1）.计算出RecyclerView划出屏幕的距离w1和剩余宽度w2的比例y，y = w1 / （总宽度w3 – 可使视区域宽度w4）； （2）.计算出指示器该移动的距离w5 = y * （指示器的总宽度w6 – 滑块宽度w7）； （3）.指示器布局实现： <RelativeLayout         android:id=”@ id/parent_layout”         android:layout_marginTop=
[Android]RecyclerView的简单演示样例
diandingyin9417的博客
06-26 126
去年google的IO上就展示了一个新的ListView。它就是RecyclerView。 下面是官方的说明，我英语能力有限，只是我大概这么理解：RecyclerView会比ListView更具有拓展性，使用更有效率，并且更灵活了，详细怎么样，时隔一年，我们也发现了它越来越强大，所以有必要去认识一下这个小伙伴了。 TheRecyclerViewwidget is ...
recyclerview实现多种布局
最新发布
qq_68599810的博客
07-18 322
recyclerview实现多种布局
RecyclerView简单例子演示
X_tuan_tuan的博客
06-06 416
一、首先主活动的xml布局文件activity.xml要这么写 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <androidx.
Android开发笔记（三十五）页面布局视图
aqi00的博客
12-31 5049
布局视图的类别 布局视图有三类，分别是线性布局LinearLayout、相对布局RelativeLayout、框架布局FrameLayout。其中最常用的是LinearLayout，它适用于包括简单布局在内的多数情况；其次常用的是RelativeLayout，它适用于一些复杂布局，主要是对相对位置要求较多的情况；最少用的是FrameLayout，它一般用于需要叠加展示的场合，比如说给整个页面设置
Android页面布局
05-11
android移动开发最常用的几种布局：线性布局、表格布局、相对布局、帧布局，以及布局嵌套。
Android开发之复杂布局嵌套(ScrollView+TabLayout+ViewPager+RecyclerView)导致冲突的解决办法
热门推荐
黄庆庆的世界
03-28 1万+
前言 最近在做一些项目和毕业设计，所以自从上次梳理完数据结构之后，一直想写些什么，但是又没有比较好的内容，所以博客从过完年之后就停更了很长很长很长一段时间，不过这次在做项目的时候，正好遇到一个我本以为很简单，结果折腾了好久的一个问题，其实这个问题对于做Android开发的同学来说，并不陌生，那就是滑动布局的互相嵌套。 当然并不仅限于标题中写的这种嵌套，只要是可滑动的布局，例如GridView，各种...
Material Design: RecyclerView配合CardView创建卡片列表
发烧的冬瓜的博客
09-16 2155
详解Android中利用RecyclerView及CardView来创建卡片列表
从ListView到RecyclerView的用法总结
zzhou——blog
05-10 198
1.ListView入门 先看看简单的实现效果： 实现的步骤为： 1.1 在新建的项目中的布局activity_**.xml中，添加ListView： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" ...
Android个人中心
01-11
提供参考，有拍照上传，后台图片下载，查询等
Android代码-个人中心页面框架
08-06
LSettingView 设置界面条目封装，同时包含： 设置左侧图标 设置左侧文字 设置右侧图标 设置右侧图标是否显示 设置右侧为复选框样式 设置右侧为开关模式 设置右侧文字及样式 运行效果： 快速使用 1. 添加依赖 compile 'com.leon:lsettingviewlibrary:1.2.0' 2. 在布局文件中引用 3. 添加单击事件处理 LSettingItem mSettingItemOne = (LSettingItem
Android实现个人中心
01-05
Android实现个人中心列表效果，以及个人中心的圆形图像和磨砂头像背景
Android RecyclerView 详解（五） RecyclerView多布局的使用
SuperBigLw的博客
12-01 8175
Android RecyclerView 详解（五） RecyclerView多布局的使用 先上一张效果图 1.首先引入我们的RecyclerView的包 2.在布局文件中使用他 <android.support.v7.widget.RecyclerView android:id="@+id/myRecycler" and
Android控件——RecyclerView系列一（基本使用)
zhewen的博客
07-08 745
1. RecyclerView介绍 从Android 5.0开始，谷歌公司推出了一个用于大量数据展示的新控件RecylerView，可以用来代替传统的ListView，更加强大和灵活。 RecyclerView定义在support库当中，想要使用该控件，需要在项目的build.gradle中添加相应的依赖库。在app/build.gradle文件，在dependencies闭包中添加： impl...
终于来了：Android端个人中心页面滑动冲突优化方案
Android_XG的博客
12-16 1198
背景 抖音首页右滑可进入“个人中心”页面，对于首页日活上亿的 APP 来说，这个页面的pv理论上应该不会太小。但是某些时候在此页面会出现滑动冲突的小问题，不太利于用户体验，通过反复的把玩测试，找到了必现的操作，作为一个资深的抖迷和一个非资深的 Android 开发的我，产生了钻牛角尖的想法—想看看问题是怎么产生的，以及有没有可优化的方案。 问题现象 首页右滑可进入“个人中心”页面，然后在底部的 RecylerView 上先左右滑动，但是不触发它们父布局 ViewPager 的切换，然后手指不抬起，进行上下.
recyclerview点击事件的详细写法
04-26
RecyclerView 点击事件的详细写法可以分为以下几个步骤： 1. 定义接口 ```java public interface OnItemClickListener { void onItemClick(View view, int position); } ``` 2. 在 RecyclerView.Adapter 中设置监听器 ```java public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> { private List<MyItem> mItems; private OnItemClickListener mListener; public void setOnItemClickListener(OnItemClickListener listener) { mListener = listener; } @Override public void onBindViewHolder(MyViewHolder holder, int position) { final MyItem item = mItems.get(position); holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mListener != null) { mListener.onItemClick(view, position); } } }); } } ``` 3. 在 RecyclerView 中设置 Adapter 和监听器 ```java MyAdapter adapter = new MyAdapter(); adapter.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(View view, int position) { // 处理点击事件 } }); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setAdapter(adapter); ``` 以上就是 RecyclerView 点击事件的详细写法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yechaoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值