Question

在使用RelativeLayout时，我一直在寻找“toLeftOf”和“toRightOf”问题的解决方案，但还没有找到真正的解决方案或这种行为的好答案：

基本上，“toLeftOf”并不好用。

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

enter image description here

如您所见，图像根本没有显示。这是使用的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”，那么我会得到以下结果：

enter image description here

正如您所看到的，当挂锁应位于第二个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"
    />

结果：

enter image description here

最后;为什么需要将图像放在最后一个EditText的左边？

谢谢=）

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？

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

Answer 2

尝试此代码此显示布局如图所示。

这对你有用。

enter image description here

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

Answer 3

逻辑方法是首先加载图像，然后将编辑文本小部件加载到它们的右侧。

RelativeLayout没有正确处理“toLeftOf”和/或toRightOf

3 个答案: