背景描述

最近開發(fā)中遇到需求悴品，需要實現(xiàn)圖片的格子分布效果，如下圖所示

格子圖片

其中要求：

1. 圖片與圖片的間隔简烘，圖片與屏幕的左邊距苔严，以及圖片與屏幕的右邊距，都為固定大小孤澎，比如10dp届氢。
2. 圖片寬高相等。

代碼實現(xiàn)

主要代碼如下

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)
            // 動態(tài)設(shè)置圖片大小 保證寬高相等
            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. 圖片的寬度在布局和代碼中不能寫死退子，需要自適應(yīng)。
2. 在代碼（Adapter）中根據(jù)屏幕寬度來計算圖片高度型将。
3. 在ItemDecoration中計算間隔寂祥。

分析-GridLayoutManger分配Item空間的機制

GridLayoutManger在繪制子View的時候，會先為它們分配固定的空間七兜。
比如丸凭，我們這里是4列，則會為每個圖片分配父布局寬度（這里是屏幕寬度） / 4的寬度大小的空間腕铸。

1. 每個圖片會占據(jù)自己的空間惜犀，且不會超出這個空間。如果超出了恬惯，比如設(shè)置了很大的固定寬度向拆，則超出的部分會被遮蓋。
2. 如果使用ItemDecoration設(shè)置間隔酪耳，則間隔會占用當前圖片的空間，圖片會被壓縮。

示例一-設(shè)置固定大寬度
在Adapter代碼中設(shè)置圖片的寬度并在去掉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))
...

結(jié)果如下：

寬度設(shè)置為1000px的圖片

1. 每個圖片占據(jù)的父布局的寬度是一樣的噪奄，為父布局寬度除以列數(shù)死姚，這里是1440 / 4 = 360。
2. 每個圖片超出所占據(jù)空間寬度后的部分會被后面的圖片或屏幕遮蓋勤篮。

示例二-設(shè)置較大的左右間隔
修改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
        }
    }

運行結(jié)果如下：

有間隔的Grid

最后，根據(jù)以上機制巫击，不難理解EvenItemDecoration中的代碼榆芦。

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

提示：文章首發(fā)我的個人博客和簡書