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

У меня есть следующий файл макета, в котором используется 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>

Результат следующий:
Как выровнять по центру пространства, используя компоновку ограничения

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

android-layout android-view android-constraintlayout android-viewgroup

02.04.2019 21:43

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

391

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это макет ограничения, добавляющий ограничение в верхней части текстового представления. Ознакомьтесь с этим 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>

Вот изображение

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

— 02.04.2019 21:48

android.jlelse.eu/how-to-use-constraintlayout-736a78e2971c проверьте и это

— 02.04.2019 22:06

margin 40dp работает только в том случае, если текст в вертикальной линейной компоновке не меняется. Так что это не общее решение проблемы, а проба, сколько места добавить

— 02.04.2019 22:35

02.04.2019 21:46

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

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

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

a guideline is a visual guide which will not be seen at runtime that is used to align other views too.

Итак, как я это сделал - я создал направляющую (горизонтальную в моем случае) и сказал, чтобы она была на 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" />

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

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

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

Я не понимаю, как горизонтальная направляющая с высотой экрана 20% помогает центрировать. Является ли 20% магическим числом? Как ты это нашел?

— 02.04.2019 22:02

Второй вопрос: вы упоминаете, что не используете вертикальную линейную компоновку. Как насчет пользовательского просмотра? Это тоже антипаттерн?

— 02.04.2019 22:03

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

— 02.04.2019 22:04

Давайте продолжить обсуждение в чате.

— 02.04.2019 22:05

02.04.2019 21:48

Ответ принят как подходящий

Самым простым способом было бы ограничить верх и низ 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"

Результат: