Use Android's ConstraintLayout to create table-like view

问题

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:

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:

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

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?

回答1:

The following XML places ImageViews with a displayed image using three different sizes. Each ImageView has a corresponding TextView laid out beside it. Each section (ImageView/TextView pair) has a top and bottom barrier defined for it except for the top section when has only a bottom barrier.

For vertical top constraints, each view is constrained to the bottom barrier of the section immediately above it except for the first section which is constrained to the parent top.

For vertical bottom constraints, each view is constrained to the top barrier of the section immediately below it except for the last section which is constrained to a plain View that appears as a black bar at the bottom of the layout.

In the image, I have placed some 1dp thick lines to identify the placement of the barriers.

Although this works, it seems to me that it may be fragile. I would probably go for a programmatic solution rather than a complicated setup like this.

回答2:

This can be done using SequenceLayout.

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>

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

来源：https://stackoverflow.com/questions/55375635/use-androids-constraintlayout-to-create-table-like-view

标签

android

alignment

android-constraintlayout