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,并在EditTexts上使用"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

我有两个EditText,我希望在每个EditText的左侧显示一个图像.当我尝试这样做时,我得到以下结果(Eclipse编辑器):[...]首先,为什么这不起作用？

该RelativeLayout会做这样的事情:

• 得到第一个元素,EditText设置为填充父元素的宽度(并将从左上角开始定位(默认定位在a 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的左边？

那不是黑客.你需要告诉RelativeLayout第二个ImageView位置低于第一个位置ImageView.