Android RecyclerView 详解(2)---网格布局（支持多种分割线）

最新推荐文章于 2024-09-30 15:44:47 发布
最新推荐文章于 2024-09-30 15:44:47 发布
阅读量3.2w 收藏 22
点赞数 6
分类专栏： Android 基础详解 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010784887/article/details/53860231
版权

上篇Android RecyclerView 详解(1)—线性布局
记录了下RecyclerView的使用方法，并且讲述了线性布局列表的使用方法，在此基础上加上了万能分割线，支持颜色分割线和图片分割线，同时支持对分割线设置线宽。
这篇是总结一下网格布局的使用，同样也支持两种分割线和线宽的设置。

主要的相关类：

1. RecyclerView.Adapter

2. GridLayoutManager 网格布局管理器

3. RecycleView.ItemDecoration 分割线

下面就直接通过一个例子来展示：

先上效果图：

(1) 颜色分割线

这里写图片描述

看起来还不错吧，根据item的数量去显示格子，当然如果你需要的样式不是三列，这个很简单，只需要在设置
GridLayoutManager的时候设置相应的列数即可，即：

mManagerLayout = new GridLayoutManager(getActivity(), 3);

(2) 图片分割线

这里写图片描述

可能有人会说你的列表四周都有分割线，其实在不做特殊处理时左边和上面默认是没有分割线的。后面我会加上四周没有分割线的，其实这两种形式在实际开发中都是常见的，先来看四周都有边线的。

由于RecycleView是高度解耦的控件，绘制分割线只和 RecycleView.ItemDecoration 有关，所以我们只需关心怎么去继承 RecycleView.ItemDecoration 去实现我们所需的分割线，如下：

这里需要说明的是：颜色分割线和图片分割线原理是完全一样的，图片分割线只是将一张很细的图片传入即可。

public class GridDivider extends RecyclerView.ItemDecoration {
    private Drawable mDividerDarwable;
    private int mDividerHight = 1;
    private Paint mColorPaint;
    public final int[] ATRRS = new int[]{android.R.attr.listDivider};

    public GridDivider(Context context) {
        final TypedArray ta = context.obtainStyledAttributes(ATRRS);
        this.mDividerDarwable = ta.getDrawable(0);
        ta.recycle();
    }

    /*
     int dividerHight  分割线的线宽
     int dividerColor  分割线的颜色
     */
    public GridDivider(Context context, int dividerHight, int dividerColor) {
        this(context);
        mDividerHight = dividerHight;
        //绘制颜色分割线的画笔
        mColorPaint = new Paint();
        mColorPaint.setColor(dividerColor);
    }

    /*
     int dividerHight  分割线的线宽
     Drawable dividerDrawable  图片分割线
     */
    public GridDivider(Context context, int dividerHight, Drawable dividerDrawable) {
        this(context);
        mDividerHight = dividerHight;
        mDividerDarwable = dividerDrawable;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        //画水平和垂直分割线
        drawHorizontalDivider(c, parent);
        drawVerticalDivider(c, parent);
    }

    public void drawVerticalDivider(Canvas c, RecyclerView parent) {
        // 这里传入的parent是recycleview，通过它我们可以获取列表的所有的元素，
        // 这里我们遍历列表中的每一个元素，对每一个元素绘制垂直分割线
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            //获取当前item布局参数，通过它可以知道该item的精确位置，我们通过这个位置去绘制它的分割线
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            final int top = child.getTop() - params.topMargin;
            final int bottom = child.getBottom() + params.bottomMargin;

            int left = 0;
            int right = 0;

            //左边第一列，
            if ((i % 3) == 0) {
                //item左边分割线
                left = child.getLeft();
                right = left + mDividerHight;
                mDividerDarwable.setBounds(left, top, right, bottom);
                mDividerDarwable.draw(c);
                if (mColorPaint != null) {//如果是颜色分割线
                    c.drawRect(left, top, right, bottom, mColorPaint);
                }
                //item右边分割线
                left = child.getRight() + params.rightMargin - mDividerHight;
                right = left + mDividerHight;
            } else {
                //非左边第一列
                left = child.getRight() + params.rightMargin - mDividerHight;
                right = left + mDividerHight;
            }
            //画分割线
            mDividerDarwable.setBounds(left, top, right, bottom);
            mDividerDarwable.draw(c);
            if (mColorPaint != null) {
                c.drawRect(left, top, right, bottom, mColorPaint);
            }
        }
    }
    //....水平分割线与垂直分割线类似，完整代码见下。
}

