android n等分 layout,RecyclerView GridLayoutManager 等分间距
RecyclerView 表格实现
RecyclerView 配合GridLayoutManager 可以实现类似表格的样式,为了实现均分,adapter 的布局宽度改为匹配父元素,即 android:layout_width="match_parent" 。
RecyclerView rvPhotoAlbums = findViewById(R.id.rv_photoAlbums_content);
rvPhotoAlbums.setLayoutManager(new GridLayoutManager(this, 4));
rvPhotoAlbums.setAdapter(new PhotoAlbumsAdapter());
复制代码
效果图如下:
添加间距 ItemDecoration
ItemDecoration 源码分析
androidx.recyclerview.widget.RecyclerView#addItemDecoration(androidx.recyclerview.widget.RecyclerView.ItemDecoration)。
先简单看下 ItemDecoration 里的方法:
public abstract static class ItemDecoration{
// ....省略其他方法介绍.....
/**
* Retrieve any offsets for the given item. Each field of outRect
specifies
* the number of pixels that the item view should be inset by, similar to padding or margin.
* The default implementation sets the bounds of outRect to 0 and returns.
* 解读:获取给定item view的偏移量,用outRect 表示。outRect的每个字段分别表示不同方向的偏移量,类似于填充或边距。
* 默认设置为0,即没有间距。
*
*
* If this ItemDecoration does not affect the positioning of item views, it should set
* all four fields of outRect
(left, top, right, bottom) to zero
* before returning.
* 如果不想影响item view 的位置,需要置outRect 的left, top, right, bottom 为0
*
*
* If you need to access Adapter for additional data, you can call
* {@link RecyclerView#getChildAdapterPosition(View)} to get the adapter position of the
* View.
*
* @param outRect Rect to receive the output.
* @param view The child view to decorate
* @param parent RecyclerView this ItemDecoration is decorating
* @param state The current state of RecyclerView.
*/
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view,
@NonNull RecyclerView parent, @NonNull State state){
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
parent);
}
}
复制代码
通过代码注释我们知道,可以通过继承 androidx.recyclerview.widget.RecyclerView.ItemDecoration 类处理间距。
自定义ItemDecoration
public class GridSpaceItemDecoration extends RecyclerView.ItemDecoration{
private int mSpanCount;//横条目数量
private int mRowSpacing;//行间距
private int mColumnSpacing;// 列间距
/**
* @param spanCount 列数
* @param rowSpacing 行间距
* @param columnSpacing 列间距
*/
public GridSpaceItemDecoration(int spanCount, int rowSpacing, int columnSpacing){
this.mSpanCount = spanCount;
this.mRowSpacing = rowSpacing;
this.mColumnSpacing = columnSpacing;
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state){
int position = parent.getChildAdapterPosition(view); // 获取view 在adapter中的位置。
int column = position % mSpanCount; // view 所在的列
// 列间距
outRect.left = mColumnSpacing;
// 如果position > 行数,说明不是在第一行,则不指定行高,其他行的上间距为 top=mRowSpacing
if (position >= mSpanCount) {
outRect.top = mRowSpacing; // item top
}
}
}
复制代码
添加ItemDecoration
// 添加间距
rvPhotoAlbums.addItemDecoration(new GridSpaceItemDecoration(4,
DpPxSpTool.INSTANCE.dip2px(this, 30),
DpPxSpTool.INSTANCE.dip2px(this, 20)));
复制代码
ok,我们看下效果:
(注:为了区分item view范围,我用不同的颜色描边来识别)
可以看出,item 整体偏右,这是因为GridLayoutManager 已经给item 划分了宽度,而我们在ItemDecoration 中给item view设置了左边距,所以会出现整体偏右,内容挤压的情况。
等分间距
实现思路
为了达到同等间距,我们需要同时设置item 的左右边距,并且使 左边view 的边距+ 右边view 的左边距 = 设置的列间距,从视觉效果上看起来是同等分间距。
先来梳理下等间距需要满足的条件:
各个模块的大小相等,即各列的left+right 值相等;
各列的间距相等,即前列的right + 后列的left = 列间距;
假设列间距为10,为了方便识别,我用字母代替所在列。
以2列为例:
检查条件1 :a.left +a.right = b.left+b.right = 5 结果:满足
检查条件2:a.right + b.left = 10 结果:满足
以3列为例:
检查条件1 :a.left +a.right = b.left+b.right = c.left+c.right ≈ 6.66 结果:满足
检查条件2:a.right + b.left = b.right + c.left ≈ 10 结果:满足
根据推演我们可以得出公式:
某列的left = 所在的列数 * (列间距 * (1 / 列数))
某列的right = 列间距 - 后列的left = 列间距 -(所在的列数+1) * (列间距 * (1 / 列数))
注:这里用的所在列数为从0开始
最终实现
/**
* 描述 : RecyclerView GridLayoutManager 等间距。
*
* 等间距需满足两个条件:
* 1.各个模块的大小相等,即 各列的left+right 值相等;
* 2.各列的间距相等,即 前列的right + 后列的left = 列间距;
*
* 在{@link #getItemOffsets(Rect, View, RecyclerView, RecyclerView.State)} 中针对 outRect 的left 和right 满足这两个条件即可
*
* 作者 : shiguotao
* 版本 : V1
* 创建时间 : 2020/3/19 4:54 PM
*/
public class GridSpaceItemDecoration extends RecyclerView.ItemDecoration{
private final String TAG = "GridSpaceItemDecoration";
private int mSpanCount;//横条目数量
private int mRowSpacing;//行间距
private int mColumnSpacing;// 列间距
/**
* @param spanCount 列数
* @param rowSpacing 行间距
* @param columnSpacing 列间距
*/
public GridSpaceItemDecoration(int spanCount, int rowSpacing, int columnSpacing){
this.mSpanCount = spanCount;
this.mRowSpacing = rowSpacing;
this.mColumnSpacing = columnSpacing;
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state){
int position = parent.getChildAdapterPosition(view); // 获取view 在adapter中的位置。
int column = position % mSpanCount; // view 所在的列
outRect.left = column * mColumnSpacing / mSpanCount; // column * (列间距 * (1f / 列数))
outRect.right = mColumnSpacing - (column + 1) * mColumnSpacing / mSpanCount; // 列间距 - (column + 1) * (列间距 * (1f /列数))
Log.e(TAG, "position:" + position
+ " columnIndex: " + column
+ " left,right ->" + outRect.left + "," + outRect.right);
// 如果position > 行数,说明不是在第一行,则不指定行高,其他行的上间距为 top=mRowSpacing
if (position >= mSpanCount) {
outRect.top = mRowSpacing; // item top
}
}
}
复制代码
效果:
打完,收工!
android n等分 layout,RecyclerView GridLayoutManager 等分间距相关推荐
- 强大的Android控件之RecyclerView体验艺术般的控件
概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用. 据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件 ...
- Android监听左右滑删除通知,Android 滑动监听RecyclerView线性流+左右划删除+上下移动...
废话不多说了,直接给大家贴代码了.具体代码如下所示: xmlns:tools="http://schemas.android.com/tools" android:layout_w ...
- AndroidStudio中提示:Didn‘t find class “android.support.v7.widget.RecyclerView“
场景 在Android Studio中使用Recycle View时提示: Didn't find class "android.support.v7.widget.RecyclerView ...
- Android 第二十一课 RecyclerView简单的应用之编写“精美”的聊天页面
1.由于我们会使用到RecyclerView,因此首先需要在app/build.gradle当中添加依赖库.如下: apply plugin: 'com.android.application' .. ...
- android 日程安排view,RecyclerView 列表控件中简单实现时间线
时间 时间,时间,时间啊:走慢一点吧- 看见很多软件中都有时间线的东西,貌似天气啊,旅游啊什么的最多了:具体实现方式很多,在本篇文章中讲解一种自定义View封装的方式. 效果 先来看看效果. 分析 软 ...
- android view选中状态,RecyclerView选中
###**RecyclerView选中状态** ~~~ package com.wxx.fragmentaction.recycler; import android.content.Context; ...
- Android开发学习之RecyclerView+CardView的使用
介绍 RecyclerView是一种高级的ListView,以后可以用它来代替ListView CardView则是一种更好看的视图,使用比较简单,这里我把他俩放在一起介绍 基本使用步骤 导入依赖 我 ...
- Android Studio中的RecyclerView的使用方法实例分析
RecyclerView的使用方法实例分析 话不多说直接上代码 主文件的布局文件,定义一个RecyclerView列表 <?xml version="1.0" encodin ...
- android横向瀑布流布局,ReCyclerView实现瀑布流布局
一.导入ReCyclerView包到项目 打开工程目录 添加compile'com.android.support:recyclerview-v7:25.0.1' 0 添加 二.创建实体类 3.创建适 ...
最新文章
- DSP 28335中GPIO配置
- 前端学习(810):webapi和js的关联性
- ruby 类方法与实例方法_Ruby Set相交? 实例方法
- 再把鼻子涂黑的飞鸽沟通最简单
- springboot开启声明式事务
- 苏宁启动30周年庆:联合近300个品牌启动“超级品牌季”
- boot客户管理系统实训报告_客户太多,客户转化困难?分析报告迟迟出不来,CRM客户管理系统助你一臂之力...
- 2021考研初试成绩多少分过线?
- 机器学习作业班_python实现支持向量机
- MVC学习第七节 UrlHelper
- h3c无线控制器ac配置
- 万能五笔输入法弹窗_万能五笔输入法的广告怎么关闭
- 微信开发之data:image/png;base64,
- fiddler手机抓包配置代理后没有网络(手机不能上网)
- 合作:对应fork来的项目进行修改操作
- 计算机的基础配置,教你认知电脑基本配置
- 5 个 GitHub 项目拿下 Linux
- verlay虚拟化技术_Overlay介绍
- dell进入u盘启动模式_台式戴尔电脑U盘装系统按F几是u盘启动
- 【LA 4728】Square, Seoul 2009 (凸包,旋转卡壳)
热门文章
- python写一个自动登录脚本_Python 脚本登录交换机实现自动配置备份
- Cow Toll Paths(floyd变形)
- 宜搭数据量扩容升级公告
- 干货 | 应用性能提升 70%,探究 mPaaS 全链路压测的实现原理和实施路径
- 阿里云边缘云全新架构升级,助力CDN操控新体验
- 阿里云低延时直播RTS能力升级,让直播推流效果更佳
- 冷链食品竟然也有 “身份证”?
- 2020 前端开源领域技术展望
- MySQLWorkbench链接MySQL数据库
- 不重复的随机数JAVA、C#·适合初级人员玩耍。