開發筆記-RecyclerView使用GridLayoutManager實現Item均勻分佈

摘要： 背景描述 最近開發中遇到需求，需要實現圖片的格子分佈效果，如下圖所示 格子圖片 其中要求： 10dp 程式碼實現 主要程式碼如下 class MainActivity : AppCompatActivity() { ...

背景描述

最近開發中遇到需求，需要實現圖片的格子分佈效果，如下圖所示

其中要求：

10dp

程式碼實現

主要程式碼如下

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))
...

結果如下：

通過Studio自帶 Layout Inspector 可以檢視每個圖片的左右位置，第一行圖片的 mLeft 分為0、360、720、1080，對應的 mRight 是 mLeft + 1000。

以上示例說明

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
}
}

執行結果如下：

通過 Layout Inspector 檢視每個圖片的左右位置，第一行圖片的 mLeft 分為35（0 +35）、395（360+35）、755（720+35）、1115（1080+35），對應的mRight分別是325（360-35）、685（720-35）、1045（1080-35）、1405（1440-35）。

說明設定的間隔的確佔用了對應圖片之前分配的空間。

最後，根據以上機制，不難理解 EvenItemDecoration 中的程式碼。

Github原始碼地址: ofollow,noindex">https://github.com/zhangliangnbu/gridlayout-demo

提示：文章首發 我的個人部落格 和 簡書