Android ConstraintLayout: просмотры без учета полей

Question

Я пытаюсь создать макет, в котором различные фрагменты данных разделены линией (представление), но для дизайна требуется одинаковое расстояние между линией сверху и снизу.Я пытаюсь использовать поля для достижения этой цели, но я не получаю ожидаемых результатов.На основании официальной документации , если ограничения установлены для направления маржи, их следует соблюдать.По какой-то причине верхнее поле дает нам правильный интервал, однако нижнее поле вообще не дает никакого интервала.Я создал образец, содержащий только соответствующий макет axml для воспроизведения и достаточно большое поле для визуализации проблемы:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:padding="20dp">
    <TextView android:text="NAME"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/account_name_label"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
    <TextView android:text="Your Name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/account_name"
        app:layout_constraintTop_toBottomOf="@+id/account_name_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    <View
        android:id="@+id/line1"
        app:layout_constraintTop_toBottomOf="@+id/account_name"
        app:layout_constraintBottom_toTopOf="@+id/account_joined_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="#000000"
        android:layout_marginTop="100dp"
        android:layout_marginBottom="100dp"
        />
    <TextView android:text="JOINED"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/account_joined_label"
        app:layout_constraintTop_toBottomOf="@+id/line1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    <TextView android:text="January 1, 2019"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/account_joined"
        app:layout_constraintTop_toBottomOf="@+id/account_joined_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>

Приведенное выше визуально приводит к следующему:

Теперь я могу добавить android:layout_marginTop="100dp" к первому TextView после строки View, чтобы «исправить» это, однако я хочу повторно использовать стили для строки View, не беспокоясь о том, чтобы запомнитьдобавьте верхнее поле к тому, что будет первым View после строки View.Чего мне не хватает?

Обновление: Вот как должен выглядеть макет:

Answer 1

Вам необходимо подключить нижнюю часть account_joined к нижней части родительского элемента, а нижнюю часть account_joined_label к верхней части account_joined. Таким образом, вы можете попробовать это:

<?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:padding="20dp">

    <TextView android:text="NAME"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:id="@+id/account_name_label"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView android:text="Your Name"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:id="@+id/account_name"
              app:layout_constraintTop_toBottomOf="@+id/account_name_label"
              app:layout_constraintRight_toRightOf="parent" />

    <View
            android:id="@+id/line1"
            app:layout_constraintTop_toBottomOf="@+id/account_name"
            app:layout_constraintBottom_toTopOf="@+id/account_joined_label"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:background="#000000"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="100dp"/>

    <TextView android:text="JOINED"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:id="@+id/account_joined_label"
              app:layout_constraintTop_toBottomOf="@+id/line1"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintBottom_toTopOf="@+id/account_joined" />

    <TextView android:text="January 1, 2019"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:id="@+id/account_joined"
              app:layout_constraintTop_toBottomOf="@+id/account_joined_label"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Некоторая информация перед кодом:

Когда вы используете что-то вроде android:layout_marginTop="100dp", вы делаете свой макет неотзывчивым.

Почему: В Android у разных телефонов размер экрана различный, и то, что может выглядеть хорошо на 1 устройстве с полем 100dp, может не очень хорошо смотреться на другом устройстве.

Поэтому, если возможно, старайтесь не использовать большие значения как фиксированные.размеры, следующая часть вопроса объяснит, как с этим справиться.

---

Здесь начинается самое интересное:

Вы можете просто использовать Рекомендации по устранению проблем с полями - он будет реагировать на все размеры экрана и не будет иметь жестко заданного значения, например 120dp.

Все, что вам нужно сделать, это ограничить «ИМЯ» верхомограничение и «СОЕДИНЕНО» к нижнему ограничению, как это:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

<TextView
    android:id="@+id/account_name_label"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="NAME"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline9" />

<TextView
    android:id="@+id/account_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Your Name"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/account_name_label" />

<View
    android:id="@+id/line1"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:background="#000000"
    app:layout_constraintBottom_toTopOf="@+id/account_joined_label"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/account_name" />

<TextView
    android:id="@+id/account_joined_label"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="JOINED"
    app:layout_constraintBottom_toTopOf="@+id/guideline8"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/account_joined"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="January 1, 2019"
    app:layout_constraintBottom_toTopOf="@+id/account_joined_label"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/guideline8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.85" />

<android.support.constraint.Guideline
    android:id="@+id/guideline9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.15" />

</android.support.constraint.ConstraintLayout>

И это будет выглядеть так:

Теперь не пугайтесь, ваш макет выглядит хорошо - это всего лишь мои отстойные навыки в редактировании фотографийos (проверьте это на своем устройстве).

Важно то, что вы можете изменить внешний вид вашего макета, изменив значение этой строки в своих рекомендациях:

 app:layout_constraintGuide_percent="0.15"

Если что-нибудьбыло непонятно, не стесняйтесь спрашивать.