ConstraintLayout предотвращает наложение верхних и нижних виджетов

Question

Я пытаюсь создать макет с тремя группами виджетов. Я хочу, чтобы одна группа была ограничена сверху, одна снизу, а другая плавала в середине пространства между двумя группами. Раскладка будет использоваться во фрагменте, чтобы он мог сдавиться, особенно когда отображается клавиатура. У меня возникают проблемы с выяснением того, как предотвратить перекрытие двух групп, при этом удерживая верх и низ ограниченным верхом и низом макета.

Я думал о нескольких способах сделать это, но я не могt выяснить, как правильно реализовать любое из них.

• Использование app:layout_constraintVertical_bias или app:layout_constraintVertical_weight для объединения виджетов или их разнесения.
• Использование одной цепочки, но с разрывамимежду группами. Я не мог понять, как разделить цепочку на части, чтобы позволить разным группам распределиться.
• Укажите минимальную высоту, которая зависит от содержащихся виджетов. (Он будет содержаться в ScrollView, поэтому, если высота ограничена, он будет работать)
• Создание групп упакованных цепочек, в которых упакованные цепочки находятся в цепочке распространения.

Или есть лучший способ получить то, что я хочу?

Примечание: Я бы предпочел, чтобы верхняя и нижняя группы не соответствовали родительскому макету, но я не могНе могу понять, как заставить эти группы динамически дистанцироваться от родительского макета, не раздвигая группу. Я хочу, чтобы верхняя и нижняя группы были близки к родительскому макету, но не обязательно прямо против него. Лучше иметь их прямо против родительского макета, чем близко к середине. В идеале я мог бы использовать для этого app:layout_constraintVertical_bias или app:layout_constraintVertical_weight.

---

Код

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


    <EditText
        android:id="@+id/edit_text_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/edit_text_horizontal_margin"
        android:layout_marginRight="@dimen/edit_text_horizontal_margin"
        android:layout_marginTop="@dimen/edit_text_vertical_margin"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/edit_text_2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:hint="Edit Text 1"
        android:selectAllOnFocus="true" />

    <EditText
        android:id="@+id/edit_text_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/edit_text_horizontal_margin"
        android:layout_marginRight="@dimen/edit_text_horizontal_margin"
        android:layout_marginTop="@dimen/edit_text_vertical_margin"
        android:layout_marginBottom="@dimen/edit_text_vertical_margin"

        app:layout_constraintTop_toBottomOf="@id/edit_text_1"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:hint="Edit Text 2"
        android:selectAllOnFocus="true" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintTop_toBottomOf="@id/edit_text_2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:enabled="false"
        android:text="Button" />

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/progress_bar_margin"

        app:layout_constraintTop_toBottomOf="@id/button"
        app:layout_constraintBottom_toTopOf="@id/clickable_text_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:visibility="gone" />

    <TextView
        android:id="@+id/clickable_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/text_button_horizontal_margin"
        android:layout_marginRight="@dimen/text_button_horizontal_margin"
        android:layout_marginTop="@dimen/text_button_vertical_margin"
        android:layout_marginBottom="@dimen/text_button_vertical_margin"
        android:paddingLeft="@dimen/text_button_horizontal_margin"
        android:paddingRight="@dimen/text_button_horizontal_margin"
        android:paddingTop="@dimen/text_button_vertical_margin"
        android:paddingBottom="@dimen/text_button_vertical_margin"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:text="Clickable Text View"
        android:clickable="true"/>

</androidx.constraintlayout.widget.ConstraintLayout>

---

Изображения

- - - -

Вот что у меня есть, и как я хочу, чтобы это выглядело. - - - - - Вот проблема перекрытия.

Answer 1

для текстового представления добавьте ограничение сверху вниз для кнопки, т.е. app: layout_constraintTop_toBottomOf = "@ + id / button". ИМО всегда ограничивает все 4 угла, где это возможно;начало сверху конец снизу. Таким образом, когда ваше представление «сжато», оно все равно будет придерживаться установленного ограничения

Answer 2

Я полагаю, что вы можете использовать Рекомендации вместе с app:layout_constraintHeight_percent для решения вашей проблемы.

Рассмотрите этот макет:

<?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">


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:enabled="false"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintHeight_percent="0.1"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/edit_text_2" />

<EditText
    android:id="@+id/edit_text_2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:hint="Edit Text 2"
    android:selectAllOnFocus="true"
    app:layout_constraintBottom_toTopOf="@id/button"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/edit_text_1" />

<EditText
    android:id="@+id/edit_text_1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:hint="Edit Text 1"
    android:selectAllOnFocus="true"
    app:layout_constraintBottom_toTopOf="@id/edit_text_2"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:layout_constraintBottom_toTopOf="@id/clickable_text_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"

    app:layout_constraintTop_toBottomOf="@id/button" />

<TextView
    android:id="@+id/clickable_text_view"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:clickable="true"
    android:gravity="center"
    android:text="Clickable Text View"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".35" />

• Каждая высота просмотра равна 10% высоты экрана, это из-за атрибута app:layout_constraintHeight_percent="0.1". Это решит проблему перекрытия для вас, потому что вы сможете сказать своему представлению, какую высоту следует относить к размеру экрана.

• Я также использовал рекомендации с app:layout_constraintGuide_percent=".35"атрибут, указывающий, что направляющая должна быть на экране, благодаря этому я могу ограничить различные виды, и вам не нужно будет прикреплять свои виды к верхней части нижней части экрана, как вы упомянули ( Я бы предпочелчто верхняя и нижняя группы не соответствуют родительскому макету )

Ваш макет будет выглядеть следующим образом: (это предварительное изображение для лучшего понимания рекомендаций)

Answer 3

Вот, попробуйте это.

<?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"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/emailId"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="36dp"
        android:hint="Enter email ID"
        android:inputType="textEmailAddress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="36dp"
        android:hint="Enter password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailId" />

    <Button
        android:id="@+id/signInBtn"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:background="@color/colorAccent"
        android:text="Sign in"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/password" />

    <TextView
        android:id="@+id/analyticsLog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:text="Click me to create a log"
        android:textColor="@android:color/holo_blue_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>