下面是完整代码：

1. MainActivity

public class MainActivity extends AppCompatActivity {

    private GridFragment mGridFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //网格
        mGridFragment = new GridFragment();
        getFragmentManager().beginTransaction().replace(R.id.activity_main, mGridFragment).commit();
    }

activity_main

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

2. GridFragment

public class GridFragment extends Fragment implements View.OnClickListener{

    private RecyclerView mRecycleViewDrawable;
    private RecyclerView mRecycleViewColor;
    private LinearLayoutManager mManagerColor;
    private LinearLayoutManager mManagerDrawable;
    private List<String> mData;
    private Button mDrawable;
    private Button mColor;
    private MyRecycleViewAdapter mRecycleViewAdapter;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_grid_layout, container, false);
        mRecycleViewDrawable = (RecyclerView) view.findViewById(R.id.recycleview_drawable);
        mRecycleViewColor = (RecyclerView) view.findViewById(R.id.recycleview_color);

        mDrawable = (Button) view.findViewById(R.id.btn_drawable);
        mDrawable.setOnClickListener(this);
        mColor = (Button) view.findViewById(R.id.btn_color);
        mColor.setOnClickListener(this);

        //设置颜色分割线
        mManagerColor = new GridLayoutManager(getActivity(), 3);
        mRecycleViewColor.setLayoutManager(mManagerColor);
        mRecycleViewColor.addItemDecoration(new GridDivider(getActivity(), 20, this.getResources().getColor(R.color.colorAccent)));

        //设置图片分割线
        mManagerDrawable = new GridLayoutManager(getActivity(), 3);
        mRecycleViewDrawable.setLayoutManager(mManagerDrawable);
        Drawable drawable = ContextCompat.getDrawable(getActivity(), R.mipmap.divider);
        mRecycleViewDrawable.addItemDecoration(new GridDivider(getActivity(), 20, drawable));

        //初始化数据
        mData = new ArrayList<String>();
        initData(mData);
        mRecycleViewAdapter = new MyRecycleViewAdapter(getActivity(), R.layout.item_grid_recycleview, mData);

        mRecycleViewColor.setAdapter(mRecycleViewAdapter);
        mRecycleViewDrawable.setAdapter(mRecycleViewAdapter);

        return view;
    }

    private void initData(List<String> dataList) {
        for (int i = 0; i < 16; i++) {
            dataList.add("item" + i);
        }
    }

    @Override
    public void onClick(View view) {
        int id = view.getId();
        switch (id){
            case R.id.btn_drawable:
                mRecycleViewColor.setVisibility(View.INVISIBLE);
                mRecycleViewDrawable.setVisibility(View.VISIBLE);
                break;

            case R.id.btn_color:
                mRecycleViewColor.setVisibility(View.VISIBLE);
                mRecycleViewDrawable.setVisibility(View.INVISIBLE);
                break;
        }
    }
}

3.分割线 GridDivider

直接继承 RecyclerView.ItemDecoration

public class GridDivider extends RecyclerView.ItemDecoration {

    private Drawable mDividerDarwable;
    private int mDividerHight = 1;
    private Paint mColorPaint;


    public final int[] ATRRS = new int[]{android.R.attr.listDivider};

    public GridDivider(Context context) {
        final TypedArray ta = context.obtainStyledAttributes(ATRRS);
        this.mDividerDarwable = ta.getDrawable(0);
        ta.recycle();
    }

    /*
     int dividerHight  分割线的线宽
     int dividerColor  分割线的颜色
     */
    public GridDivider(Context context, int dividerHight, int dividerColor) {
        this(context);
        mDividerHight = dividerHight;
        mColorPaint = new Paint();
        mColorPaint.setColor(dividerColor);
    }

    /*
     int dividerHight  分割线的线宽
     Drawable dividerDrawable  图片分割线
     */
    public GridDivider(Context context, int dividerHight, Drawable dividerDrawable) {
        this(context);
        mDividerHight = dividerHight;
        mDividerDarwable = dividerDrawable;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        //画水平和垂直分割线
        drawHorizontalDivider(c, parent);
        drawVerticalDivider(c, parent);
    }

