android - 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"

它放置正确，但我认为它是一个“黑客”，应该没有必要，对吧？

所以，最后一个 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 的左侧？

Answer 1

I have two EditText, and I want an image to be displayed to the left of each EditText. When I try to do that, I get the following result (Eclipse editor):[...]Firstly, why isnt this working?

RelativeLayout 会做这样的事情:

• 获取第一个元素，EditText，它被设置为填充父级的宽度(并且将从左上角开始定位(默认定位在 RelativeLayout)), 它基本上填满了屏幕的所有宽度
• 获取位于 EditText 左侧的 ImageView，但由于 EditText 放置在从左边缘开始的位置屏幕，它会填满整个屏幕 ImageView 将被放置在 EditText 的左侧，在可见屏幕区域之外

按照您的意愿定位 View 的一种方法是:

<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>

Second question; why is the "padlock" image on top of the first image, and not directly to the left of the second EditText?

RelativeLayout 将从屏幕的左上角开始放置其子项(没有设置规则)。如果您没有规则，您最终会遇到被绑架的 child 。

Lastly; why is this needed to make the image to the left of the last EditText?

这不是黑客攻击。您需要告诉 RelativeLayout 第二个 ImageView 的位置在第一个 ImageView 的下方。