Как отцентрировать текст внутри цепочки относительно всего экрана?

Question

Я хочу создать имя пользователя по центру TextView с кнопкой редактирования в правой части экрана.Если я укажу TextView, чтобы соответствовать началу / концу родителя, он будет центрироваться.Однако текст переполнится и закрасит кнопку.Я могу связать одну сторону текста с кнопкой, но тогда текст не будет отцентрирован.Вот пример кода, который у меня есть, где tvName не центрируется из-за кнопки в горизонтальной цепочке:

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/pt_name_font_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@id/tvUserMsisdn"
            app:layout_constraintEnd_toStartOf="@id/ibChangeName"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/aivProfile"
            tools:text="B"/>

        <TextView
            android:id="@+id/tvName2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/pt_name_font_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@id/tvUserMsisdn"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tvName"
            tools:text="A"/>

        <ImageButton
            android:id="@+id/ibChangeName"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_marginEnd="@dimen/default_margin"
            app:layout_constraintBottom_toBottomOf="@id/tvName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/tvName"
            android:background="@android:color/black"/>

Вот как это выглядит:

Я не могу использовать горизонтальное смещение, так как кнопка должна оставаться со статическим размером, и ширина экрана может меняться, а также размер шрифта.В идеале я мог бы указать два атрибута app:layout_constraintEnd_toStartOf, один для всей ширины экрана, чтобы текст оставался по центру, а другой для кнопки, чтобы он не переполнялся.

Answer 1

В идеале я мог бы указать два app:layout_constraintEnd_toStartOf атрибута

Я уверен, что вы уже знаете это, но это невозможно.

Единственноето, что вы можете сделать, это использовать Barrier, но здесь это бесполезно, потому что (в данном случае) это было бы функционально идентично простому ограничению конца началом ImageButton.

Лучшее, что вы можете здесь сделать, по моему мнению, это ограничить начало и конец TextView родительским элементом, а затем использовать заполнение, чтобы убедиться, что длинный текст не перекрывает ImageButton.Кнопка имеет фиксированную ширину (28dp) и фиксированное поле (@dimen/default_margin), поэтому вы можете задать TextView отступ влево / вправо, равный 28dp + 2x default_margin.Это обеспечит перенос текста по крайней мере на default_margin от левого края ImageButton.

Answer 2

Если ImageButton всегда имеет фиксированный размер (в данном случае 28 dp), вы можете использовать виджет Space с такими же размерами, как у кнопки, и поместить его на левом краю родительского элемента.Затем вы можете связать три Views вместе и установить стиль цепочки на spread_inside.Ширина TextView's может быть установлена ​​на match_constraint, а ее гравитация - в центр или использовать wrap_content и app:layout_constrainedWidth="true", чтобы она не перекрывала другие Views, если она становится слишком большой.

ПримерXML, чтобы получить общее представление:

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

    <Space
        android:id="@+id/space"
        android:layout_width="28dp"
        android:layout_height="28dp"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintEnd_toStartOf="@id/textview"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@id/button"
        app:layout_constraintStart_toEndOf="@id/space" />

    <ImageButton
        android:id="@+id/button"
        android:layout_width="28dp"
        android:layout_height="28dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview" />

</android.support.constraint.ConstraintLayout>

Answer 3

Поместите TextView и ImageButton в RelativeLayout:

<RelativeLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tvName2"
        android:layout_alignParentStart="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@+id/ibChangeName"
        android:textSize="@dimen/pt_name_font_size"
        android:textStyle="bold"
        tools:text="A"/>

    <ImageButton
        android:id="@+id/ibChangeName"
        android:layout_alignParentEnd="true"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:layout_marginEnd="@dimen/default_margin"
        android:background="@android:color/black"/>

</RelativeLayout>

Этот атрибут для TextViewandroid:layout_toStartOf="@+id/ibChangeName"гарантирует, что TextView не будет перекрываться с ImageButtonТеперь вам нужно отцентрировать относительное расположение