如何防止视图重叠?
Posted
技术标签:
【中文标题】如何防止视图重叠?【英文标题】:How to prevent overlapping in view? 【发布时间】:2020-05-09 21:46:22 【问题描述】:我想创建一个这样的视图。
问题是,当TextView
大小更大时,它看起来像这样。
所以它与“查看全部 (35)”TextView
重叠。如何防止重叠? ImageView
应该在 TextView 的右侧,但不能与“查看全部 (35)”重叠。我想你明白了。谢谢。
这是 xml 文件。
<RelativeLayout
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_
android:layout_>
<TextView
android:id="@+id/textView"
android:layout_
android:layout_
android:layout_marginStart="16dp"
android:fontFamily="@font/montserrat_semi_bold"
android:maxLines="1"
android:layout_alignParentStart="true"
android:textColor="@color/colorTextDark"
android:textSize="@dimen/text_extra_large"
tools:text="Birthday" />
<ImageView
android:id="@+id/imageView"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="@+id/textView"
android:src="@drawable/wishlist_public" />
<TextView
android:id="@+id/textViewAll"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/montserrat_semi_bold"
android:text="View all (35)"
android:layout_alignParentEnd="true"
android:textColor="@color/colorTextPrimary"
android:textSize="@dimen/text_small" />
</RelativeLayout>
【问题讨论】:
您有几个选择。我个人会为此使用 ConstraintLayout,但您也可以使用 LinearLayouts 我几乎尝试了所有方法,但没有成功 【参考方案1】:尝试将您的 imageView 放到 textView 的 drawableEnd 属性中,然后将其放入嵌套线性布局并赋予其权重。
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal">
<LinearLayout
android:layout_
android:layout_
android:layout_weight="1">
<TextView
android:id="@+id/textView"
android:layout_
android:layout_
android:drawableEnd="@drawable/imageView"
android:layout_marginStart="16dp"
android:maxLines="1"
android:gravity="start|center"
android:textSize="@dimen/text_extra_large"
android:ellipsize="end"
android:text="Your text here" />
<Space
android:layout_
android:layout_>
</Space>
</LinearLayout>
<TextView
android:id="@+id/textViewAll"
android:layout_
android:layout_
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="end"
android:layout_gravity="center_vertical"
android:text="View All"
android:textSize="@dimen/text_small" />
</LinearLayout>
【讨论】:
【参考方案2】:试试这个(请添加一些我删除的dimens属性,因为我没有它们):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="10dp"
android:weightSum="3">
<LinearLayout
android:layout_
android:layout_
android:layout_weight="3">
<TextView
android:id="@+id/textView"
android:layout_
android:layout_
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:maxLines="1"
android:textSize="20dp"
tools:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
<ImageView
android:id="@+id/imageView"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toRightOf="@id/textView"
android:src="@drawable/wishlist_public"
/>
</LinearLayout>
<TextView
android:id="@+id/textViewAll"
android:layout_
android:layout_
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_weight="2"
android:text="View all (35)"
android:textSize="20dp" />
</LinearLayout>
【讨论】:
【参考方案3】:我认为您可以使用 Linearlayout 来实现我用来编写此代码的类似功能,并且我认为它可以帮助您实现此布局设计
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal" android:layout_
android:layout_
android:gravity="center_vertical">
<LinearLayout
android:layout_
android:layout_
android:layout_weight="1"
android:layout_marginStart="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/textView2"
android:layout_
android:layout_
android:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
android:layout_weight="1"
android:textSize="20sp" />
<ImageView
android:id="@+id/imageView"
android:layout_
android:layout_
android:src="#111"
android:layout_marginStart="10dp" />
</LinearLayout>
<TextView
android:id="@+id/textView"
android:layout_
android:layout_
android:text="View All(35)"
android:textSize="20sp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"/>
</LinearLayout>
之后,你会得到类似的东西
Click here to view image
【讨论】:
【参考方案4】:尝试使用 ContraintLayout 并使用 Barrier 约束或 Guidline 约束来实现您想要的布局 我已修复使用准则约束
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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_
android:layout_
android:paddingTop="16dp">
<TextView
android:id="@+id/textView"
android:layout_
android:layout_
android:textSize="24sp"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintHorizontal_bias="0.095"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.005"
tools:text="Birthday" />
<ImageView
android:id="@+id/imageView"
android:layout_
android:layout_
android:src="@drawable/ic_adb_black_24dp"
app:layout_constraintBottom_toBottomOf="@+id/textViewAll"
app:layout_constraintEnd_toStartOf="@+id/textViewAll"
app:layout_constraintHorizontal_bias="0.13"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="@+id/textViewAll"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:text="View all (35)"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="333dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.62" />
</androidx.constraintlayout.widget.ConstraintLayout>
【讨论】:
以上是关于如何防止视图重叠?的主要内容,如果未能解决你的问题,请参考以下文章