RecyclerView使用GridLayoutManager 设置间距一致大小

这篇具有很好参考价值的文章主要介绍了RecyclerView使用GridLayoutManager 设置间距一致大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在android应用中,要实现一个Recycleview,使用GridLayoutManager格子排列,且排列成4列
实现水平方向间距均等(没有外边距)。

(均分为3列5列等、竖直方向、有边距等原理相同。)

先看最终效果图。

RecyclerView使用GridLayoutManager 设置间距一致大小


---
xml中这样配置

<androidx.recyclerview.widget.RecyclerView
    android:background="#bbffbb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:spanCount="4"
    tools:listitem="@layout/layout_item"/>

为了醒目,我们让RecyclerView背景是浅绿色。


每一个item的配置如layout_item.xml所示

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="wrap_content"
    android:background="#ffcccc"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="@+id/thumb"
        app:layout_constraintStart_toStartOf="@+id/thumb"
        app:layout_constraintTop_toBottomOf="@+id/thumb"
        tools:text='NAME' />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/thumb"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@drawable/item_bg" />

</androidx.constraintlayout.widget.ConstraintLayout>

为了醒目,我们让每一个item的背景色为浅红色。

Activity中,我们这样设置

class MyItemDecorator:RecyclerView.ItemDecoration(){
    val spanCount = 4
    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        val position = parent.getChildAdapterPosition(view)
        val column =position% spanCount //第几列
    }
}

        binding.recycleHot.addItemDecoration(MyItemDecorator())

这样的显示效果,就是,最左边item的左边距离0,最右边item的右边距离不是0。

RecyclerView使用GridLayoutManager 设置间距一致大小


如果layout_item.xml里root布局

 android:layout_width="match_parent"

显示效果为:

RecyclerView使用GridLayoutManager 设置间距一致大小

 ---

在函数

getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    )


    view.width始终是0,不管item的root布局layout_widht是match_parent还是wrap_content。
    

---
终极解法 ,

 文章来源地址https://www.toymoban.com/news/detail-420893.html

我们设每个item的左右边距分别是L0、R0、L1、R1、L2、R2、L3、R3。

RecyclerView使用GridLayoutManager 设置间距一致大小
 

我们要求边距相同,即 

R0+L1 =  R1+L2 = R2+L3 = space(间距)    

每一个item占的地方是一样的,即

L0+item内宽度+R0 = item外宽度

L1+item内宽度+R1 = item外宽度

L2+item内宽度+R2 = item外宽度

L3+item内宽度+R3 = item外宽度

L0+R0 = L1+R1 = L2+R2 = L3+R3 = item外宽度-item内宽度          (设为p)


我们知道L0==R3==0
故可以推算出

L0 = 0
R0 = p-L0= p
L1 = space - R0 = space-p
R1 = p-L1 = p-(space-p) =  p*2 -space
L2 = space -R1 = sapce - (p*2-space) = space*2 - p*2(根据对称==R1==p*2-space)
R2 = p-L2 = p-(space*2-p*2) = p*3 - space*2(根据对称==L1==space-p)
L3 = space-R2 = space-(p*3-space*2) = space*3 -p*3(根据对称==R0==p)
R3 = 0

据此,

改善代码   

 class MyItemDecorator : RecyclerView.ItemDecoration() {
        val spanCount = 4
        override fun getItemOffsets(
            outRect: Rect,
            view: View,
            parent: RecyclerView,
            state: RecyclerView.State
        ) {
            val position = parent.getChildAdapterPosition(view)
            val column = position % spanCount
            fun dp2px(dp: Int): Int {
                val scale = view.resources.displayMetrics.density
                return (dp * scale + 0.5f).toInt()
            }
            val itemWidth = parent.width / 4  //item外宽度
            val itemWidthInside = dp2px(65) //item内宽度
            val padding = itemWidth - itemWidthInside // p
            val space = (parent.width - 4 * itemWidthInside) / 3 // space
            if (column == 0) {
                outRect.left = 0
                outRect.right = padding
            } else if (column == 1) {
                outRect.left = space - (padding)
                outRect.right = padding * 2 - space
            } else if (column == 2) {
                outRect.left = space * 2 - padding * 2
                outRect.right = padding * 3 - space * 2
            } else if (column == 3) {
                outRect.left = padding
                outRect.right = 0
            }

        }
    }

layout_item.xml也要改,把root组件的layout_width固定。

android:layout_width="65dp"

这样就能实现GridLayoutManager是4列排布,各个item间距相同,最左边和最右边的item距离边框距离为0的效果。

RecyclerView使用GridLayoutManager 设置间距一致大小

 

如果RecycleView里设置了padding,比如

