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

Question

全部。我想以最简单的形式实现的目的是将4 View打包成两行，每行2乘2。每行包含1 ImageView和1 TextView，而没有放置用于ImageView，并允许TextView包含多行而没有省略号。两者中的任何一个都可以比另一个高。目的是使图像和文本的每个水平对在水平方向上对齐并占用尽可能小的垂直空间。使用两个在垂直LinearLayout中耦合在一起的水平LinearLayout可以轻松实现这一目标。这样，成对的图像和文本将水平对齐，并且它们各自的容器水平布局将它们包装起来以适合其内容，因此，这对将占据尽可能小的垂直空间：

上图示意性地显示了UI组成方案。带有绿色连字号的框是水平线性布局，它包装了图像和文本显示控件对，并允许它们水平对齐。红色连字符框是包装水平包装的垂直线性布局。

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

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

我认为可以使用ConstraintLayout来实现这一点的唯一方法是，另外还要有N-1个（N =行计数）水平的LinearLayout代表所有行，除了其中一个行可以仅使用ConstraintLayout的锚点/约束进行布局。 ContstraintLayout的指导原则不适用，因为它们与父级边缘的偏移应以绝对单位或相对单位进行硬编码，在这种情况下，我们需要根据每一行的最高视图灵活地计算高度。由于必须将行中的所有UI控件水平对齐，因此无法使用ContstraintLayout的障碍。如果不是这样，那么将有N-1个障碍粘附到顶部对齐的UI控件的每一行的底部。

关于如何获得具有固定行数并具有上述规格的性能最高的表状视图的任何建议？

Answer 1

以下XML将ImageViews与显示的图像一起使用三种不同的大小。每个ImageView旁边都有一个对应的TextView。每个部分（ImageView / TextView对）都为其定义了顶部和底部障碍，只有顶部只有底部障碍时，顶部除外。

对于垂直顶部约束，每个视图都被限制在紧靠其上方的部分的底部障碍中，但第一部分被约束到父顶部。

对于垂直底部约束，每个视图都限于紧靠其下的部分的顶部障碍，最后一个部分则被约束为普通View，在布局底部以黑条显示

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

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

Answer 2

这可以使用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的示例代码中。