カントの位置ConstraintLayoutのTextView

Question

TextViewを別のTextViewの上に配置して、ConstraintLayoutに配置する際に問題が発生しました。私はpaddingBottomとmarginBottomの値を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> 

Answer 1

クレアのレンダリング予想

レイアウトを見て、それぞれのビューがどのビューに依存するかを考えてから、最初に何かに依存しないビューをレイアウトすることから始めます。

あなたのタイムスタンプは親以外のものに依存しないようです。あなたのイメージは、親とタイムスタンプに依存します。あなたのバブルはイメージに依存します。

私はこれを念頭に置いて書いたXMLです。もちろん、マージン/パディングを微調整することができます。

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