Сохраняйте текст по центру родительского элемента в ConstraintLayout в Android

Question

Я хочу добиться очень простого макета верхней панели в Android s ConstraintLayout:

Есть кнопка возврата (может быть скрыта), есть правая кнопка (может быть скрыта) и есть текстовое название, показанное в середине. Самое главное, Я хочу, чтобы текст центрировался в родительском элементе.

Однако, когда я связываю границы видов, текст заголовка выталкивается из центра, так как слева и правые виды имеют разные размеры:

Как видите, TITLE не центрируется в родительском элементе. Очевидно, что тексты в рабочем решении также не должны накладываться друг на друга, а заголовок должен иметь многоточие. Так что это похоже на «продвинутый барьер», толкающий с обеих сторон - тот, который больше, заставит заголовок уменьшаться, но заголовок всегда будет в середине.

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

Возможно ли это даже в ConstraintLayout? Это легко сделать в системе Autolayout iOS, но она намного мощнее, чем Android ConstraintLayout.

Answer 1

однако я не смог найти способ сделать два вида в разных областях равной ширины

Если вы хотите добиться чего-то подобного, вы можете использовать:

app:layout_constraintWidth_percent="0.x", чтобы сообщить вашим представлениям, какой размер должен соответствовать размеру экрана (и сохранить его отзывчивость).

Например, что-то вроде этого (я сделал это с помощью библиотеки поддержки, но она будет работать и с androidx) ):

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


<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.1"
    android:layout_height="wrap_content"
    android:text="<"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@+id/button3"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintStart_toEndOf="@+id/button3"
    app:layout_constraintTop_toTopOf="@+id/button3" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.1"
    android:layout_height="0dp"
    android:text="x"
    app:layout_constraintBottom_toBottomOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button3" />

</android.support.constraint.ConstraintLayout>

Это будет выглядеть примерно так:

Теперь ваши 2 кнопки занимают ровно 10% экрана width, и вы можете указать вашему текстовому виду развернуться и взять оставшуюся ширину (android:layout_width="0dp").

Но что, если у меня будет очень большой текст?

В этом случае, если вы хотите чтобы обеспечить адаптацию вашего макета, вы можете использовать библиотеку [ssp (https://github.com/intuit/ssp).

SDK android, который предоставляет новую единицу размера - ssp (масштабируемый sp). Эта единица размера масштабируется с размером экрана, основанным на единице размера sp (для текстов). Это может помочь Android разработчикам с поддержкой нескольких экранов.