Блог

Главная - Вопросы по программированию - Расширенная цепочка элементов с ConstraintLayout

Расширенная цепочка элементов с ConstraintLayout

#android #android-constraintlayout #constraint-layout-chains

#Android #android-constraintlayout #constraint-layout-цепочки

Вопрос:

У меня возникла проблема с расширением цепочки из 2 групп элементов с макетом ограничений. Я понимаю, что цель этого нового макета — использовать плоскую иерархию, поэтому я бы хотел избежать размещения своих элементов внутри дочерних макетов.

Я посмотрел на некоторые потрясающие ресурсы, такие как constraintlayout.com но не смог понять, как заставить это работать в моем конкретном случае, который, я думаю, может быть распространенным..

Вот изображение того, чего я хотел бы достичь. Красным цветом пробелы 1, 2 и 3 должны иметь одинаковую высоту (точно так же, как spread chain).

представление того, что я хочу

Спасибо за ваше внимание 🙂

Комментарии:

1. Что вы уже пробовали?

2. Я попытался добавить 2 пустых представления (EV1 и EV2). Выровняйте верхнюю часть ViewA по верхней части EV1, нижнюю часть ViewC по нижней части EV1, но это не изменило высоту EV1. Затем я собирался сделать то же самое со второй группой (ViewD и ViewE выровнены с EV2). И, наконец, я бы сделал цепочку распространения на EV1 и EV2.

Ответ №1:

Вы можете достичь этого с помощью:

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                   xmlns:app="http://schemas.android.com/apk/res-auto"
                                                   android:orientation="vertical"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="match_parent">

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@ id/button"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@ id/button2"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@ id/button2"
            app:layout_constraintTop_toBottomOf="@ id/button"
            app:layout_constraintBottom_toTopOf="@ id/button3" 
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@ id/button3"
            app:layout_constraintTop_toBottomOf="@ id/button2"
            app:layout_constraintBottom_toTopOf="@ id/space"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Space
            android:id="@ id/space" 
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@ id/button4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@ id/button4"
            app:layout_constraintTop_toBottomOf="@ id/button3"
            app:layout_constraintBottom_toTopOf="@ id/button5"
            app:layout_constraintVertical_chainStyle="packed" 
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@ id/button5"
            app:layout_constraintTop_toBottomOf="@ id/button4"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Вывод

Комментарии:

1. Это, похоже, решение, глядя на ваш скриншот, но я не понимаю, как это работает. Для меня уже поздно, поэтому я еще подумаю и попробую завтра (и пометьте это как решение). Почему я должен использовать chainstyle только для кнопок 1 и 4 и присваивать ему упакованное значение? Спасибо за помощь

2. Хорошо, попробуйте это завтра и дайте мне знать ваши отзывы.

3. @Antoine: У тебя есть шанс разобраться в этом?

4. Все хорошо, я попробовал это, и это работает так, как ожидалось. Мне потребовалось некоторое время, чтобы понять, что вы написали, и теперь это имеет смысл, большое спасибо!

5. Спасибо за это блестящее решение! Если я правильно понимаю, в основном здесь есть две цепочки (двунаправленно связанные представления) в виде двух групп кнопок. View (или на самом деле Space с 0dp высотой лучше) используется для привязки вершины второй цепочки и позволяет нижней части первой цепочки подключаться к ней, так что обе цепочки полностью соединены по вертикали, а ConstraintLayout равномерно распределяет пространство между ними. Я думаю, что это может работать с 3 группами, добавив привязку Space для нижней части второй группы и другую привязку Space для верхней части третьей группы.