Используйте Android ConstraintLayout для создания табличного представления

Question

все. То, чего я пытаюсь добиться в своей простейшей форме, - это упаковать 4 View s в две строки, упакованные 2 на 2. Каждая строка содержит 1 ImageView и 1 TextView без указания фиксированных размеров для ImageView и разрешения TextView, чтобы иметь несколько строк без многоточия. Любой из них может быть выше другого. Цель состоит в том, чтобы каждая из горизонтальных пар изображения и текста была выровнена по горизонтали и занимала как можно меньше вертикального пространства. Этого легко достичь, используя две горизонтальные LinearLayout s, соединенные вместе в вертикальную LinearLayout. Таким образом, обе пары изображения и текста будут выровнены по горизонтали, и их соответствующие горизонтальные макеты контейнера обернут их, чтобы соответствовать их содержимому, таким образом, обе пары будут занимать наименьшее возможное вертикальное пространство:

На рисунке выше схематично показан сценарий композиции пользовательского интерфейса. Зеленые рамки с переносами - это горизонтальные линейные макеты, которые обертывают пару элементов управления изображением и текстом и позволяют выравнивать их по горизонтали. Красная рамка с переносами - вертикальная линейная схема, упаковывающая горизонтальные.

Этот сценарий макета является лишь самым минималистичным вариантом использования макета, который напоминает табличное представление, имеющее следующую конфигурацию:

• количество строк> 1
• каждая строка имеет> 1 дочерних представлений, число которых варьируется в каждой строке
• все элементы управления в данном ряду выровнены по горизонтали
• строки различаются не только по ширине, но и по высоте в зависимости от их содержимого

Единственный способ, которым я вижу это, может быть реализован с использованием ConstraintLayout - это иметь дополнительно N-1 (N = количество строк) по горизонтали LinearLayout s, которые представляют все строки, кроме одной из них, которая может быть только выложена используя якоря / ограничения ConstraintLayout. Использование направляющих ContstraintLayout неприменимо, поскольку их смещение от границ родительского элемента должно быть жестко закодировано либо в абсолютных, либо в относительных единицах, где нам необходимо гибкое вычисление высоты, основанное на максимальном представлении в каждой из строк. Использование барьеров ContstraintLayout также невозможно из-за требования, чтобы все элементы управления пользовательского интерфейса внутри строки были выровнены по горизонтали. Если бы этого не было, были бы барьеры N-1, которые приклеивали бы к нижней части каждого ряда выровненных по верху элементов управления пользовательского интерфейса.

Любые предложения о том, как добиться наиболее производительного табличного представления, имеющего фиксированное количество строк и обладающего вышеупомянутыми спецификациями?

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, чтобы определить расположение барьеров.

Хотя это работает, мне кажется, что оно может быть хрупким.Возможно, я бы выбрал программное решение, а не сложную настройку, подобную этой.