LinearLayout 未按我的意愿对齐

Question

我们从一张图片开始：

我希望电子邮件地址的 TextView 和 EditText 位于徽标下方，但不知何故位于徽标上方。

我的布局：

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.mylifeinformationsharedsocial.LoginActivity" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:background="@color/white_1" >

    <!--  Header Starts-->
    <LinearLayout 
        android:id="@+id/linear_layout_header_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header_gradient"
        android:paddingTop="5dip"
        android:paddingBottom="5dip"
        android:orientation="vertical" >

            <!-- Logo Start-->
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/hd_logo"
                android:layout_marginLeft="10dip"
                android:layout_marginStart="10dip"
                android:contentDescription="@string/imgae_view_logo_content_description"
                />

    </LinearLayout>         
            <!-- Logo Ends -->
    <!--  Header Ends -->

    <!-- Footer Start -->
    <LinearLayout
        android:id="@+id/linear_layout_footer_id"
        android:layout_width="fill_parent"
        android:layout_height="90dip"
        android:orientation="vertical"
        android:background="@drawable/header_gradient"
        android:layout_alignParentBottom="true" >
    </LinearLayout>   
    <!-- Footer Ends -->

    <!-- Login Form -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dip" >

      <!--  Email Label -->
      <TextView 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:textColor="@color/black_1"
          android:text="@string/login_page_email_text_view_text"
          />

      <EditText
          android:id="@+id/login_page_email_edit_text_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="5dip"
          android:layout_marginBottom="20dip"
          android:singleLine="true"
          android:hint="@string/login_page_email_edit_text_hint"
          android:inputType="textEmailAddress"
          />

      <!--  Password Label -->
      <TextView 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:textColor="#372c24"
          android:text="@string/login_page_password_text_vuew_text"
          />

      <EditText
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="5dip"
          android:singleLine="true"
          android:inputType="textPassword"
          android:hint="@string/login_page_password_edit_text_hint"
            />
      <!-- Login button -->
      <Button 
          android:id="@+id/login_page_login_button_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="10dip"
          android:text="@string/login_page_login_button_text"
          />

      <!-- Link to Registration Screen -->
      <TextView 
          android:id="@+id/login_page_go_to_sign_up_page_text_view_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="40dip"
          android:layout_marginBottom="20sp"
          android:text="@string/login_page_go_to_sign_up_page_text_view_text"
          android:gravity="center"
          android:textSize="20sp"
          android:textColor="#0b84aa"
          />

    </LinearLayout>
    <!-- Login Form Ends -->

   </RelativeLayout>

</ScrollView>

我做错了什么？因为所有 LinearLayout 方向都设置为垂直，所以为什么有些视图会在其他视图之上对齐？

Answer 1

您的父容器是一个 RelativeLayout，因此子容器必须 "in a relative way" 位于彼此之间。例如：linear_layout_footer_id 应该放在 linear_layout_header_id 下使用

android:layout_below="@id/linear_layout_header_id"

其他解决方案：将您的 RelativeLayout 替换为另一个垂直方向的 LinearLayout

Answer 2

将android:layout_below="@+id/linear_layout_header_id"添加为

    <!-- Login Form -->
    <LinearLayout
        android:layout_below="@+id/linear_layout_header_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dip" >

Answer 3

请如下更改您的文件：

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.mylifeinformationsharedsocial.LoginActivity" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_1" >

        <!--  Header Starts-->
        <LinearLayout
            android:id="@+id/linear_layout_header_id"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/header_gradient"
            android:paddingTop="5dip"
            android:paddingBottom="5dip"
            android:orientation="vertical" >

            <!-- Logo Start-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/hd_logo"
                android:layout_marginLeft="10dip"
                android:layout_marginStart="10dip"
                android:contentDescription="@string/imgae_view_logo_content_description"
                />

        </LinearLayout>
        <!-- Logo Ends -->
        <!--  Header Ends -->

        <!-- Footer Start -->
        <LinearLayout
            android:id="@+id/linear_layout_footer_id"
            android:layout_width="fill_parent"
            android:layout_height="90dip"
            android:orientation="vertical"
            android:background="@drawable/header_gradient"
            android:layout_alignParentBottom="true" >
        </LinearLayout>
        <!-- Footer Ends -->

        <!-- Login Form -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dip" <!-- Because relative layout arranges all its childs in layer we have to make them separate -->
            android:layout_below="@+id/linear_layout_footer_id">

            <!--  Email Label -->
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black_1"
                android:text="@string/login_page_email_text_view_text"
                />

            <EditText
                android:id="@+id/login_page_email_edit_text_id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dip"
                android:layout_marginBottom="20dip"
                android:singleLine="true"
                android:hint="@string/login_page_email_edit_text_hint"
                android:inputType="textEmailAddress"
                />

            <!--  Password Label -->
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#372c24"
                android:text="@string/login_page_password_text_vuew_text"
                />

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dip"
                android:singleLine="true"
                android:inputType="textPassword"
                android:hint="@string/login_page_password_edit_text_hint"
                />
            <!-- Login button -->
            <Button
                android:id="@+id/login_page_login_button_id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dip"
                android:text="@string/login_page_login_button_text"
                />

            <!-- Link to Registration Screen -->
            <TextView
                android:id="@+id/login_page_go_to_sign_up_page_text_view_id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="40dip"
                android:layout_marginBottom="20sp"
                android:text="@string/login_page_go_to_sign_up_page_text_view_text"
                android:gravity="center"
                android:textSize="20sp"
                android:textColor="#0b84aa"
                />

        </LinearLayout>
        <!-- Login Form Ends -->

    </RelativeLayout>

