RelativeLayout不能正确处理“toLeftOf”和/或“toRightOf”的问题

Question

我一直在寻找RelativeLayout中"toLeftOf"和"toRightOf"问题的解决方法，但没有找到真正的解决方案或好的答案:

基本上，“toLeftOf”效果不是很好。

我有两个EditText，我想在每个EditText的左侧显示一个图像。当我尝试这样做时，我得到了以下结果（Eclipse编辑器）:

如您所见，图片根本没有显示出来。这是使用的XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="35dp"
    android:background="#010101"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/login_carNumber"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_carNumber"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null" >

        <requestFocus />
    </EditText>

    <ImageView
        android:id="@+id/login_car_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/user"
        android:layout_toLeftOf="@id/login_carNumber" />

    <EditText
        android:id="@+id/login_password"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_carNumber"
        android:layout_marginTop="10dp"
        android:hint="@string/prompt_password"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null" >
    </EditText>

    <ImageView
        android:id="@+id/login_lock_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/lock"
        android:layout_toLeftOf="@id/login_password" />

</RelativeLayout>

首先，为什么这不起作用？

如果我更改XML，并在EditText上使用“toRightOf”而不是在图像上使用“toLeftOf”，则会得到以下结果：

可以看到，两个图像都显示出来了，但它们是“相互重叠的”，当挂锁应该在第二个EditText的左侧。以下是XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="35dp"
    android:background="#010101"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/login_carNumber"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/login_car_icon"
        android:hint="@string/prompt_carNumber"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null" >

        <requestFocus />
    </EditText>

    <ImageView
        android:id="@+id/login_car_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/user" />

    <EditText
        android:id="@+id/login_password"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_carNumber"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/login_lock_icon"
        
        android:hint="@string/prompt_password"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null" >
    </EditText>

    <ImageView
        android:id="@+id/login_lock_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/lock" 
        />

</RelativeLayout>

第二个问题是：为什么“挂锁”图像在第一个图像的顶部，而不是直接在第二个EditText左边？

如果我现在向最后一个ImageView（挂锁图片）添加以下行：

android:layout_below="@+id/login_car_icon"

布局已经正确放置，但我认为这是一种“hack”，并且不应该是必需的，对吗？

因此，最后一个ImageView具有以下XML以起作用：

<ImageView
    android:id="@+id/login_lock_icon"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@drawable/lock" 
    android:layout_below="@+id/login_car_icon"
    />

结果:

最后，为什么需要将图片放在最后一个EditText的左侧？

- Ted

---

RelativeLayout 默认将其内容定位于 (0, 0)。当您使用 android:layout_rightOf 布局某个组件时，这只会影响子组件的 x 坐标。而使用 android:layout_below 则会同时改变 y 坐标。 - harism

谢谢。应该更清楚地说明，“toLeftOf”不会影响y，因为我认为大多数人都会期望它也会影响y... - Ted

Answer 1

我有两个EditText，我希望在每个EditText的左侧显示一张图片。但是当我尝试这样做时，我得到了以下结果（Eclipse编辑器）：[...]首先，为什么不起作用？

RelativeLayout将执行以下操作：

- 获取第一个元素，即EditText，它被设置为填充父级的宽度（并将从左上角（默认定位在RelativeLayout中）开始定位），它基本上填充了整个屏幕的宽度。 - 获取ImageView，位于EditText的左侧，但由于EditText放置在屏幕的左侧边缘，并且填充了整个屏幕，因此ImageView将被放置在EditText的左侧，在可见屏幕区域之外。

要想按照您的想法定位视图的一种方法是：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="35dp"
    android:background="#010101"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/login_car_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/user"
        />  

    <EditText
        android:id="@+id/login_carNumber"
        style="@style/EditTextDark"
        android:layout_toRightOf="@id/login_car_icon"  
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_carNumber"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/login_password"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_carNumber"
        android:layout_alignLeft="@id/login_carNumber"
        android:layout_marginTop="10dp"
        android:hint="@string/prompt_password"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null" >
    </EditText>

    <ImageView
        android:id="@+id/login_lock_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/lock"
        android:layout_alignTop="@id/login_password"
    />

</RelativeLayout>

第二个问题：为什么“挂锁”图像在第一个图像的上方，而不是直接在第二个EditText的左侧？ RelativeLayout会将其子项（没有设置规则的）放置在屏幕的左上角。如果您没有规则，您将得到重叠的子项。

最后一个问题：为什么需要这样做才能使图像位于最后一个EditText的左侧？

这不是一种hack。您需要告诉RelativeLayout第二个ImageView的位置在第一个ImageView下方。

- user

Answer 2

尝试这段代码，它会展示出像图片中所示的布局。

这对你有用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="35dp"
    android:background="#010101"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/login_carNumber"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_carNumber"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/login_car_icon" >

        <requestFocus />
    </EditText>

    <ImageView
        android:id="@+id/login_car_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/user"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <EditText
        android:id="@+id/login_password"
        style="@style/EditTextDark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"        
        android:layout_marginTop="10dp"
        android:hint="@string/prompt_password"
        android:inputType="phone"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textCursorDrawable="@null"
        android:layout_toRightOf="@+id/login_lock_icon"
        android:layout_below="@+id/login_car_icon" >
    </EditText>

    <ImageView
        android:id="@+id/login_lock_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/lock"
        android:layout_below="@+id/login_car_icon" />

</RelativeLayout>

- Dixit Patel

Answer 3

逻辑上的处理方式应该是先加载图像，然后在它们右侧加载编辑文本小部件。

- Philip Sheard