背景描述

最近开发中遇到需求，需要实现图片的格子分布效果，如下图所示

格子图片

其中要求：

1. 图片与图片的间隔，图片与屏幕的左边距，以及图片与屏幕的右边距，都为固定大小，比如10dp。
2. 图片宽高相等。

代码实现

主要代码如下

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val images = listOf(...)
        val imageAdapter = ImageAdapter(images)
        rv_images.apply {
            layoutManager = GridLayoutManager(context, 4, RecyclerView.VERTICAL, false)
            addItemDecoration(EvenItemDecoration(dp2px(context, 10), 4))
            adapter = imageAdapter
        }
    }

    class ImageAdapter(private val images: List<Int> = listOf()) : RecyclerView.Adapter<ImageAdapter.ViewHolder>() {
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
            val view = LayoutInflater.from(parent.context).inflate(R.layout.item_image, parent, false)
            // 动态设置图片大小 保证宽高相等
            val ivSize = (getScreenContentWidth(parent.context) - dp2px(parent.context, 10) * 5) / 4
            view.iv_image.layoutParams.height = ivSize
            return ViewHolder(view)
        }

        override fun onBindViewHolder(holder: ViewHolder, position: Int) {
            holder.view.iv_image.setImageResource(images[position])
        }
        ...
    }

    class EvenItemDecoration(private val space: Int, private val column: Int) : RecyclerView.ItemDecoration() {
        override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
            val position = parent.getChildAdapterPosition(view)
            // 每个span分配的间隔大小
            val spanSpace = space * (column + 1) / column
            // 列索引
            val colIndex = position % column
            // 列左、右间隙
            outRect.left = space * (colIndex + 1) - spanSpace * colIndex
            outRect.right = spanSpace * (colIndex + 1) - space * (colIndex + 1)
            // 行间距
            if (position >= column) {
                outRect.top = space
            }
        }
    }
}

布局item_image.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    android:id="@+id/iv_image"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    tools:src="@mipmap/ic_launcher"
    android:background="#ffccff"/>

其中需要注意是

1. 图片的宽度在布局和代码中不能写死，需要自适应。
2. 在代码（Adapter）中根据屏幕宽度来计算图片高度。
3. 在ItemDecoration中计算间隔。

分析-GridLayoutManger分配Item空间的机制

GridLayoutManger在绘制子View的时候，会先为它们分配固定的空间。
比如，我们这里是4列，则会为每个图片分配父布局宽度（这里是屏幕宽度） / 4的宽度大小的空间。

1. 每个图片会占据自己的空间，且不会超出这个空间。如果超出了，比如设置了很大的固定宽度，则超出的部分会被遮盖。
2. 如果使用ItemDecoration设置间隔，则间隔会占用当前图片的空间，图片会被压缩。

示例一-设置固定大宽度
在Adapter代码中设置图片的宽度并在去掉ItemDecoration

// ImageAdapter
...
val ivSize = (getScreenContentWidth(parent.context) - dp2px(parent.context, 10) * 5) / 4
view.iv_image.layoutParams.width = 1000
view.iv_image.layoutParams.height = ivSize
...

// MainActivity 中注释掉EvenItemDecoration
...
// addItemDecoration(EvenItemDecoration(dp2px(context, 10), 4))
...

结果如下：

宽度设置为1000px的图片

1. 每个图片占据的父布局的宽度是一样的，为父布局宽度除以列数，这里是1440 / 4 = 360。
2. 每个图片超出所占据空间宽度后的部分会被后面的图片或屏幕遮盖。

示例二-设置较大的左右间隔
修改EvenItemDecoration代码如下：

    class EvenItemDecoration(private val space: Int, private val column: Int) : RecyclerView.ItemDecoration() {
        override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
            outRect.left = space
            outRect.right = space
        }
    }

运行结果如下：

有间隔的Grid

最后，根据以上机制，不难理解EvenItemDecoration中的代码。

Github源代码地址:https://github.com/zhangliangnbu/gridlayout-demo

提示：文章首发我的个人博客和简书