小贝子编程

Android 以编程方式添加的约束布局未显示在屏幕上



我正在尝试创建一个系统的布局绘制，它与表格非常相似，因此，我尝试创建带有行和列的约束布局(我可能需要用线连接，因此，垂直/水平布局不适合它(。

此外，由于系统的大小不同，仅在运行时已知，因此我必须以编程方式绘制布局。

我在构造这样的约束布局时遇到问题 - 即使我已将所有元素添加到布局中，它也不会在屏幕上呈现它们。

我正在使用Android Pie(API级别28，为使用它的特定设备创建它(，Java 8。

我已按照以下文章中给出的说明进行操作：

  1. https://spin.atomicobject.com/2019/04/08/constraintlayout-chaining-views-programmatically/
  2. https://www.zoftino.com/adding-views-&-constraints-to-android-constraint-layout-programmatically

附加我的代码的简化版本(仍然不起作用(。

该代码执行以下操作：

  1. 创建一些样机数据

  2. 对于每一行：

    2.1. 根据行中的数字创建按钮并将其添加到常规布局中

    2.2. 使用常规约束集连接按钮

    2.3. 从当前行中的按钮创建一个链(因为我希望它们位于相同的高度(

    2.4. 将屁股数字 0 连接到前一行(或屏幕顶部，这些是每行的"中心"(

代码是：

public class MainActivity extends AppCompatActivity {
private final static String logTag = "Main Test";
private final static int    NUM_OF_ROWS = 5;
private List<List<Integer>> mLayoutNums;
private ConstraintLayout mScreenLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mScreenLayout = findViewById(R.id.main_layout);
createMockupData();
drawBuildingLayout();
}
private void createMockupData() {
mLayoutNums = new ArrayList<>(NUM_OF_ROWS);
/*
The output should be as follows:
[2, 0, 1, 3]
[0]
[0, 1]
[1, 0, 2, 3, 4]
[0, 1, 2]
*/
mLayoutNums.add(Arrays.asList(0, 1, 2));
mLayoutNums.add(Arrays.asList(1, 0, 2, 3, 4));
mLayoutNums.add(Arrays.asList(0, 1));
mLayoutNums.add(Arrays.asList(0));
mLayoutNums.add(Arrays.asList(2, 0, 1, 3));
}
private void drawBuildingLayout() {
ConstraintSet conSet = new ConstraintSet();
conSet.clone(mScreenLayout);
int[] centerIds = new int[NUM_OF_ROWS];
for (int row = NUM_OF_ROWS - 1; row >= 0; --row) {
List<Integer> numsInRow = mLayoutNums.get(row);
addSingleRow(row, numsInRow, conSet, centerIds);
}
// connect last row to the bottom
conSet.connect(ConstraintSet.PARENT_ID,
ConstraintSet.BOTTOM,
centerIds[0],
ConstraintSet.BOTTOM);
conSet.createVerticalChain(ConstraintSet.PARENT_ID,
ConstraintSet.TOP,
ConstraintSet.PARENT_ID,
ConstraintSet.BOTTOM,
centerIds,
null,
ConstraintSet.CHAIN_SPREAD);
conSet.applyTo(mScreenLayout);
Log.i(logTag, "the screen should be shown now: " + mScreenLayout.isShown());
}
private void addSingleRow(int row,
List<Integer> numsInRow,
ConstraintSet conSet,
int[] centerIds) {
if (numsInRow.size() > 1) {
addMultipleNumsRow(row, numsInRow, conSet, centerIds);
}
else if (numsInRow.size() == 1){
addSingleNumRow(row, numsInRow.get(0), conSet, centerIds);
}
}
private void connectToPrevRow(int row, ConstraintSet conSet, int[] centerIds) {
if (row < NUM_OF_ROWS - 1) {
conSet.connect(centerIds[row + 1],
ConstraintSet.BOTTOM,
centerIds[row],
ConstraintSet.TOP);
} else if (row == NUM_OF_ROWS - 1) {
conSet.connect(ConstraintSet.PARENT_ID,
ConstraintSet.TOP,
centerIds[row],
ConstraintSet.TOP);
}
}
private void connectAndChainRow(int[] rowButtonIds,
ConstraintSet conSet) {
// First button will be attached to the left side of the parent
int leftNeighborId = ConstraintSet.PARENT_ID;
int leftNeighborSide = ConstraintSet.LEFT;
for (int col = 0; col < rowButtonIds.length; ++col) {
conSet.connect(leftNeighborId,
leftNeighborSide,
rowButtonIds[col],
ConstraintSet.LEFT);
leftNeighborId = rowButtonIds[col];
leftNeighborSide = ConstraintSet.RIGHT;
}
// Connecting to the right side of the parent
conSet.connect(leftNeighborId,
leftNeighborSide,
ConstraintSet.PARENT_ID,
ConstraintSet.RIGHT);
conSet.createHorizontalChain(ConstraintSet.PARENT_ID,
ConstraintSet.LEFT,
ConstraintSet.PARENT_ID,
ConstraintSet.RIGHT,
rowButtonIds,
null,
ConstraintSet.CHAIN_SPREAD);
}
private void addMultipleNumsRow(int row,
List<Integer> numsInRow,
ConstraintSet conSet,
int[] centerIds) {
int[] buttonsIds = new int[numsInRow.size()];
for (int pos = 0; pos < numsInRow.size(); ++pos) {
int col = numsInRow.get(pos);
Button button = createButton(row, col);
button.setLayoutParams(new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT,
          ConstraintLayout.LayoutParams.WRAP_CONTENT));
int currButtonId = button.getId();
buttonsIds[pos] = currButtonId;
mScreenLayout.addView(button);
if (pos == 0) {
centerIds[row] = currButtonId;
}
}
connectAndChainRow(buttonsIds, conSet);
connectToPrevRow(row, conSet, centerIds);
Log.i(logTag, "Created constrain chain and buttons for row: "
+ row + " number of columns: "
+ numsInRow.size());
}
private void addSingleNumRow(int row,
int num,
ConstraintSet conSet,
int[] centerIds) {
Button button = createButton(row, num);
button.setLayoutParams(new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT,
  ConstraintLayout.LayoutParams.WRAP_CONTENT));
mScreenLayout.addView(button);
centerIds[row] = button.getId();
conSet.connect(button.getId(), ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT);
conSet.connect(button.getId(), ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT);
connectToPrevRow(row, conSet, centerIds);
}
private Button createButton(int row, int col) {
Button resButton = new Button(this);
resButton.setTextAlignment(Button.TEXT_ALIGNMENT_CENTER);
resButton.setText(String.format("(%d, %d)", row, col));
resButton.setId(View.generateViewId());
return resButton;
}
}

您是在添加视图之前克隆约束集。因此，视图 ID 不会显示在约束集中，也无法连接。

尝试将以下行移动到 for 循环之后。

conSet.clone(mScreenLayout);

这可能无法解决所有问题，但它将帮助您入门。

顺便说一句，如果您还不知道，"布局检查器"(工具->布局检查器(是从模拟器或设备查看布局的好方法。

我在代码中发现了一些问题。

首先是Cheticamp指出的错误。只有在将所有按钮添加到布局之后，我才需要调用 ConstraintSet.clone(( 函数。

但是，在我更改顺序后，我仍然将所有按钮放在屏幕顶部的一行中。为了解决这个问题，我不得不为所有按钮添加另一个约束 - 对于R行中的每个按钮，将其底部连接到该行中中心按钮的底部，以便所有按钮将在同一行中对齐。

这解决了我在此代码中的主要问题！

这是我的完整工作代码(如果需要，供其他人参考(：

public class MainActivity extends AppCompatActivity {
private final static String logTag = "Main Test";
private final static int    NUM_OF_ROWS = 5;
private List<List<Integer>> mLayoutNums;
private int[][]             mButtonIds;
private ConstraintLayout    mScreenLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mScreenLayout = findViewById(R.id.main_layout);
mButtonIds = new int[NUM_OF_ROWS][];
createMockupData();
drawBuildingLayout();
}
private void createMockupData() {
mLayoutNums = new ArrayList<>(NUM_OF_ROWS);
/*
The output should be as follows:
[2, 0, 1, 3]
[0]
[0, 1]
[1, 0, 2, 3, 4]
[0, 1, 2]
Total: 15 stations
*/
mLayoutNums.add(Arrays.asList(0, 1, 2));
mLayoutNums.add(Arrays.asList(1, 0, 2, 3, 4));
mLayoutNums.add(Arrays.asList(0, 1));
mLayoutNums.add(Arrays.asList(0));
mLayoutNums.add(Arrays.asList(2, 0, 1, 3));
}
private void drawBuildingLayout() {
ConstraintSet conSet = new ConstraintSet();

int[] centerIds = new int[NUM_OF_ROWS];
for (int row = NUM_OF_ROWS - 1; row >= 0; --row) {
List<Integer> numsInRow = mLayoutNums.get(row);
addSingleRow(row, numsInRow, centerIds);
}
conSet.clone(mScreenLayout);
for (int row = 0; row < NUM_OF_ROWS; ++row) {
if (mButtonIds[row].length > 1) {
connectAndChainRow(mButtonIds[row], centerIds[row], conSet);
} else {
conSet.centerHorizontally(centerIds[row], ConstraintSet.PARENT_ID);
}
}
connectRows(conSet, centerIds);
conSet.createVerticalChain(ConstraintSet.PARENT_ID,
ConstraintSet.TOP,
ConstraintSet.PARENT_ID,
ConstraintSet.BOTTOM,
centerIds,
null,
ConstraintSet.CHAIN_SPREAD);
conSet.applyTo(mScreenLayout);
Log.i(logTag, "the screen should be shown now: " + mScreenLayout.isShown());
}
private void addSingleRow(int row,
List<Integer> numsInRow,
int[] centerIds) {
if (numsInRow.size() > 1) {
addMultipleNumsRow(row, numsInRow, centerIds);
}
else if (numsInRow.size() == 1){
addSingleNumRow(row, numsInRow.get(0), centerIds);
}
}
private void connectRows(ConstraintSet conSet, int[] centerIds) {
conSet.connect(ConstraintSet.PARENT_ID,
ConstraintSet.BOTTOM,
centerIds[0],
ConstraintSet.BOTTOM);
for (int row = 0; row < NUM_OF_ROWS - 1; ++row) {
conSet.connect(centerIds[row],
ConstraintSet.TOP,
centerIds[row + 1],
ConstraintSet.BOTTOM);
}
conSet.connect(centerIds[NUM_OF_ROWS - 1],
ConstraintSet.TOP,
ConstraintSet.PARENT_ID,
ConstraintSet.TOP);
}
private void connectAndChainRow(int[] rowButtonIds,
int centerId,
ConstraintSet conSet) {
// First button will be attached to the left side of the parent
conSet.connect(ConstraintSet.PARENT_ID,
ConstraintSet.LEFT,
rowButtonIds[0],
ConstraintSet.LEFT);
for (int col = 0; col < rowButtonIds.length - 1; ++col) {
conSet.connect(rowButtonIds[col],
ConstraintSet.RIGHT,
rowButtonIds[col + 1],
ConstraintSet.LEFT);
if (rowButtonIds[col] != centerId) {
conSet.connect(rowButtonIds[col],
ConstraintSet.BOTTOM,
centerId,
ConstraintSet.BOTTOM);
}
}
if (rowButtonIds[rowButtonIds.length - 1] != centerId) {
conSet.connect(rowButtonIds[rowButtonIds.length - 1],
ConstraintSet.BOTTOM,
centerId,
ConstraintSet.BOTTOM);
}
// Connecting to the right side of the parent
conSet.connect(rowButtonIds[rowButtonIds.length - 1],
ConstraintSet.RIGHT,
ConstraintSet.PARENT_ID,
ConstraintSet.RIGHT);
conSet.createHorizontalChain(ConstraintSet.PARENT_ID,
ConstraintSet.LEFT,
ConstraintSet.PARENT_ID,
ConstraintSet.RIGHT,
rowButtonIds,
null,
ConstraintSet.CHAIN_SPREAD);
}
private void addMultipleNumsRow(int row,
List<Integer> numsInRow,
int[] centerIds) {
mButtonIds[row] = new int[numsInRow.size()];
for (int pos = 0; pos < numsInRow.size(); ++pos) {
int col = numsInRow.get(pos);
Button button = createButton(row, col);
button.setLayoutParams(new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT,
ConstraintLayout.LayoutParams.WRAP_CONTENT));
int currButtonId = button.getId();
mButtonIds[row][pos] = currButtonId;
mScreenLayout.addView(button);
if (pos == 0) {
centerIds[row] = currButtonId;
}
}
Log.i(logTag, "Created constrain chain and buttons for row: "
+ row + " number of columns: "
+ numsInRow.size());
}
private void addSingleNumRow(int row,
int num,
int[] centerIds) {
Button button = createButton(row, num);
button.setLayoutParams(new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT,
ConstraintLayout.LayoutParams.WRAP_CONTENT));
mScreenLayout.addView(button);
mButtonIds[row] = new int[1];
mButtonIds[row][0] = button.getId();
centerIds[row] = button.getId();
}
private Button createButton(int row, int col) {
Button resButton = new Button(this);
resButton.setTextAlignment(Button.TEXT_ALIGNMENT_CENTER);
resButton.setText(String.format("(%d, %d)", row, col));
resButton.setId(View.generateViewId());
return resButton;
}
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium