如何将登录表单置于布局中央

Question

我将尝试创建以下布局：

|-----------------------------------------------------------|
|                                                           |
|                                                           |
|                                                           |
|                                                           |
|                 L-Email     [___________]-R               |
|                 L-Password  [___________]-R               |
|                                   (Login)-R               |
|                                                           |
|                                                           |
|                                                           |
|-----------------------------------------------------------|

所以我的尝试是创建了一个线性布局，每个电子邮件、密码和登录行都是一个线性布局。但我想要的是将整个东西放在中心（垂直和水平），并将电子邮件和密码标签对齐到屏幕的“L-”部分（“L-”只是表示我想要对齐到那里），而我想要将两个文本框和登录按钮对齐到“-R”标志（所以我实际上不需要L-和-R标志，这些只是在这个模型中指示对齐位置）。

以下是更具体的模型：

所以我想将整个东西对齐到中心，并将文本标签对齐到左侧绿色线，而其他内容对齐到右侧绿色线。

目前我更喜欢在eclipse中使用图形编辑器，但任何建议都可以。我已经尝试过这种方法，但卡住了：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/sahbg"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" >

            <requestFocus />
        </EditText>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <EditText
            android:id="@+id/EditText01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>

</LinearLayout>

它的显示效果如下：

- Z T

---

尝试使用RelativeLayout。如果出于某种原因您希望使用LinearLayout，请仅使用android:gravity和android:layout_gravity属性。 - Gaurav Agarwal

Answer 1

使用现有代码：

1. Change the height and width of the outer LinearLayout:

   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   

   (And you may need to change gravity="center" to layout_gravity="center", honestly I can't remember which is which at this moment.)

2. Switch the "password" LinearLayout's width to match_parent so both the "username" and "password" rows are the same width.

3. Remove the LinearLayout that holds the Button, since it is not necessary, and add:

   android:layout_gravity="right"
   

   To the Button to shift it over to the right. You can also use this on the EditTexts and give them a specific width to force them to be the same size.

- Sam

---

通过你的修改，现在看起来更好了：http://i.imgur.com/gHKunAQ.jpg 现在我需要关注一下textview，我需要在edittext和textview之间插入一些空格，但是同时我也需要像我在原问题中发布的图片一样将textview对齐到左边（即对齐textview到左侧的绿色线）。 - Z T

在EditText中使用layout_marginLeft="5dp"来在TextView和EditText之间添加一小段空间。TextView默认应该左对齐（如果没有，请添加android:layout_gravity="left"）。 - Sam

差不多快搞定了：http://i.imgur.com/3zen2ha.jpg ，代码是：http://pastebin.com/7vr8fmTU，为什么顶部的线性布局向左移动了一点？顺便说一下，如果textviews具有相同的文本，则布局是可以的，但我需要不同的文本。 - Z T

好的，将“username”和“password” LinearLayout 的宽度设置为 android:layout_width="match_parent"。这样两个布局的大小就相同了。 - Sam

谢谢。我只需要将用户名的线性布局设置为match_parent，并将顶部的edittext设置为android:layout_marginLeft="62dp" <- 我不知道为什么需要这样做，但这样就可以解决问题了。 - Z T

使用 android:layout_gravity="center" 是对我有效的解决方案。 - Moses Ndeda