在 Android ConstraintLayout 中创建网格（n × n），n 个可变数量

Question

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

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

Answer 1

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

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

活动_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 网格的活动的代码。我们将使用布局中的屏幕视图作为“父”视图来包含方块。

主活动.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网格就会自行调整。如果您的网格始终为方形，则无需在代码中设置网格容器的比例。您还可以将网格放置在更复杂的布局中。只需确保网格容器具有正确的尺寸，您就可以开始使用了。