Как выровнять в центре пространства, используя макет ограничения - PullRequest
Новая
       102

Как выровнять в центре пространства, используя макет ограничения

1 голос
/ 02 апреля 2019

У меня есть следующий файл макета, который использует ConstraintLayout 

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

    <TextView
            android:id="@+id/main_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is my header text and is long"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />


    <LinearLayout
            android:id="@+id/vertical_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/main_header"
            android:layout_marginTop="15dp"
    >
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Foo foo fo"
                android:textSize="18sp"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp"
        />
    </LinearLayout>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="centered text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_layout"
            app:layout_constraintTop_toBottomOf="@id/main_header"
    />
</android.support.constraint.ConstraintLayout>

Результат следующий:
enter image description here

Как можноЯ заставлю выделенный centered text прийти в центр этого белого пространства рядом с вертикальной линейной разметкой?(примерно, куда указывает красная стрелка?

Ответы [ 3 ]

1 голос
/ 02 апреля 2019

Вы можете просто добавить направляющую следующим образом:

Прежде чем вы посмотрите на макет, давайте посмотрим, как работает руководство:

Вы можете думать о них как о невидимых видах, которые не повлияют на ваш макет, из документации:

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

Итак, как я это сделал - я создал направляющую (в моем случае горизонтальную) и сказал ему, чтобы он находился на 20% высоты экрана - app:layout_constraintGuide_percent="0.2", и после этого я подключил к нему ограничение, и теперь ваш взгляд центрирован между верхняя часть экрана и указатель. 

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


    <TextView
        android:id="@+id/main_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is my header text and is long"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <LinearLayout
        android:id="@+id/vertical_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_header">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Foo foo fo"
                android:textSize="18sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp" />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="centered text"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_layout"
        app:layout_constraintTop_toBottomOf="@id/main_header" />

    <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="0.2" />

Но , пожалуйста, избегайте использования вложенных представлений, потому что это не то, для чего предназначен constraintLayout.

Вот пример макета без вложенных групп представлений: 

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


    <TextView
        android:id="@+id/main_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is my header text and is long"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Foo foo fo"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="@+id/textView10"
        app:layout_constraintStart_toStartOf="@+id/textView10"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:layout_marginStart="8dp"
        android:text="Bar bar bar"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_header" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="centered text"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_header" />

    <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="0.2" />
1 голос
/ 03 апреля 2019

Самый простой способ - ограничить верх и низ TextView соответствующими краями LinearLayout, чтобы он располагался по центру между ними, даже если высота LinearLayout's изменяется. Горизонтальные ограничения хороши, как они сейчас. Ограничения для TextView будут выглядеть так: 

app:layout_constraintBottom_toBottomOf="@id/vertical_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_layout"
app:layout_constraintTop_toTopOf="@id/vertical_layout"

Результат:

enter image description here

0 голосов
/ 02 апреля 2019

Это макет ограничения, сделайте это с добавлением ограничения в верхней части текстового представления. Проверьте это https://developer.android.com/training/constraint-layout, чтобы узнать подробности о том, как работает макет ограничения.

Только что добавил marginTop и решил вашу проблему

Вот ваш макет 

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


<TextView
    android:id="@+id/main_header"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is my header text and is long"
    android:textSize="20sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />


<LinearLayout
    android:id="@+id/vertical_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/main_header"
    android:layout_marginTop="15dp"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Foo foo fo"
        android:textSize="18sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        />
</LinearLayout>

   <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:text="centered text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/vertical_layout"
    app:layout_constraintTop_toBottomOf="@id/main_header" />

</android.support.constraint.ConstraintLayout>

Вот изображение enter image description here

...