无法在 ConstraintLayout 中定位 TextView
Cant position TextView in ConstraintLayout
我在将 TextView
放置在 ConstraintLayout
中另一个 TextView
之上时遇到问题,但它没有与底部元素重叠。我已经尝试将 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>
在创建布局时,我会考虑我的每个视图将依赖于哪些视图,然后首先布局不依赖于任何内容的视图。
听起来您的时间戳不依赖于父级以外的任何东西。您的图像取决于父级和时间戳。而你的气泡取决于图像。
这是 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>
我在将 TextView
放置在 ConstraintLayout
中另一个 TextView
之上时遇到问题,但它没有与底部元素重叠。我已经尝试将 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>
在创建布局时,我会考虑我的每个视图将依赖于哪些视图,然后首先布局不依赖于任何内容的视图。
听起来您的时间戳不依赖于父级以外的任何东西。您的图像取决于父级和时间戳。而你的气泡取决于图像。
这是 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>