RecyclerView基本使用方式

最新推荐文章于 2024-09-07 00:06:36 发布
最新推荐文章于 2024-09-07 00:06:36 发布
阅读量250 收藏 1
点赞数
分类专栏： Android学习 RecyclerView 文章标签： RecyclerView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzhong128/article/details/79232138
版权

前言

Android5.0推出了RecyclerView控件来取代旧的ListView、GridView等控件，这个控件的功能非常强大，最重要的是它的整体性能要高于老的ListView、GridView控件。在设计上也更加注重职责分离，比如ListView包含了布局和回收功能、分隔线、顶部底部装饰布局等各种功能，RecyclerView则采用了可插拔式设计，能够根据用户设置不同的布局策略、分隔样式展现不同的界面效果。除此之外，RecyclerView还自带ViewHolder优化功能，用户所有的界面操作都面向ViewHolder，避免老的Adapter需要用户自己手动添加ViewHolder功能。

线性布局

首先开始学习如何使最简单的线性布局，这种布局就是从上向下的竖向或者从左到右横向一次展示每个数据条目视图。在开始使用时直接在XML文件中定义RecyclerView布局，设置宽高都是MATCH_PARENT。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    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:background="@color/colorAccent"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.design.RecyclerViewActivity">

</android.support.v7.widget.RecyclerView>

在Activity中查找到RecyclerView控件，并且为它设置布局方式为LinearLayoutManager，布局的方向为竖向布局，这样就能实现ListView样式的展示。

recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
// 设置线性布局管理器
recyclerView.setLayoutManager(layoutManager);
// 增加分割线效果
recyclerView.addItemDecoration(new LineDecoration());
// 设置Adapter生成视图
recyclerView.setAdapter(new RecyclerAdapter(this));

最后设置的Adapter和普通的ListView设置的Adapter是不相同的，这个Adapter需要继承自RecyclerView.Adapter,这个类的实现代码如下：

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerViewHolder> {
    private List<User> users = new ArrayList<User>() {
        {
            add(new User(R.drawable.beach, "刘备", "唯贤唯德，能服于人"));
            add(new User(R.drawable.bamboo, "诸葛亮", "淡泊以明志，宁静以致远"));
            add(new User(R.drawable.road, "关羽", "安能与老兵同列"));
            add(new User(R.drawable.flower, "赵云", "子龙一身是胆"));
            add(new User(R.drawable.lake, "曹操", "宁教我负天下人，不教天下人负我"));
            add(new User(R.drawable.rain, "司马懿", "老而不死是为贼"));
            add(new User(R.drawable.sea, "司马昭", "司马昭之心路人皆知"));
            add(new User(R.drawable.moon, "孙权", "生子当如孙仲谋"));
            add(new User(R.drawable.peach, "周瑜", "既生瑜何生亮"));
            add(new User(R.drawable.pool, "吕蒙", "士别三日当刮目相待"));
        }
    };

    private Context context;
    private LayoutInflater inflater;

    public RecyclerAdapter(Context context) {
        this.context = context;
        this.inflater = LayoutInflater.from(context);
    }

    // 根据viewType生成对应的ViewHolder对象，ViewHolder对象
    @Override
    public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = inflater.inflate(R.layout.user_item, parent, false);
        return new RecyclerViewHolder(itemView);
    }

    // 调用数据和视图绑定功能
    @Override
    public void onBindViewHolder(RecyclerViewHolder holder, int position) {
        holder.bindView(users.get(position));
    }

    // 数据条数
    @Override
    public int getItemCount() {
        return users.size();
    }
}

这个Adapter是最简单的实现方式，只有一种视图布局类型，最后就是ViewHolder的实现了，这个类也需要继承自RecyclerView.ViewHolder类，可以看到RecyclerView封装了ViewHolder模式。

public class RecyclerViewHolder extends RecyclerView.ViewHolder {
    private ImageView portrait;
    private TextView name;
    private TextView desc;

    public RecyclerViewHolder(View itemView) {
        super(itemView);

        name = (TextView) itemView.findViewById(R.id.name);
        desc = (TextView) itemView.findViewById(R.id.desc);
        portrait = (ImageView) itemView.findViewById(R.id.portrait);
    }


    public void bindView(User user) {
        name.setText(user.getName());
        desc.setText(user.getDesc());
        portrait.setImageResource(user.getPortrait());
    }
}

代码实现都很简单，现在可以运行一下看下实现效果。
竖向RecyclerView实现
上面的实现效果和ListView基本一致，但是看不出来条目之间的分隔位置，这个只需要添加一个ItemDecoration对象就可以了，改对象有三个需要用户实现的接口方法，这里给出LinearItemDecoration的实现代码。

public class LineDecoration extends RecyclerView.ItemDecoration {
    private static final String TAG = "LineDecoration";
    private Paint paint;

