在 Android ConstraintLayout 中创建网格 (n × n)，n 的数量可变

Question

我想在 ConstraintLayout 内创建一个正方形网格。我的第一个想法是创建一个水平链，提供一些边距值并将所有单个视图大小属性设置为 width = match_constraint、height = match_constraint 并将比率设置为 1:1。它有效，看起来像：

当网格的大小为 2×2 时，这很容易 - 有 4 个元素，所以很容易。但是当我必须创建一个 7×7 的网格时我应该怎么做？我们有 49 个视图，因此设置所有这些视图可能很棘手。我想在约束布局中这样做，因为我想要一个灵活的布局。 :)

Answer 1

最好的想法是创建两个视图线性布局，一个具有水平对齐方式，另一个具有垂直对齐方式。垂直对齐的组是您在布局中调用并作为属性传递给它的数字 (7)。该组将向自身添加水平组 7 次。每个水平布局将依次取一个数字 (7)。这将增加 7 个方块。诀窍是看到每个方块都具有相同的重量。每个水平行将具有相同的权重。这样你就会得到合适大小的网格，前提是你在正方形 ViewGroup

中插入 Verical 布局

Answer 2

既然你说你有可变数量的方块，我假设你愿意在代码中创建 n*n 网格。这是创建网格的方法。这只是一种方式，可能还有其他方式。

首先，创建一个布局 ConstraintLayout 作为根视图。在该布局中，定义一个宽度和高度为 match_constraints 且受父项约束的小部件。无论设备方向如何，这都会为您提供一个方形小部件。（我在这里使用 View 以便可以看到，但最好使用 Space 小部件，尽管它可能并不重要。）

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/gridFrame"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是创建 7*7 网格的 activity 的代码。我们将使用布局中的屏幕视图作为 "parent" 视图来包含正方形。

MainActivity.java

public class MainActivity extends AppCompatActivity {
    int mRows = 7;
    int mCols = 7;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ConstraintLayout layout = findViewById(R.id.layout);

        int color1 = getResources().getColor(android.R.color.holo_red_light);
        int color2 = getResources().getColor(android.R.color.holo_blue_light);
        TextView textView;
        ConstraintLayout.LayoutParams lp;
        int id;
        int idArray[][] = new int[mRows][mCols];
        ConstraintSet cs = new ConstraintSet();

        // Add our views to the ConstraintLayout.
        for (int iRow = 0; iRow < mRows; iRow++) {
            for (int iCol = 0; iCol < mCols; iCol++) {
                textView = new TextView(this);
                lp = new ConstraintLayout.LayoutParams(ConstraintSet.MATCH_CONSTRAINT,
                                                       ConstraintSet.MATCH_CONSTRAINT);
                id = View.generateViewId();
                idArray[iRow][iCol] = id;
                textView.setId(id);
                textView.setText(String.valueOf(id));
                textView.setGravity(Gravity.CENTER);
                textView.setBackgroundColor(((iRow + iCol) % 2 == 0) ? color1 : color2);
                layout.addView(textView, lp);
            }
        }

        // Create horizontal chain for each row and set the 1:1 dimensions.
        // but first make sure the layout frame has the right ratio set.
        cs.clone(layout);
        cs.setDimensionRatio(R.id.gridFrame, mCols + ":" + mRows);
        for (int iRow = 0; iRow < mRows; iRow++) {
            for (int iCol = 0; iCol < mCols; iCol++) {
                id = idArray[iRow][iCol];
                cs.setDimensionRatio(id, "1:1");
                if (iRow == 0) {
                    // Connect the top row to the top of the frame.
                    cs.connect(id, ConstraintSet.TOP, R.id.gridFrame, ConstraintSet.TOP);
                } else {
                    // Connect top to bottom of row above.
                    cs.connect(id, ConstraintSet.TOP, idArray[iRow - 1][0], ConstraintSet.BOTTOM);
                }
            }
            // Create a horiontal chain that will determine the dimensions of our squares.
            // Could also be createHorizontalChainRtl() with START/END.
            cs.createHorizontalChain(R.id.gridFrame, ConstraintSet.LEFT,
                                     R.id.gridFrame, ConstraintSet.RIGHT,
                                     idArray[iRow], null, ConstraintSet.CHAIN_PACKED);
        }

        cs.applyTo(layout);
    }
}

只需更改 mRows 和 mCols，网格将自行调整。如果您的网格始终是正方形，则无需在代码中设置网格容器的比例。您还可以将网格放置在更复杂的布局中。只需确保网格容器的尺寸正确即可。

Answer 3

如果我做对了，我认为最好的方法是使用 Flow 小部件

androidx.constraintlayout.helper.widget.Flow

并将应包含在网格中的所有视图的 ID 放在以下字段中：

app:constraint_referenced_ids

可以在此处找到更多信息：

https://bignerdranch.com/blog/constraintlayout-flow-simple-grid-building-without-nested-layouts/

在 Android ConstraintLayout 中创建网格 (n × n)，n 的数量可变

Create grid (n × n) in Android ConstraintLayout with variable number of n

android

android-layout

android-constraintlayout