在 Android ConstraintLayout 中创建可变数量 n 的网格 (n × n)
问题描述 投票：0回答：4
我想在
ConstraintLayoutwidth = match_constraintheight = match_constraint
当网格大小为 2×2 时，这很容易 - 有 4 个元素，所以很容易。但是当我必须创建一个 7×7 的网格时我该怎么办？我们有 49 个视图，因此设置所有这些视图可能会很棘手。我想在约束布局中执行此操作，因为我想要一个灵活的布局。 :)
4个回答
7
投票
投票
既然你说你有可变数量的方块，我假设你愿意在代码中创建 n*n 网格。这是创建网格的方法。这只是一种方法，可能还有其他方法。
首先，创建一个以
ConstraintLayoutmatch_constraintsViewSpace
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 的代码。我们将使用布局中的屏幕视图作为“父”视图来包含方块。
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);
}
}
只需更改
mRowsmCols0
投票
投票
最好的想法是创建两个视图线性布局，一个具有水平对齐方式，另一个具有垂直对齐方式。 具有垂直对齐的组是您在布局中调用的组，并将数字（7）作为属性传递给它。 该组将向其自身添加水平组 7 次。每个水平布局将依次再次取一个数字（7）。这样就增加了 7 个正方形。 诀窍是确保每个方块的权重相同。每个水平行都有相同的权重。这样，如果您在方形 ViewGroup 中插入垂直布局，您将获得正确大小的网格
0
投票
投票
如果我做对了，我认为最好的方法是使用 Flow 小部件
androidx.constraintlayout.helper.widget.Flow
并将应包含在网格中的所有视图的 id 放入以下字段中：
app:constraint_referenced_ids
更多信息可以在这里找到：
https://bignerdranch.com/blog/constraintlayout-flow-simple-grid-building-without-nested-layouts/
0
投票
投票
我非常喜欢 @cheticamp 的回答，我很好奇这在 xml 中会是什么样子，以防你不想以编程方式执行此操作，因为如果你有的话，这可能会使调整和查看预览变得更容易主要是静态内容。
因此我尝试了一下，在这里我想与大家分享代码。请注意，为了简单起见，我将仅显示 3x3 网格...
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".ui.grid">
<Space
android:id="@+id/grid_frame"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<!-- ROW 0 -->
<TextView
android:id="@+id/tile_00"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#F44336"
android:gravity="center"
android:text="1"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/tile_01"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@id/grid_frame"
app:layout_constraintTop_toTopOf="@id/grid_frame" />
<TextView
android:id="@+id/tile_01"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center"
android:text="2"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/tile_02"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@id/tile_00"
app:layout_constraintTop_toTopOf="@id/grid_frame" />
<TextView
android:id="@+id/tile_02"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#F44336"
android:gravity="center"
android:text="3"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/grid_frame"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@id/tile_01"
app:layout_constraintTop_toTopOf="@id/grid_frame" />
<!-- ROW 1 -->
<TextView
android:id="@+id/tile_10"
layout="@layout/fragment_tile"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center"
android:text="4"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/tile_11"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="@id/grid_frame"
app:layout_constraintTop_toBottomOf="@id/tile_00" />
<TextView
android:id="@+id/tile_11"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#F44336"
android:gravity="center"
android:text="5"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/tile_12"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@id/tile_10"
app:layout_constraintTop_toBottomOf="@id/tile_01" />
<TextView
android:id="@+id/tile_12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center"
android:text="6"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/grid_frame"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@id/tile_11"
app:layout_constraintTop_toBottomOf="@id/tile_02" />
<!-- ROW 2 -->
<TextView
android:id="@+id/tile_20"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#F44336"
android:gravity="center"
android:text="7"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/tile_21"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="@id/grid_frame"
app:layout_constraintTop_toBottomOf="@id/tile_10" />
<TextView
android:id="@+id/tile_21"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center"
android:text="8"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/tile_22"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@id/tile_20"
app:layout_constraintTop_toBottomOf="@id/tile_11" />
<TextView
android:id="@+id/tile_22"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#F44336"
android:gravity="center"
android:text="9"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/grid_frame"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@id/tile_21"
app:layout_constraintTop_toBottomOf="@id/tile_12" />
</androidx.constraintlayout.widget.ConstraintLayout>
...导致...
备注：
- 您可以清楚地看到约束是图片中的小箭头
- 也可以在 Android Studio 中很好地创建水平链，方法是选择一行中的所有图块并使用 上下文菜单 -> chains -> 创建水平链，从而精确地使用约束
最新问题
- 如何在Android Kotlin中每5秒致电API？
- Sci-kit学习：研究错误分类的数据
- 如何从C＃中的QueryPerformancecount
- 不能将ApplicationSights的度量添加到Azure
- 我如何禁用，在键入点（。）视觉工作室后会自动打印fileStyleUriparSer？ 不要误会我的意思，我想要这些建议，但我不希望Visual Studio自动
- 我有一个vba excel模型，我将其分为两个单独的工作簿： 包含模型的所有输入的InputswB， RunnerWB，其中包含大部分VBA代码（以及所有
- 在bash中``读''的目的是什么？您如何使用它？
- 如何在C＃中为帐户中创建持久字典？
- 如何从另一个数组的值中生成一个随机数组，其值的总和在预定的范围内？ 我有一系列正整数，例如[10,25,40,55,80,110]。 我想能够指定一个范围，例如100-150，并从此预先存在的数组中生成一个新数组，其中新的
- 如何支持更改登录电子邮件与Auth0
- 我正在尝试将JS文件保存在Chrome覆盖文件的指定文件夹中，并且每当我按右键单击然后单击“保存为覆盖”时，该文件就不会保存在文件夹中。 \
- 以下反应组件之间有什么区别？ [重复]
- 我们如何在角度测试httpresource？ 我喜欢Angular的新httpresource，它做了很多我很久以来一直想要的事情。它确实可以使生活更轻松。 但是，我在用茉莉花测试httpresource时遇到麻烦...
- 如何在.NET应用程序中访问GCP Secret Manager，并配置了代理？ 我在Google Cloud Run上托管了一个.NET应用程序，需要访问GCP Secret Manager。我的应用程序可以正常工作，但是当我使用环境变量设置代理时（http ...
- 每个子图旁边的传说，python
- 将GhostPCL与图像转换为PDF
- 我有一个IoT中心和用Python编写的Azure函数应用程序。我希望Azure功能能够触发Hub收到的消息。
- 在运行Django测试之前，加载SQL转储
- 如何在我的React节点项目中添加自定义HLS依赖关系的正确方法？ 我想从https://github.com/video-dev/hls.js修改来源，然后将其添加到我的项目中。 我下载了https://github.com/video-dev/hls.js消息来源，进行了一些更改，并运行了NPM Run Build。 t ...
- 有人可以在MaxScript中解释struct定义内部的结构定义。
© www.soinside.com 2019 - 2025. All rights reserved.