如何在Android中避免相对布局中视图的重叠？

Question

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView2"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView3"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView4"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView5"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView6"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView7"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView8"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView9" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="商店圖片:"
        android:textSize="15sp"
        android:layout_alignParentTop="true"
        android:layout_alignLeft="@id/imageView1" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/textView10"
        android:contentDescription="@string/top" />
</RelativeLayout>

：空段落标签。

Simple output:
textview1     textview9
textview2     imageview1
.
.
.
button1

上述布局是一个水平分割的页面，左侧有文本视图和按钮列表，右侧有图像视图。问题是：当文本视图内容过长时，图像视图将覆盖其内容，除了使用bringtofront()之外，在xml中是否有任何方法来调整文本视图的宽度，以防止与图像视图重叠？

- user782104

---

为什么不尝试将 android:layout_alignParentTop="true" 应用于 ImageView，并将 android:layout_alignLeft="@id/textView1" 应用于 ImageView。然后将 android:layout_below="@id/button1" 应用于 textView10。 - g00dy

总体思路是，您需要将所有的“TextView”一个接一个地放置在下面，最后在左列放置一个“Button”，在右列只放置一个“ImageView”？ - g00dy

Answer 1

使用layout_toStartOf在第一个项目中，第二个项目的+id位于双引号下方。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@+id/selectaccount"
        android:text="very long text which used to overlap over radio button"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RadioButton
        android:id="@+id/selectaccount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

在TextView中注意这个参数

android:layout_toStartOf="@+id/selectaccount"

XML是从上到下读取的

这就是Android中布局如何呈现的方式

• @id/item意味着item在此行之前被定义
• @+id/item意味着item将会在此行之后某处出现

- HimalayanCoder

---

+1 对于 "@+id/item" 意味着该项将在此行以下的某个位置出现。我从未知道可以这样做。我总是在 xml 中重新排序我的视图。谢谢！ - Eric Cochran

如果有人对措辞感到困惑，+id表示声明一个新的ID，它与事物是“上面”还是“下面”没有特定关系。这就像在代码中使用变量之前声明变量一样。第一次想要使用ID时，必须先声明它。 - Niall

Answer 2

如果您使用这种设计，那么应该使用线性布局。

并在其中使用表格行来显示此类视图。

同时还要使用权重，以便您的视图不会与其他视图重叠。尝试使用以下方法：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
<TableRow 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:weightSum="10">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:textSize="30sp"
        android:text="test"
        android:layout_weight="5" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:textSize="20sp" 
        android:text="test"
        android:layout_weight="5"/>
</TableRow>

</LinearLayout>
</ScrollView>

希望这有所帮助！

- Armaan Stranger

---

据我所知，如果您使用layout_weight属性，则您的尺寸(layout_height或layout_width)之一应设置为0dp。 - faizal

是的，没错。但在这里，我们不需要设置权重，它只是我展示的一个属性。如果我们真的想要设置权重，那么我们需要将高度或宽度设置为0dp。 - Armaan Stranger

嘿 @ArmaanStranger，你能帮我解决这个问题吗？https://dev59.com/oqrka4cB1Zd3GeqPjMuw?noredirect=1#comment87836903_49952965 - user9550968

Answer 3

将所有的TextView与ImageView左对齐，像最后一个一样： android:layout_toLeftOf="@id/imageView1"

- Harish Godara

---

所有的TextView应该与ImageView左对齐，这样就不会出现任何一个TextView重叠在图片上。 - Harish Godara

@HarishGodara 他的意思是你应该使用 layout_toLeftOf 而不是 layout_alignLeft。我已经将你的答案更新为正确的代码。 - Vicky Chijwani

Answer 4

我曾遇到类似问题，尝试了这里和其他类似帖子中提出的几乎所有解决方法。

最后成功的一点是添加如下内容：

android:layout_toStartOf="@+id/youroverlappeditem"

因此，重叠的项目只会运行到被重叠的项目。

layout_toLeftOf本身是不够的。

当然，需要适当地使用ellipsize="end"。

我的情况是在相对布局中使用recyclerview。

- Bud Asterisk

Answer 5

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="1.0" >

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".5"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        />

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".5"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

- Addicted Manish

Answer 6

您可以通过点击“推断约束”来解决此问题。请按照下图提示操作：

- mohamed

Answer 7

尝试使用约束布局，它可以简化您的布局。

- Juan Mendez

Answer 8

在你的xml布局中添加以下这行代码

tools:ignore="RelativeOverlap"

- Raj

---

这完全没有帮助。在“工具”命名空间中的东西只会影响Android Studio可视化预览中所看到的内容，而不会影响运行在设备上的应用程序。 - Niall