安卓登录页面的布局

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

 

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

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

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>