使用 Android 的 ConstraintLayout 创建类似表格的视图

Question

全部。我试图以最简单的形式将 4 个 Views 打包成两行 2 x 2。每行包含 1 个 ImageView 和 1 个 TextView 而不为 ImageView 放置任何固定尺寸并允许TextView 有多行没有省略号。两者中的任何一个都可以比另一个高。目的是使每对水平的图像和文本水平对齐，并尽可能减少垂直空间。这很容易实现，使用两个水平的LinearLayouts 耦合在一起垂直LinearLayout。这样，两对图像和文本都将水平对齐，并且它们各自的容器水平布局将包装它们以适应它们的内容，因此这两对将占用尽可能少的垂直空间：

上图示意性地显示了 UI 组合场景。绿色的连字符框是水平线性布局，它们都包裹了一对图像和文本显示控件并允许它们水平对齐。红色的连字符框是垂直线性布局包装水平的。

此布局方案只是布局的最简约用例，类似于具有以下配置的类表视图：

• 行数 > 1
• 每行有 > 1 个子视图，每行的子视图数量不同
• 给定行内的所有控件都是水平对齐的
• 根据内容，行的宽度和高度都不同

我看到这可以使用ConstraintLayout 实现的唯一方法是另外有 N-1 (N = 行数) 水平 LinearLayouts 代表除了其中一个只能布局的所有行使用ConstraintLayout 的锚点/约束。使用ContstraintLayout 的指南是不适用的，因为它们与父级边缘的偏移量应该以绝对或相对单位硬编码，我们需要根据每行中的最高视图进行灵活的高度计算。由于要求一行内的所有 UI 控件都应水平对齐，因此也无法使用 ContstraintLayout 的障碍。如果没有，就会有 N-1 个屏障粘在每行顶部对齐的 UI 控件的底部。

关于如何获得具有固定行数并具备上述规范的最高性能的类表视图有什么建议吗？

Answer 1

这可以使用SequenceLayout 来完成。

这是定义布局的序列代码（31 行）：

<Vertical>
    <Span id="row1" size="@MAX(100%row1_col1,100%row1_col2)"/>
</Vertical>

<Vertical start="start@row1" end="end@row1">
    <Span size="1w"/>
    <Span id="row1_col1" size="wrap"/>
    <Span size="1w"/>
</Vertical>

<Vertical start="start@row1" end="end@row1">
    <Span size="1w"/>
    <Span id="row1_col2" size="wrap"/>
    <Span size="1w"/>
</Vertical>

<Vertical start="end@row1">
    <Span id="row2" size="@MAX(100%row2_col1,100%row2_col2)"/>
</Vertical>

<Vertical start="start@row2" end="end@row2">
    <Span size="1w"/>
    <Span id="row2_col1" size="wrap"/>
    <Span size="1w"/>
</Vertical>

<Vertical start="start@row2" end="end@row2">
    <Span size="1w"/>
    <Span id="row2_col2" size="wrap"/>
    <Span size="1w"/>
</Vertical>

我已将此布局作为示例 #3 包含在 SequenceLayout 的示例代码中。

Answer 2

以下 XML 将 ImageViews 与使用三种不同尺寸的显示图像一起放置。每个ImageView 旁边都有一个对应的TextView。每个部分（ImageView/TextView 对）都定义了一个顶部和底部屏障，但顶部部分只有一个底部屏障。

对于垂直顶部约束，每个视图都被约束到其正上方部分的底部屏障，但第一个部分被约束到父顶部。

对于垂直底部约束，每个视图都被约束到紧邻其下方的部分的顶部屏障，除了最后一个部分被约束到一个普通的View，它在布局底部显示为一个黑条。

在图片中，我放置了一些1dp 粗线来标识障碍物的位置。

虽然这可行，但在我看来它可能很脆弱。我可能会选择程序化解决方案，而不是像这样复杂的设置。