多于两行时如何纠正 ConstraintLayout TextView 重叠
How to correct ConstraintLayout TextView overlapping when more than two lines
我在约束布局方面遇到问题,其中一个文本视图中的文本到达第二行不会向下推另一个被约束在它下面的文本视图,直到行的中间。
我已经构建了一个包含三个文本视图的简单布局。第一个文本视图位于左侧并具有固定宽度。第二个坐在它的右边,在它和它的 parent 之间。第三个位于第二个的下方,第一个的左侧。
我希望它看起来像:
但是,如果我删除文本 "Not Overlapping.",我会得到:
它发生变化的点("Not Overlapping" 中的 "O")似乎是当第一个文本视图不存在时文本的长度填满两行:
那么如何更改此布局,以便即使我在屏幕左侧有一个文本视图,它也会在到达两行时立即将文本视图 3 向下推?而不是将它推到第二行的一半。
我的XML:
<?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="wrap_content"
tools:context="com.testapp.myapplication.MainActivity">
<TextView
android:id="@+id/text_view_1"
android:layout_width="120dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:text="Text View 1"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_view_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#22AA99"
android:text="Text View 2 Showing problem with overlap. Overlapping. Not O"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintLeft_toRightOf="@id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:text="Text View 3"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_view_2" />
</android.support.constraint.ConstraintLayout>
谢谢。
删除这一行:
app:layout_constraintBottom_toBottomOf="parent"
来自您的 TextView
,ID 为 text_view_3
,如:
<TextView
android:id="@+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:text="Text View 3"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintLeft_toRightOf="@id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_view_2" />
我已经找到了
app:layout_constrainedHeight="true"
来自约束布局 1.1.0-beta2,它对 wrap_content 实施约束。因此,我觉得这是正确的解决方案,因为这还允许我设置 app:layout_constraintBottom_toBottomOf="parent"
,从而在视图底部启用边距。
我在约束布局方面遇到问题,其中一个文本视图中的文本到达第二行不会向下推另一个被约束在它下面的文本视图,直到行的中间。
我已经构建了一个包含三个文本视图的简单布局。第一个文本视图位于左侧并具有固定宽度。第二个坐在它的右边,在它和它的 parent 之间。第三个位于第二个的下方,第一个的左侧。
我希望它看起来像:
但是,如果我删除文本 "Not Overlapping.",我会得到:
它发生变化的点("Not Overlapping" 中的 "O")似乎是当第一个文本视图不存在时文本的长度填满两行:
那么如何更改此布局,以便即使我在屏幕左侧有一个文本视图,它也会在到达两行时立即将文本视图 3 向下推?而不是将它推到第二行的一半。
我的XML:
<?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="wrap_content"
tools:context="com.testapp.myapplication.MainActivity">
<TextView
android:id="@+id/text_view_1"
android:layout_width="120dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:text="Text View 1"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_view_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#22AA99"
android:text="Text View 2 Showing problem with overlap. Overlapping. Not O"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintLeft_toRightOf="@id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:text="Text View 3"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_view_2" />
</android.support.constraint.ConstraintLayout>
谢谢。
删除这一行:
app:layout_constraintBottom_toBottomOf="parent"
来自您的 TextView
,ID 为 text_view_3
,如:
<TextView
android:id="@+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:text="Text View 3"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintLeft_toRightOf="@id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_view_2" />
我已经找到了
app:layout_constrainedHeight="true"
来自约束布局 1.1.0-beta2,它对 wrap_content 实施约束。因此,我觉得这是正确的解决方案,因为这还允许我设置 app:layout_constraintBottom_toBottomOf="parent"
,从而在视图底部启用边距。