使用Android的ConstraintLayout创建类似表格的视图 [英] Use Android's ConstraintLayout to create table-like view

问题描述

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

all. What I am trying to achieve in its simplest form is to pack 4 Views in two rows packed 2 by 2. Each row contains 1 ImageView and 1 TextView without putting any fixed dimensions for the ImageView and allowing the TextView to have multiple lines without ellipsis. Any of both can be taller than the other. The aim is to have each of the horizontal pairs of image and text horizontally aligned and taking as low vertical space as possible. This is easily achievable using two horizontal LinearLayouts coupled together in a vertical LinearLayout. This way both pairs of image and text would be horizontally aligned and their respective container horizontal layouts would wrap them to fit their contents, thus both pairs would occupy the least vertical space possible:

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

The image above shows schematically the UI composition scenario. The green hyphenated boxes are the horizontal linear layouts that both wrap the pair of image and text display controls and allow them to be horizontally aligned. The red hyphenated box is the vertical linear layout packing the horizontal ones.

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

This layout scenario is just the most minimalistic use case of a layout that resembles table-like view having the following configuration:

• 行数> 1


• 每行有> 1个不同的子视图每行中的数字


• 给定行中的所有控件都水平对齐


• 行的宽度，高度和行高都取决于行的内容

• rows count > 1
• each row has > 1 child views that vary in number across each row
• all controls inside a given row are horizontally aligned
• the rows vary not only in width but also in height according to their contents

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

The only way I see this can be implemented using ConstraintLayout is to have additionally N-1 (N = rows count) horizontal LinearLayouts that represent all of the rows except one of them which could be laid out only using anchors/constraints of the ConstraintLayout. Use of ContstraintLayout's guidelines is inapplicable since their offset from the parent's edges should be hardcoded either in absolute or relative units, where we need flexible height calculation based on the highest view in each of the rows. Use of ContstraintLayout's barriers is also not possible due to the requirement that all UI controls inside a row should be horizontally aligned. If there wasn't such, there would have been N-1 barriers that glue to the bottom of each row of top-aligned UI controls.

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

Any suggestions about how to achieve the most performant table-like view having a fixed number of rows and possessing the aforementioned specs?

推荐答案

SequenceLayout 。

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

This is the sequence code that defines your layout (31 lines):

<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 。

I have included this layout as sample #3 in the sample code of SequenceLayout.

这篇关于使用Android的ConstraintLayout创建类似表格的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！