</ScrollView>

相对布局将其所有布局相对排列。如果您不指定任何相关属性，那么它的所有子项都将重叠。

希望对你有所帮助！！

Answer 4

由于您的 parent 布局是相对的，因此您需要为下面的视图提供条件。这是使用 xml.

的固定 xml

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.mylifeinformationsharedsocial.LoginActivity" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:background="@color/white_1" >

    <!--  Header Starts-->
    <LinearLayout 
        android:id="@+id/linear_layout_header_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header_gradient"
        android:paddingTop="5dip"
        android:paddingBottom="5dip"
        android:orientation="vertical" >

            <!-- Logo Start-->
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/hd_logo"
                android:layout_marginLeft="10dip"
                android:layout_marginStart="10dip"
                android:contentDescription="@string/imgae_view_logo_content_description"
                />

    </LinearLayout>         
            <!-- Logo Ends -->
    <!--  Header Ends -->

    <!-- Footer Start -->
    <LinearLayout
        android:id="@+id/linear_layout_footer_id"
        android:layout_width="fill_parent"
        android:layout_height="90dip"
        android:orientation="vertical"
        android:background="@drawable/header_gradient"
        android:layout_alignParentBottom="true" >
    </LinearLayout>   
    <!-- Footer Ends -->

    <!-- Login Form -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_below="@+id/linear_layout_header_id"
        android:padding="10dip" >

      <!--  Email Label -->
      <TextView 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:textColor="@color/black_1"
          android:text="@string/login_page_email_text_view_text"
          />

      <EditText
          android:id="@+id/login_page_email_edit_text_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="5dip"
          android:layout_marginBottom="20dip"
          android:singleLine="true"
          android:hint="@string/login_page_email_edit_text_hint"
          android:inputType="textEmailAddress"
          />

      <!--  Password Label -->
      <TextView 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:textColor="#372c24"
          android:text="@string/login_page_password_text_vuew_text"
          />

      <EditText
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="5dip"
          android:singleLine="true"
          android:inputType="textPassword"
          android:hint="@string/login_page_password_edit_text_hint"
            />
      <!-- Login button -->
      <Button 
          android:id="@+id/login_page_login_button_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="10dip"
          android:text="@string/login_page_login_button_text"
          />

      <!-- Link to Registration Screen -->
      <TextView 
          android:id="@+id/login_page_go_to_sign_up_page_text_view_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="40dip"
          android:layout_marginBottom="20sp"
          android:text="@string/login_page_go_to_sign_up_page_text_view_text"
          android:gravity="center"
          android:textSize="20sp"
          android:textColor="#0b84aa"
          />

    </LinearLayout>
    <!-- Login Form Ends -->

   </RelativeLayout>

</ScrollView>

如您所见，现在您的登录表单的条件为

android:layout_below="@+id/linear_layout_header_id"

所以它会低于 header。

Answer 5

添加此代码

android:layout_below="@+id/linear_layout_header_id"

到应该在 Logo 下面的 LinearLayout

Answer 6

您正在 RelativeLayouts 中排列 LinerLayouts，因此您需要确保您的 LinearLayouts 彼此相对。尝试添加属性 android:layout_below.

LinearLayout 未按我的意愿对齐

LinearLayout not aligned as i wish

android

android-linearlayout

android-xml

android-imageview

android-relativelayout