无法在 ConstraintLayout 中定位 TextView

Cant position TextView in ConstraintLayout

我在将 TextView 放置在 ConstraintLayout 中另一个 TextView 之上时遇到问题,但它没有与底部元素重叠。我已经尝试将 paddingBottommarginBottom 值添加到 TextView,但它似乎没有任何变化。有什么见解吗?

预期渲染

+---------------------------------+
|    7/12/2017                    |
|_______ ________________         |
||     | |              |         |
||Image| |  Text Bubble |         |
||_____| |______________|         |
|_________________________________|

实际渲染

布局

     <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="wrap_content"
        android:paddingTop="8dp">
      <CustomComponent.CircleImageView
          android:id="@+id/rec_image_message_profile"
          android:layout_width="36dp"
          android:layout_height="36dp"
          app:layout_constraintTop_toTopOf="parent"
          android:layout_marginLeft="8dp"
          app:layout_constraintLeft_toLeftOf="parent" />
      <TextView
          android:id="@+id/rec_message_body"
          android:background="@drawable/message_bubble_gray"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:maxWidth="240dp"
          android:padding="8dp"
          android:textColor="#39454C"
          android:layout_marginTop="4dp"    
          app:layout_constraintLeft_toRightOf="@+id/rec_image_message_profile"
          android:layout_marginLeft="8dp" />
      <TextView
        android:id="@+id/rec_message_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        app:layout_constraintTop_toTopOf="@+id/rec_message_body"
        android:layout_marginLeft="8dp"
        android:gravity="center"
        android:paddingBottom="20dp"/>
</android.support.constraint.ConstraintLayout>

在创建布局时,我会考虑我的每个视图将依赖于哪些视图,然后首先布局不依赖于任何内容的视图。

听起来您的时间戳不依赖于父级以外的任何东西。您的图像取决于父级和时间戳。而你的气泡取决于图像。

这是 XML 我写的时候牢记这一点。当然,您可以根据需要调整 margins/paddings。

<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="wrap_content">

    <TextView
        android:id="@+id/rec_message_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:layout_marginLeft="16dp"
        android:textSize="10sp"
        android:text="7/19/2017 11:05 AM"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <ImageView
        android:id="@+id/rec_image_message_profile"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginTop="4dp"
        android:src="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rec_message_time"
        app:layout_constraintLeft_toLeftOf="@+id/rec_message_time"/>

    <TextView
        android:id="@+id/rec_message_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:maxWidth="240dp"
        android:padding="8dp"
        android:textColor="#39454C"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        android:background="@drawable/oval"
        app:layout_constraintTop_toTopOf="@id/rec_image_message_profile"
        app:layout_constraintLeft_toRightOf="@id/rec_image_message_profile"/>

</android.support.constraint.ConstraintLayout>