尝试以编程方式均匀分布网格布局

Question

我有一个GridLayout，它应该显示均匀分布的 25 个按钮。为了能够设置onClickListener 而无需调用每个人，我想以编程方式执行此操作。 我用网格本身制作了一个布局资源文件来绑定它并能够膨胀它

activity.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bingo_grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:columnCount="5"
    android:rowCount="5"
    tools:context=".BingoActivity" />

现在我正在创建字段：

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val bingoField = (1).rangeTo(25).toSet().toIntArray()
        binding = BingoActivityBinding.inflate(layoutInflater)

        setContentView(binding.root)
        binding.bingoGrid.alignmentMode = GridLayout.ALIGN_BOUNDS

        val bingoFieldGrid = binding.bingoGrid
        bingoFieldGrid.alignmentMode = GridLayout.ALIGN_BOUNDS
        bingoField.forEach {
            val button = createButton(it.toString())
            val gridLayoutParams = GridLayout.LayoutParams().apply {
                rowSpec = spec(GridLayout.UNDEFINED, GridLayout.CENTER, 1f)
                columnSpec = spec(GridLayout.UNDEFINED, GridLayout.CENTER, 1f)
                height = GridLayout.LayoutParams.WRAP_CONTENT
                width = GridLayout.LayoutParams.WRAP_CONTENT
            }

            bingoFieldGrid.addView(button, gridLayoutParams)
        }
    @RequiresApi(Build.VERSION_CODES.M)
    private fun createButton(buttonText: String): Button {
        var isCompleted = false
        return Button(baseContext).apply {
            setBackgroundColor(getColor(R.color.red))
            gravity = Gravity.CENTER
            text = buttonText
            setOnClickListener {
                isCompleted = if (!isCompleted) {
                    setBackgroundColor(getColor(R.color.green))
                    true
                } else {
                    setBackgroundColor(getColor(R.color.red))
                    false
                }
            }
        }
    }

所以，这些字段是自动生成的，没有问题，但是间距不对：

我对旧布局很陌生，有没有办法轻松实现？

Answer 1

您正在创建两种不同类型的 LayoutParams，这是没有意义的。根本不应该涉及 LinearLayout。

它们的工作方式是每个孩子都应该获得一组与其父 ViewGroup 使用的 LayoutParams 类型相匹配的 LayoutParams。所以在这种情况下，父级是 GridLayout，所以每个子级都应该使用 GridLayout.LayoutParams 的实例来添加。

GridLayout.LayoutParams 的工作方式是定义一个行规范和一个列规范来描述孩子应该如何占据单元格。我们希望他们采用单个下一个单元格，因此我们可以将第一个参数保留为 UNDEFINED。我们需要给它们一个相等的weight 大于 0，以便它们都均匀地共享剩余空间。我使用1f 来表示重量。

我对按钮使用大小为 0 的 FILL，以便它们填充它们的单元格。边距使它们之间产生了一些差距。

我将高度和宽度设置为 0 以防止它们过大。如果行或列变得太大而无法适应屏幕，布局就会变得太大。

您可能想要使用 MaterialButton 而不是普通的 Button，这样您就可以轻松地为背景色着色，而无需简单地将其设为静态纯色矩形。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = BingoBinding.inflate(layoutInflater)
    setContentView(binding.root)

    binding.bingoGrid.alignmentMode = GridLayout.ALIGN_BOUNDS

    for (num in 1..25) {
        val button = MaterialButton(this).apply {
            setBackgroundColor(resources.getColor(R.color.blue_500))
            gravity = Gravity.CENTER
            text = num.toString()
            setPadding(0)
        }
        val params = GridLayout.LayoutParams().apply {
            rowSpec = spec(GridLayout.UNDEFINED, GridLayout.FILL, 1f)
            columnSpec = spec(GridLayout.UNDEFINED, GridLayout.FILL, 1f)
            width = 0
            height = 0
            setMargins((4 * resources.displayMetrics.density).toInt())
        }
        binding.bingoGrid.addView(button, params)
    }

}

AndroidStudio 对导入 spec 函数感到很厌烦。我必须在顶部手动添加：

import android.widget.GridLayout.Spec.*

Answer 2

你可以考虑谷歌 ConstraintLayout Flows:

要设置元素的数量，请使用app:flow_maxElementsWrap="5"

布局：

<?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"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:flow_horizontalGap="8dp"
        app:flow_maxElementsWrap="5"
        app:flow_verticalGap="8dp"
        app:flow_verticalStyle="packed"
        app:flow_wrapMode="chain" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后以编程方式将按钮添加到ConstraintLayout：

val root = findViewById<ViewGroup>(R.id.root)
val size = 25
val array = IntArray(size)
for (i in 0 until size) {
    array[i] = i + 1
    val button = Button(this).apply {
        layoutParams = ViewGroup.LayoutParams(0, 0)
        id = i + 1
        text = (i + 1).toString()
    }
    root.addView(button)
}
val flow = findViewById<Flow>(R.id.flow)
flow.referencedIds = array

提示：您可以使用WRAP_CONTENT 作为按钮高度以避免拉长按钮高度。