```
            <androidx.recyclerview.widget.RecyclerView
                android:background="#bbffbb"
+               android:paddingHorizontal="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
                app:spanCount="4"
                tools:listitem="@layout/layout_item"/>

此时,应该在Activity中,要把parent.Width改为parent.Width - parent.paddingLeft -parent.paddingRight

   override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        val position = parent.getChildAdapterPosition(view)
        val column = position % spanCount
        fun dp2px(dp: Int): Int {
            val scale = view.resources.displayMetrics.density
            return (dp * scale + 0.5f).toInt()
        }

        val parentWidth = parent.width - parent.paddingLeft - parent.paddingRight
        val itemWidth = parentWidth / 4
        val itemWidthInside = dp2px(65)
        val padding = itemWidth - itemWidthInside
        val space = (parentWidth - 4 * itemWidthInside) / 3
        when (column) {
            0 -> {
                outRect.left = 0
                outRect.right = padding
            }
            1 -> {
                outRect.left = space - (padding)
                outRect.right = padding * 2 - space
            }
            2 -> {
                outRect.left = space * 2 - padding * 2
                outRect.right = padding * 3 - space * 2
            }
            3 -> {
                outRect.left = padding
                outRect.right = 0
            }
        }
    }

效果为

RecyclerView使用GridLayoutManager 设置间距一致大小

 

到了这里,关于RecyclerView使用GridLayoutManager 设置间距一致大小的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python数据可视化】matplotlib之设置子图:绘制子图、子图共享x轴坐标、调整子图间距、设置图片大小

    文章传送门 Python 数据可视化 matplotlib之绘制常用图形:折线图、柱状图(条形图)、饼图和直方图 matplotlib之设置坐标:添加坐标轴名字、设置坐标范围、设置主次刻度、坐标轴文字旋转并标出坐标值 matplotlib之增加图形内容:设置图例、设置中文标题、设置网格效果 matplo

    2024年01月18日
    浏览(56)
  • Android Recyclerview的item间距实现

    Recyclerview中,提供了一个方法 addItemDecoration 给我们用于设置item的分割线 下面提供几个常见的分割线效果 注: 下面的 SizeUtils 是AndroidUtilCode此库里的工具类,需要添加依赖,也可以自行修改封装的方法(主要是将dp单位转为px) 以下代码已封装在我的库中stars-one/XAndroidUtil: 封装自己常

    2024年02月05日
    浏览(60)
  • Matlab 保存指定像素大小的图片, 为什么保存图的实际大小与设置的不一致?

     matlab使用getframe函数保存指定像素大小的图片。 使用 set(gcf, \\\'position\\\', [124,124,800,800]);设置图片位置和大小,可将图片保存为256x256大小。 (代码第3行) 仅把\\\'position\\\'参数从124改成125时,不能保存为期望的256x256大小,反而是320x320大小,这是为什么??(代码第4行) 试试其他几

    2024年02月12日
    浏览(49)
  • uniapp page宽度设置为750rpx,子元素宽度100%,大小不一致

    uniapp page宽度设置为750rpx,子元素宽度100%,大小不一致。 原因是我在page加了margin: 0 auto;去掉就正常了(但是如果在超大屏幕还是会出现,我猜是使用rpx导致的,rpx渲染成页面时会转成精确到一个小数点几位数的rem,这会导致计算有微小的不精确) 至于为什么加这个,是因为

    2024年01月25日
    浏览(47)
  • CSS 设置文字间距

    在 CSS 中,可以使用 letter-spacing 属性来设置字符间距。该属性控制每个字符之间的距离,可以设置负值来让字符更接近,也可以设置正值来让字符之间的距离更远。 以下是一个示例,将字符间距设置为 0.1em: 在这个示例中, p 元素中的所有文本都将具有 0.1em 的字符间距。如

    2023年04月24日
    浏览(74)
  • Cadence(九)17.4规则与间距设置

    目录 1.布线规则 2.NECK走线 ​3.差分走线相关设置  4.设置space间距  5.高亮操作  6.区域规则 1.间距规则 打开规则管理器:setup - constraints - constraints manager 首先,我们最开始打开管理器,所有走线都服从default规则,并且系统默认5mil。 我们首先在 space 选项的spacing Constraint se

    2024年01月17日
    浏览(59)
  • Python matplotlib 设置多子图、子图间距、边距

    Python matplotlib 设置多子图 设置多子图纵向间距 设置多子图横向间距 设置外边距 1. 方式一。设置一个 2*2 的相同尺寸子图,统一添加。 可选参数:sharex=True,sharey=False 共享X轴,不共享Y轴。 可选参数:facecolor 背景填充色。 figsize 图片的大小。 2. 方式二。设置一个 2*2 子图,单

    2024年02月07日
    浏览(37)
  • html 怎么设置文本对齐,文本间距,盒子居中显示

    1.在一个盒子中我们怎么让文本水平,垂直居中显示 可以看到此时文本默认是在盒子的左上角显示的,可以 添加行高 (line-height 值 与盒子高度一样就行 ),和 文本对齐方式设置为水平居中 ,代码如下:    2.怎么让盒子中的元素居中显示  这里我们可以看到,盒子中的元

    2024年02月08日
    浏览(48)
  • Qt——设置布局中特定的两个组件之间的间距

            在Qt中,如果你想要设置布局内某两个组件之间的特定间距,你可以使用`QSpacerItem`来添加一个空白区域,或者使用布局的`insertSpacing`方法(如果可用)。 你可以在两个组件之间插入一个`QSpacerItem`来创建空间。下面是一个例子:         在这个例子中,在`but

    2024年04月25日
    浏览(34)
  • Python matplotlib 设置多子图、子图间距、外边距

    Python matplotlib 设置多子图 设置多子图纵向间距 设置多子图横向间距 设置外边距 1. 方式一。设置一个 2*2 的相同尺寸子图,统一添加。 可选参数:sharex=True,sharey=False 共享X轴,不共享Y轴。 可选参数:facecolor 背景填充色。 figsize 图片的大小。 2. 方式二。设置一个 2*2 子图,单

    2024年01月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包