2017-07-19 40 views
0

我在TextView的另一个TextViewConstraintLayout的位置上发现问题,但它没有重叠底部元素。我已经尝试将paddingBottommarginBottom的值添加到TextView,但它似乎没有预算。任何见解?在ConstraintLayout中合并位置TextView

预期渲染

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

实际呈现

overlapping TextViews

布局

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

你能解释一下你想要的布局应该是什么样子? –

+0

用原始文本渲染更新。基本上,日期应该在圆形图像和文本视图之上,并且中间有空格。 –

回答

2

当CREA设计一个布局,我想我的每个视图都依赖于哪些视图,然后首先展示不依赖任何东西的视图。

这听起来像你的时间戳不依赖于除父母以外的任何东西。你的形象取决于父母和时间戳。你的泡泡取决于图像。

下面是我为此编写的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> 

enter image description here

+0

做到了。谢谢! –