    public void drawVerticalDivider(Canvas c, RecyclerView parent) {
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            final int top = child.getTop() - params.topMargin;
            final int bottom = child.getBottom() + params.bottomMargin;

            int left = 0;
            int right = 0;

            //左边第一列
            if ((i % 3) == 0) {
                //item左边分割线
                left = child.getLeft();
                right = left + mDividerHight;
                mDividerDarwable.setBounds(left, top, right, bottom);
                mDividerDarwable.draw(c);
                if (mColorPaint != null) {
                    c.drawRect(left, top, right, bottom, mColorPaint);
                }
                //item右边分割线
                left = child.getRight() + params.rightMargin - mDividerHight;
                right = left + mDividerHight;
            } else {
                //非左边第一列
                left = child.getRight() + params.rightMargin - mDividerHight;
                right = left + mDividerHight;
            }
            //画分割线
            mDividerDarwable.setBounds(left, top, right, bottom);
            mDividerDarwable.draw(c);
            if (mColorPaint != null) {
                c.drawRect(left, top, right, bottom, mColorPaint);
            }

        }
    }

    public void drawHorizontalDivider(Canvas c, RecyclerView parent) {

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            final int left = child.getLeft() - params.leftMargin - mDividerHight;
            final int right = child.getRight() + params.rightMargin;
            int top = 0;
            int bottom = 0;

            // 最上面一行
            if ((i / 3) == 0) {
                //当前item最上面的分割线
                top = child.getTop();
                //当前item下面的分割线
                bottom = top + mDividerHight;
                mDividerDarwable.setBounds(left, top, right, bottom);
                mDividerDarwable.draw(c);
                if (mColorPaint != null) {
                    c.drawRect(left, top, right, bottom, mColorPaint);
                }
                top = child.getBottom() + params.bottomMargin;
                bottom = top + mDividerHight;
            } else {
                top = child.getBottom() + params.bottomMargin;
                bottom = top + mDividerHight;
            }
            //画分割线
            mDividerDarwable.setBounds(left, top, right, bottom);
            mDividerDarwable.draw(c);
            if (mColorPaint != null) {
                c.drawRect(left, top, right, bottom, mColorPaint);
            }
        }
    }
}

4. Adapter

public class MyRecycleViewAdapter extends RecyclerView.Adapter<MyRecycleViewAdapter.MyViewHolder> {

    private LayoutInflater mLayoutInflater;
    private List<String> mDataList;
    private int mItemLayout;

    public MyRecycleViewAdapter(Context context, int itemLayout, List<String> datalist) {
        mLayoutInflater = LayoutInflater.from(context);
        mItemLayout = itemLayout;
        mDataList = datalist;
    }

    @Override
    public MyRecycleViewAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyViewHolder(mLayoutInflater.inflate(mItemLayout, parent, false));
    }

    @Override
    public void onBindViewHolder(MyRecycleViewAdapter.MyViewHolder holder, int position) {
        holder.mTextView.setText(mDataList.get(position));
    }

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


    class MyViewHolder extends RecyclerView.ViewHolder {

        private TextView mTextView;

        public MyViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.tv);
        }
    }
}

adapter 的item布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="60dp"/>

</FrameLayout>

未完待续……

