如何使视图中心对齐，而不重叠其他视图 [仅约束布局]

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

需要设置边距，如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" />

您可以配置不同的边距值，使其符合您的要求。或者您甚至可以删除一些边距。最后，这取决于您和您的设计。

编辑：提醒约束布局以相对的方式工作。一个对象依赖于另一个对象，因此请确保您的线条/指南正确（在标记为 constraint_toStartOf 等的 .xml 中）

Answer 2

这应该可行。文本永远不会与图像重叠，并且图像将与开头对齐。

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

尝试将您的文本视图限制在您的图像上，并给它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>

为了得到这个外观：