2 TextViews 在约束布局中相互重叠
Posted
技术标签:
【中文标题】2 TextViews 在约束布局中相互重叠【英文标题】:2 TextViews overlapping on each other in constraintlayout 【发布时间】:2021-12-24 14:36:07 【问题描述】:我的recyclerview
有以下cardview
布局,其中有3 个视图,即ImageView
、TextView
和TextView
,如下所示
我面临一个奇怪的问题,即使在有适当的约束之后,它仍然会相互重叠两个 TextView。
问题。 :状态(TextView)在最右边。还有,名字 (TextView) 在最左侧的图像之后开始。如果是文本数据 很长,则名称与状态文本重叠。
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:background="@drawable/cv_background"
app:cardCornerRadius="@dimen/rad_base"
app:contentPadding="@dimen/s_base">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_
android:layout_>
<ImageView
android:id="@+id/left_image"
android:layout_
android:layout_
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="@dimen/s_base"
android:src="@drawable/ic_menu"/>
<TextView
style="@style/headline_6"
android:id="@+id/status"
android:layout_
android:layout_
android:text="LIVE"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="@dimen/s_base"
android:layout_marginTop="@dimen/s_base"
android:gravity="center_vertical"
android:textColor="@color/succ"/>
<TextView
style="@style/headline_6"
android:id="@+id/name"
android:layout_
android:layout_
android:textColor="@color/col_gray"
app:layout_constraintStart_toEndOf="@+id/left_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/status"
android:layout_marginLeft="@dimen/spacer_s"
android:layout_marginTop="@dimen/s_base"
android:text="Dummy Dummy Dummy Dummy Dummy Dummy"
android:gravity="center_vertical"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
【问题讨论】:
【参考方案1】:这是因为您对Start
-End
和Left
-Right
的使用不一致、混合使用。你应该合并到Start
和End
:
除此之外,您还需要为left_image
和status
设置更多约束。
<ImageView
android:id="@+id/left_image"
android:layout_
android:layout_
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/name"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="@dimen/s_base"
android:src="@drawable/ic_menu"/>
<TextView
style="@style/headline_6"
android:id="@+id/name"
android:layout_
android:layout_
android:textColor="@color/col_gray"
app:layout_constraintStart_toEndOf="@+id/left_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@+id/status"
android:layout_marginStart="@dimen/spacer_s"
android:layout_marginTop="@dimen/s_base"
android:text="Dummy Dummy Dummy Dummy Dummy Dummy"
android:gravity="center_vertical"/>
<TextView
style="@style/headline_6"
android:id="@+id/status"
android:layout_
android:layout_
android:text="LIVE"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@name"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="@dimen/s_base"
android:layout_marginTop="@dimen/s_base"
android:gravity="center_vertical"
android:textColor="@color/succ"/>
【讨论】:
不,还是一样。事实上,现在它在 ImageView 上也有重叠 @VVB 已更新。您还需要为left_image
和status
设置更多约束。
有了这个,它保持一切在中心,并在伸展时扩展到对面。理想情况下,ImageView 和 Name TextView 位于最左侧,并且应该向右扩展,反之亦然,状态 TextView 在上述情况下不会发生
@VVB 我不知道你的图像到底是什么。但是仍然有很多方法可以使用app:layout_constraintHorizontal_bias
或app:layout_constraintHorizontal_chainStyle
调整大小。以上是关于2 TextViews 在约束布局中相互重叠的主要内容,如果未能解决你的问题,请参考以下文章
约束布局使用 Design 模式编辑 ConstraintLayout 约束布局 ( 添加 Guideline 引导线 | 添加 FragmentContainerView )