Как выровнять центр вида, не перекрывая другой вид [только ограничение ограничений]

Question

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

<android.support.constraint.ConstraintLayout
    android:id="@+id/merge"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
      android:id="@+id/iv_close"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="@dimen/paa_action_bar_back_margin"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:srcCompat="@drawable/vc_nav_bar_back" />

    <TextView
      android:id="@+id/tv_actionbar_page_title"
      style="@style/db_title_4.semibold"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="@{title}"
      android:textColor="@color/shade_grease"
      android:textSize="16sp"
      android:visibility="@{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
      app:layout_constraintBottom_toBottomOf="@+id/iv_close"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="@+id/iv_close"
      tools:text="@tools:sample/lorem"
      tools:visibility="visible" />


  </android.support.constraint.ConstraintLayout>

Answer 1

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

<android.support.constraint.ConstraintLayout android:id="@+id/merge"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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">

    <ImageView
        android:id="@+id/iv_close"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/paa_action_bar_back_margin"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv_actionbar_page_title"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/vc_nav_bar_back" />

    <TextView
        android:id="@+id/tv_actionbar_page_title"
        style="@style/db_title_4.semibold"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@{title}"
        android:textColor="@color/shade_grease"
        android:textSize="16sp"
        android:visibility="@{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
        app:layout_constraintBottom_toBottomOf="@+id/iv_close"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iv_close"
        app:layout_constraintTop_toTopOf="@+id/iv_close"
        tools:text="@tools:sample/lorem"
        tools:visibility="visible" />


</android.support.constraint.ConstraintLayout>

Answer 2

Постарайтесь ограничить текстовое представление вашим изображением и присвойте ему android:layout_width="0dp", чтобы оно расширялось только в соответствии с доступным пространством.

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

Так что вам нужно сделать что-то вроде этого:

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

<ImageView
    android:id="@+id/iv_close"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tv_actionbar_page_title"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:gravity="center"
    android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="@+id/iv_close"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/iv_close"
    app:layout_constraintTop_toTopOf="@+id/iv_close" />

</android.support.constraint.ConstraintLayout>

Если вы хотите, чтобы текстовое представление было точно такой же высоты, как и изображение, добавьте android:layout_height="0dp", теперь, когда у вас будет длинный текст, он будет прокручиваться и не будет расширяться по вертикали.

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

---

Редактировать согласно комментарию:

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

<?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/tv_actionbar_page_title"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/iv_close"
    app:layout_constraintVertical_bias="0.0" />

<ImageView
    android:id="@+id/iv_close"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Чтобы получить этот вид:

Или вы можете использовать эту раскладку:

<?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/tv_actionbar_page_title"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

<ImageView
    android:id="@+id/iv_close"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Чтобы получить этот вид:

Answer 3

Вам необходимо установить поля, как для marginTop, marginBottom, marginLeft, marginRight. Например:

<TextView
  android:id="@+id/tv_actionbar_page_title"
  style="@style/db_title_4.semibold"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@{title}"
  android:textColor="@color/shade_grease"
  android:textSize="16sp"
  android:visibility="@{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
  app:layout_constraintBottom_toBottomOf="@+id/iv_close"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="@+id/iv_close"

  android:layout_marginTop="10dp"
  android:layout_marginBottom="10dp"
  android:layout_marginLeft="10dp"
  android:layout_marginRight="10dp"

  tools:text="@tools:sample/lorem"
  tools:visibility="visible" />

Вы можете настроить различные значения маржи и настроить их в соответствии с вашими требованиями. Или вы можете даже удалить некоторые поля. В конце концов, это зависит от вас и вашего дизайна.

Редактировать: Как макет ограничения напоминания работает в относительной манере. Один объект зависит от другого, поэтому убедитесь, что ваши строки / указания верны (в .xml, помеченном как constraint_toStartOf и т. Д.)