基本登录页面的实现

                                    基本登录页面的实现

1.简单的自我介绍

   我是一名计算机系的大二学生，这个学期刚刚接触Adriod，我们的老师希望我们用写博客的方式记录下自己的学习过程及成果，我也觉得这是个很好的方式让我们理解的更加深入。在这里，我将按照我自己的理解将老师所教的编程知识记录下来。如有学术不精的地方，敬请指教。

2.Andriod基本登录页面的介绍

            大家看上面这张图片，登录页面基本由两部分组成，一部分为有点发白的登录框，一部分淡蓝色的背景。这其实是一个布局包裹一个布局所呈现出来的效果。即一个activity_login.xml文件包裹一个login_top.xml文件所呈现出来的（使用<include/>标签）。

3.login_top.xml文件

          

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:background="@drawable/logintopbg_roundcorner"
    >

    <EditText
        android:id="@+id/etName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@android:drawable/edit_text"
        android:drawableLeft="@drawable/etname"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="@string/etName" >
    </EditText>

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:layout_alignLeft="@+id/etName"
        android:layout_below="@+id/etName"
        android:background="@android:drawable/edit_text"
        android:drawableLeft="@drawable/etpassword"
        android:drawablePadding="10dp"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:hint="@string/etPassword"
        android:inputType="textPassword"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/etPassword"
        android:layout_below="@+id/etPassword"
        android:layout_marginTop="5dp"
        >

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btnLogin"
            android:background="@drawable/btn_select"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btnRegist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btnRegist2" 
            android:background="@drawable/btn_select"
            android:layout_weight="1"
            android:layout_marginLeft="5dp"
            />
        
    </LinearLayout>

<p style="font-size: 18px;"></RelativeLayout></p>

（1）基本是一些易懂的代码，其中

android:background="@android:drawable/edit_text"

用的是系统定义好的背景。

（2）两个Button按钮使用的是线性布局。

4.activity_login.xml文件（呈现出来则为第一张图片） 

<span style="font-size:24px;"><RelativeLayout 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:background="@color/lightblue"
    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=".LoginActivity" >
    <include android:id="@+id/ic1"
        layout="@layout/login_top1"/>

   

    <TextView
        android:id="@+id/tvForgetPass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/ic1"
        android:layout_below="@+id/ic1"
        android:layout_marginTop="32dp"
        android:layout_marginRight="16dp"
        android:text="@string/tvForgetPass"
         android:textAppearance="?android:attr/textAppearanceButton"
        />
</span><span style="font-size:18px;">
    </span><span style="font-size: 18px;"><ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/tvForgetPass"
        android:layout_alignRight="@+id/ic1"
        android:layout_marginBottom="20dp"
        android:src="@drawable/monkey" />

</RelativeLayout></span>

5.Ending Talk

       谢谢阅读，请多多指教。