青雨xh
关注
专栏目录
Android RecyclerView的网格布局展示
DevGlider的博客
08-18 1108
在上述代码中，我们定义了一个GridAdapter类，它接收一个字符串列表作为数据源。然后，在onBindViewHolder方法中，我们根据position获取对应位置的数据，并将其绑定到ViewHolder中的TextView上。在上述代码中，我们首先找到RecyclerView控件，并为其设置一个GridLayoutManager作为布局管理器，用来控制网格布局的显示方式。完成以上步骤后，运行应用程序，你将看到一个以网格布局展示的RecyclerView，每个网格项都包含一个文本视图显示相应的数据。
Android：RecyclerView实现网格布局GridLayout
热门推荐
weixin_49083184的博客
10-19 1万+
模仿企业微信工作台界面
android recyclerview grid 分割线
Cat的专栏
10-20 1229
recyclerview 系统提供了默认的分割线。调用很方便。 不过，这里的系统默认分割线其实只针对类似 listview/或者是横向listview这种场景去使用的。 对于 gridview 模式下，或者是瀑布流模式下，使用默认的分割线就不能达到预期效果了。 针对这个问题，我参考了系统默认分割线的源码，提供了一种解决方案，感觉还是蛮好用的。 先看一下效果图： 关键代码如下： private ...
封装Recyclerview，使用起来超级方便
最新发布
qq_45372239的博客
09-30 804
每次写recyclerview的时候需要写很多的代码，因此对其进行封装，调用的时候两三行代码搞定。
Android RecyclerView网格布局（支持多种分割线）详解(2)
08-31
主要为大家详细介绍了Android RecyclerView网格布局，支持多种分割线，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
RecyclerView 实现网格布局并实现单选功能
05-17
RecyclerView可以代替listview,GridView,在这里用RecyclerView代替传统的GridView(网格布局),并实现单选效果
android 分割线布局,Android RecyclerView网格布局（支持多种分割线）详解(2)
weixin_31599065的博客
05-25 1289
记录了下RecyclerView的使用方法，并且讲述了线性布局列表的使用方法，在此基础上加上了万能分割线，支持颜色分割线和图片分割线，同时支持对分割线设置线宽。这篇是总结一下网格布局的使用，同样也支持两种分割线和线宽的设置。主要的相关类：1. RecyclerView.Adapter2. GridLayoutManager 网格布局管理器3. RecycleView.ItemDecoration ...
Android RecyclerView网格布局详解：支持多种分割线
"Android RecyclerView网格布局支持多种分割线的详解" 在Android开发中，RecyclerView是一个非常重要的组件，用于展示可滚动的数据列表。它替代了ListView，提供了更强大的性能和更多的自定义选项。本篇内容主要...
Android RecyclerView详解及简单实例
08-31
【Android RecyclerView详解】 Android RecyclerView 是一个强大的视图组件，它在Android 5.0（API级别21）中被引入，用于替代ListView等传统的列表视图。RecyclerView的主要优点在于其高度可定制化和高效的内存...
RecyclerView 网格布局是设置分割线
hasayaqimomo的专栏
04-12 2855
1.分割线 public class DividerGridItemDecoration extends RecyclerView.ItemDecoration { private static final int[] ATTRS = new int[]{android.R.attr.listDivider}; private Drawable mDivider; ...
RecyclerView中利用GridLayoutManager实现item四周都带有分割线效果
06-01
RecyclerView中利用GridLayoutManager实现item四周都带有分割线效果，博客链接：http://blog.csdn.net/abfo12
RecyclerView中利用GridLayoutManager实现item四周都带有分割线效果(更正版!!!)
12-02
首先感谢博客里面评论的朋友们，修复了布局中recyclerview设置了padding，但是代码中没考虑进去的bug 博客链接：http://blog.csdn.net/abfo12
给RecyclerView增加分割线以及点击事件等
01-23
利用RecyclerView实现了线性布局，网格布局，瀑布流等效果，以及 继承ItemDecoration实现线性布局分割线以及网格布局的分割线实现，给RecyclerView的Item添加了点击事件以及长按点击事件等
RecyclerView自定义Grid（网格）布局分割线
weixin_42405014的博客
08-26 1423
这次主要是介绍分割线的写法以及recyclerView的删除和添加功能。 本文参考链接： Android RecyclerView 使用完全解析 体验艺术般的控件ItemDecoration解析(一) getItemOffsetsRecyclerView 更新单个item时，闪烁问题的处理getIntrinsicWidth()和getIntrinsicHeight()方法理解误区 效果图 点击添加在列表末尾增加一个新的item，每个item右上角可删除该item。 分割线写法 其实Rec
RecyclerView 网格布局
weixin_30404405的博客
08-13 497
上面我们介绍的就是?RecyclerView 线性布局的使用，效果还是不错的，一般可以用于浏览个人信息列表操作。接着，我们来看第二种布局形式：网格布局。 ? ? 网格布局也是非常常用的，一般用于图片相册的浏览，接下来的工作就是复制粘贴一下原先的代码就可以了，因为适配器里面的代码几乎一个样，我们可以考虑把它封装起来用，不过现在还是怎么方便怎么来。 ? ? 对于线性布局来说，网格布局是需要做一定量...
RecyclerView网格布局
LyInHeart的博客
09-24 3323
GridLayoutManager
Recyclerview网格布局学习备忘
sdaujz的博客
08-12 224
网格分割线，网格布局代码：
RecyclerView（2）网格布局
一岁啊
12-12 306
这是网格布局，和线性布局相差无几，布局方面发生点改动即可 先来看看效果图 Activity代码 package com.example.recyclerview.activity; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.w...
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值