用已学布局和控件画一个登陆界面

学了一个星期的基本控件和简单布局了，今天自己动手画一个简单的登录界面。

在画的过程中发现了自己很多用法理解错误，在完成界面过程中将已学的控件和布局几乎都用了，让自己对控件和布局有了更进一步的理解。

1.首先用个线性布局，再在里面嵌套。

2.下图用到线性布局的水平布局，然后用到一个ImageView，一个TextView

XML：

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:background="@drawable/head"
        android:orientation="horizontal" >


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:src="@drawable/back" >
        </ImageView>


        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="@string/dl"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />
    </LinearLayout>

注意：各种水平布局、垂直布局还需注意。

3.图片

这个只需一个ImageView，再设置方向和间距就行了。

XML：

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:src="@drawable/login_head" >
    </ImageView>

4.两个线性布局，TextView、ImageView、View

XML：

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:layout_marginLeft="10dp"
        android:background="#FFFFFF">


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/login_account" >
        </ImageView>


        <EditText
            android:layout_width="309dp"
            android:layout_height="45dp"
            android:background="@null"
            android:ems="10" 
            android:hint="请输入手机号/身份证">
        </EditText>
    </LinearLayout>
    <View 
        android:layout_width="fill_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_height="1dp"
         android:background="#DCDCDC"   
        />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:layout_marginLeft="10dp"
        android:background="#FFFFFF">


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/login_account" >
        </ImageView>


        <EditText
            android:layout_width="309dp"
            android:layout_height="45dp"
            android:background="@null"
            android:ems="10"
            android:hint="请输入登录密码" >
        </EditText>
    </LinearLayout>

5.线性布局，水平布局

XML：

<LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" 
        >
     <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="记住用户名"
            android:textColor="#000000"
            android:textSize="15sp" />   
     <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="忘记密码？"
            android:textColor="#48D1CC"
            android:textSize="15sp" />
        
    </LinearLayout>

6. 2个Button按钮

XML：

<Button
        android:layout_width="fill_parent"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_height="45dp"
        android:text="登录"
        android:background="#00BFFF"
        ></Button>
    <Button
        android:layout_width="fill_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_height="45dp"
        android:text="注册"
        android:background="#FFFFFF"
        ></Button>

最终完成界面：