Заполнитель ConstraintLayout с wrap_content ширина / высота со странным поведением

Question

При использовании ConstraintLayout Placeholder с шириной и высотой wrap_content, если для содержимого задан сам заполнитель, он занимает правильное место на экране, как показано в примере ниже:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#999999">

    <View
        android:id="@+id/view_1"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:background="#990000"
        app:layout_constraintEnd_toStartOf="@+id/action_placeholder_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/action_placeholder_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="56dp"
        android:text="Button"
        android:visibility="gone"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

Но если для него не установлено никакого содержимого, оно занимает кучу пространства (всю область) вместо того, чтобы иметь ширину / высоту 0dp,Пример ниже демонстрирует, что:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#999999">

    <View
        android:id="@+id/view_1"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:background="#990000"
        app:layout_constraintEnd_toStartOf="@+id/action_placeholder_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/action_placeholder_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="56dp"
        android:text="Button"
        android:visibility="gone"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

Это какая-то ошибка ConstraintLayout или я что-то не так делаю?

Контекст: я хочу установить содержимое заполнителя только тогда, когда страница полностью загружена.

---

Используемая версия ConstraintLayout:

реализация 'androidx.constraintlayout: constraintlayout: 1.1.3 '

Answer 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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#999999">

    <View
            android:id="@+id/view_1"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:background="#990000"
            app:layout_constraintEnd_toStartOf="@+id/button"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:text="Button"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/view_1"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Если кнопка VISIBLE (как ^), она будет выглядеть так:

Если кнопка GONE, она будет выглядеть следующим образом:

А если кнопка невидима, она зарезервирует место и будет выглядеть следующим образом:

Начните с «Унесенных» или «Невидимых» (в зависимости от того, как вы хотите, чтобы ваш UI / UX выглядел в этом состоянии), и как только вы «закончите загрузку своей страницы», затем нажмитеновое состояние просмотра (в результате чего кнопка станет видимой).

Я что-то здесь упускаю?

Answer 2

Вам необходимо создать правильную горизонтальную цепочку, чтобы ConstraintLayout знал, где view_1 должен быть выровнен в случае, если вид, к которому он привязан, исчез. Ваш заполнитель должен иметь app:layout_constraintStart_toEndOf="@+id/view_1".

. Вы также можете рассмотреть возможность добавления app:emptyVisibility="invisible" (или visible) и посмотреть, как это повлияет на макет.