安卓登录页面的布局

首先呢先让大家看一下整个登录页面

下面我依次讲解页面制作的步骤：

一、这个页面分为两个部分

1.背景

2.登录页面

二、整体的布局

这个页面所用的事嵌套布局，在线性布局里面嵌套的是相对布局，在大多数情况下，还是推荐用线性布局。

下面咱们先实现第一部分的代码：

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@drawable/background_login">
</LinearLayout>

这是最外面一层的源代码。

第二部分的源代码：

<RelativeLayout
              android:id="@+id/login_div"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:padding="15dip"
              android:layout_margin="15dip"
              android:background="@drawable/background_login_div_bg"
              >
              <!-- 账号 -->
              <TextView
                      android:id="@+id/login_user_input"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignParentTop="true"
                      android:layout_marginTop="5dp"
                      android:text="@string/login_label_username"
                      style="@style/normalText"/>
              <EditText
                      android:id="@+id/username_edit"
                      android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
                      android:hint="@string/uname"
                      android:layout_below="@id/login_user_input"
                      android:drawableLeft="@drawable/icons_user_img"
                      android:background="@android:drawable/edit_text"
                      android:singleLine="true"

                      android:inputType="text"/>
        <!-- 密码 text -->
        <TextView
                android:id="@+id/login_password_input"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/username_edit"
                android:layout_marginTop="3dp"
                android:text="@string/login_label_password"
                style="@style/normalText"/>
        <EditText
                android:id="@+id/password_edit"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/login_password_input"
               android:drawableLeft="@drawable/icons_password_img"
               android:background="@android:drawable/edit_text"
                android:singleLine="true"
                android:hint="@string/upass"
                android:inputType="textPassword"
        />
        <!-- 登录button -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_below="@id/password_edit"

             >
        <Button
                android:id="@+id/signin_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_label_signin"
                android:background="@drawable/login"
               android:layout_weight="1"
        />
         <Button
                android:id="@+id/bt_enroll"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_enroll"
                android:background="@drawable/login"
                android:layout_marginLeft="10dp"
               android:layout_weight="1"
        />
        </LinearLayout>
      </RelativeLayout>  

      <RelativeLayout
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          >
             <TextView  android:id="@+id/register_link"
                 android:text="@string/login_register_link"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginLeft="15dp"
                 android:textColor="#888"
                 android:textColorLink="#FF0066CC"
              />
                <ImageView android:id="@+id/miniTwitter_logo"
                    android:src="@drawable/monkey"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentBottom="true"
                    android:layout_marginRight="25dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="25dp"
                     />  

                </RelativeLayout>  

三、下面是整个页面的代码：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@drawable/background_login">
      <!-- padding 内边距   layout_margin 外边距
                      android:layout_alignParentTop 布局的位置是否处于顶部 -->
      <RelativeLayout
              android:id="@+id/login_div"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:padding="15dip"
              android:layout_margin="15dip"
              android:background="@drawable/background_login_div_bg"
              >
              <!-- 账号 -->
              <TextView
                      android:id="@+id/login_user_input"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignParentTop="true"
                      android:layout_marginTop="5dp"
                      android:text="@string/login_label_username"
                      style="@style/normalText"/>
              <EditText
                      android:id="@+id/username_edit"
                      android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
                      android:hint="@string/uname"
                      android:layout_below="@id/login_user_input"
                      android:drawableLeft="@drawable/icons_user_img"
                      android:background="@android:drawable/edit_text"
                      android:singleLine="true"

                      android:inputType="text"/>
        <!-- 密码 text -->
        <TextView
                android:id="@+id/login_password_input"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/username_edit"
                android:layout_marginTop="3dp"
                android:text="@string/login_label_password"
                style="@style/normalText"/>
        <EditText
                android:id="@+id/password_edit"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/login_password_input"
               android:drawableLeft="@drawable/icons_password_img"
               android:background="@android:drawable/edit_text"
                android:singleLine="true"
                android:hint="@string/upass"
                android:inputType="textPassword"
        />
        <!-- 登录button -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_below="@id/password_edit"

             >
        <Button
                android:id="@+id/signin_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_label_signin"
                android:background="@drawable/login"
               android:layout_weight="1"
        />
         <Button
                android:id="@+id/bt_enroll"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_enroll"
                android:background="@drawable/login"
                android:layout_marginLeft="10dp"
               android:layout_weight="1"
        />
        </LinearLayout>
      </RelativeLayout>  

      <RelativeLayout
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          >
             <TextView  android:id="@+id/register_link"
                 android:text="@string/login_register_link"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginLeft="15dp"
                 android:textColor="#888"
                 android:textColorLink="#FF0066CC"
              />
                <ImageView android:id="@+id/miniTwitter_logo"
                    android:src="@drawable/monkey"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentBottom="true"
                    android:layout_marginRight="25dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="25dp"
                     />  

                </RelativeLayout>  

    </LinearLayout>