    // 初始化画笔控件
    public LineDecoration() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE);
    }

    // 画出的内容在条目下方
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        Log.d(TAG, "onDraw()");
        int count = parent.getChildCount();
        for (int i = 0; i < count; i++) {
            View view = parent.getChildAt(i);
            int bottom = view.getBottom();
            c.drawRect(parent.getPaddingLeft(), bottom - CommonUtils.dp2px(25),
                    parent.getWidth() - parent.getPaddingRight(), bottom + CommonUtils.dp2px(5), paint);
        }
    }

    // 画出来的内容在条目上方
    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
//        Log.d(TAG, "onDrawOver()");
//        int count = parent.getChildCount();
//        for (int i = 0; i < count; i++) {
//            View view = parent.getChildAt(i);
//            int bottom = view.getBottom();
//            c.drawRect(parent.getPaddingLeft(), bottom - CommonUtils.dp2px(25),
//                    parent.getWidth() - parent.getPaddingRight(), bottom + CommonUtils.dp2px(5), paint);
//        }
    }

    // 为展示条目设置额外的空间
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        Log.d(TAG, "getItemOffsets()");
        outRect.bottom = CommonUtils.dp2px(5);
    }
}

getItemOffsets方法就是为了每个条目设置额外的空间，用户可以在这些空间里绘制元素。如图所示outRect的各个属性对应着各个空间位置。
outRect属性对应值
最后两张图分别对应着onDraw和onDrawOver的不同之处，用户可以清晰的看出它们之间的区别。
onDraw效果
onDrawOver效果

网格布局

网格布局采用了和GridView一样的布局方式，需要为RecyclerView设置网格布局管理器，定义网格布局的每行有三个元素。同时为了能够看到将数据分到不同的组中，这里采用了多布局样式功能。网格布局的Adapter对象定义如下：

public class GridRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    public static List<User> users = new ArrayList<User>() {
        {
            add(new User("蜀国"));
            add(new User(R.drawable.beach, "刘备", "唯贤唯德，能服于人"));
            add(new User(R.drawable.bamboo, "诸葛亮", "淡泊以明志，宁静以致远"));
            add(new User(R.drawable.road, "关羽", "安能与老兵同列"));
            add(new User(R.drawable.flower, "赵云", "子龙一身是胆"));
            add(new User("魏国"));
            add(new User(R.drawable.lake, "曹操", "宁教我负天下人，不教天下人负我"));
            add(new User(R.drawable.rain, "司马懿", "老而不死是为贼"));
            add(new User(R.drawable.sea, "司马昭", "司马昭之心路人皆知"));
            add(new User("吴国"));
            add(new User(R.drawable.moon, "孙权", "生子当如孙仲谋"));
            add(new User(R.drawable.peach, "周瑜", "既生瑜何生亮"));
            add(new User(R.drawable.pool, "吕蒙", "士别三日当刮目相待"));
        }
    };

    private Context context;
    private LayoutInflater inflater;

    public GridRecyclerAdapter(Context context) {
        this.context = context;
        this.inflater = LayoutInflater.from(context);
    }

    // 根据不同的布局样式生成不同的布局ViewHolder
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder viewHolder = null;
        if (viewType == R.layout.grid_user_item) {
            View itemView = inflater.inflate(R.layout.grid_user_item, parent, false);
            viewHolder = new RecyclerViewHolder(itemView);
        } else {
            View itemView = inflater.inflate(R.layout.state_item, parent, false);
            viewHolder = new StateViewHolder(itemView);
        }
        return viewHolder;
    }

    // 根据不同布局样式绑定布局与数据
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (getItemViewType(position) == R.layout.grid_user_item) {
            ((RecyclerViewHolder) holder).bindView(users.get(position));
        } else {
            ((StateViewHolder) holder).bindView(users.get(position));
        }
    }

    @Override
    public int getItemCount() {
        return users.size();
    }

    // 使用布局资源来区分布局的类型
    @Override
    public int getItemViewType(int position) {
        User user = users.get(position);
        if (user.isHuman()) {
            return R.layout.grid_user_item;
        } else {
            return R.layout.state_item;
        }
    }
}

RecyclerViewHolder的实现前面已经贴出来了，这里在贴出StateViewHolder：

public class StateViewHolder extends RecyclerView.ViewHolder {
    private TextView text;
    public StateViewHolder(View itemView) {
        super(itemView);
        this.text = (TextView) itemView.findViewById(R.id.text);
    }

    public void bindView(User user) {
        text.setText(user.getName());
    }
}

最后是单元格之间的分隔，单元格是二维对象，需要在右边和下边都有分隔，实现代码如下：

public class GridItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {

    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.right = CommonUtils.dp2px(1);
        outRect.bottom = CommonUtils.dp2px(3);
    }
}

最终的实现效果如下：
这里写图片描述

瀑布流布局

瀑布流布局需要定义好方向，还需要定义在这个方向上有几行（列），感觉特别像人写字，展示几行就是写几行字，定义好写几行之后在开始定义怎么写，如果是竖行需要从上向下写，如果是横行就需要从左向右写，每一行写完后再到第二行接着写，直到所有的文字都写完。

recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
StaggeredGridLayoutManager staggeredGridLayoutManager =
        new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
recyclerView.addItemDecoration(new GridItemDecoration());
recyclerView.setAdapter(new GridRecyclerAdapter(this));

设置瀑布流管理布局很简单，其他的都和GridLayoutManager一样,设置完成之后展示结果如下图：
Stagger效果
查看全部实现代码请点击查看源码

总结

RecyclerView的功能非常强大，除了上面提到的能够支持多种布局样式，它还提供了视图局部刷新功能，复杂的装饰布局支持，这些高级的用法还有待进一步学习。

xingzhong128
关注
专栏目录
RecyclerView的使用
weixin_43750332的博客
03-08 304
RecycleView的使用 源码地址： 实现效果： 一、 Recycle的简介 RecyclerView是一种新的视图组，目标是为任何基于适配器的视图提供相似的渲染方式。该控件用于在有限的窗口中展示大量数据集，它被作为ListView和GridView控件的继承者。 ​ 那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢？整体上看RecyclerView架构，提供了一种插拔式的体验，高度解耦，异常的灵活，通过设置它提供的不同LayoutManager，It
RecyclerView使用要点
Mystra
10-31 3732
RecyclerView是一种列表容器, 发布很久了, 才想起来写点什么.RecyclerView相比于ListView, 在回收重用时更具有灵活性, 也就是低耦合, 并且提供了扩展. 加载多个视图时, 应该多用RecyclerView代替ListView.那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图. 首先我们从一个HelloWorld写起, 看看如何构建一个RecyclerVie
Android RecyclerView的简单使用
最新发布
2401_87029418的博客
09-07 1194
准备子视图以显示与适配器内某个位置对应的数据的过程。：Recycler 负责管理报废或分离的项目视图以供重用。：在布局过程中进入临时分离状态的子视图。废弃视图可以被重用，而不会与父 RecyclerView 完全分离，如果不需要重新绑定则不修改，或者如果视图被认为是脏的，则由适配器修改。：必须由适配器重新绑定才能显示的子视图。常用方法：必选项，设置 RecyclerView 的布局管理器，决定RecyclerView 的显示风格。
RecyclerView 的使用
minusn的博客
06-15 2629
RecyclerView 的使用
Android RecyclerView基本使用详解
01-03
基提供几个基本的功能， 控制其显示的方式 ———>LayoutManager—(必需) 控制Item间的间隔 ———>ItemDecoration—-(非必需) 控制Item增删的动画——->ItemAnimator——(非必需) 以上就可以完成ListView大部的...
RecyclerView基本使用,加分割线,加头尾,流式布局,实现ViewPager效果等
07-10
本教程将详细介绍RecyclerView的基本使用，包括如何添加分割线、设置头尾视图、实现流式布局以及模拟ViewPager的效果。 首先，让我们了解RecyclerView的核心组件。RecyclerView由Adapter、LayoutManager和...
RecyclerView的多种使用方式.rar
07-30
这个名为"RecyclerView的多种使用方式.rar"的压缩包很可能包含了一些示例代码，展示了RecyclerView的各种实现方法和应用场景。虽然没有详细列出每个子文件的内容，但我们可以根据常见的RecyclerView用法来探讨一些...
Android RecyclerView基本使用教程与示例
本资源提供了对RecyclerView的基本使用方法的介绍和实践案例。以下内容将深入解析RecyclerView的基本概念、结构以及如何在实际开发中应用RecyclerView。 1. RecyclerView的基本概念 RecyclerView是Android Support...
RecyclerView使用
09-28
RecyclerView使用，增加一个item，删除一个item，更新数据，item点击事件，瀑布流刷新
RecyclerView简单使用
10-22
RecyclerView简单使用，详情请见我的博客：http://blog.csdn.net/allen315410/article/details/40379159
RecyclerView的使用方法
05-31
通过一个简单的demo介绍RecyclerView的使用方法
Android安卓RecyclerView横向滚动及定位（项目源码）
10-31
该资源为安卓开发中RecyclerView的使用、横向滚动及定位效果的项目源码，具体描述请参看本人博客《安卓开发：RecyclerView的使用》。
RecyclerView的使用（一）
热门推荐
weixin_40625864的博客
03-30 2万+
1.RecyclerView概述 在谷歌Android官网，给RecyclerView的描述是: 那RecyclerView凭什么要比ListView要更高级？更灵活？ 答案是，Recycler可以自定义布局管理器来决定 ...
RecyclerView 使用
qq_36157827的博客
05-26 118
RecyclerView基本使用： 开源框架BaseRecyclerViewAdapterHelper使用——RecyclerView万能适配器 开源框架BaseRecyclerViewAdapterHelper使用——RecyclerView万能适配器 - 简书 RecyclerView实现的二级列表 RecyclerView实现的二级列表 - 简书 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值