Walker登录页面

1.登录上方的白底和两个输入框是编写在login_top.xml页面中。

  login_top.xml页面（该页面为了方便解释使用了不合法的解释符，请见谅）：

[html] view
plain copy

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    xmlns:tools="http://schemas.android.com/tools"  

    android:background="@drawable/logintop_bg"     //背景调用logintop_bg.xml页面        

    android:layout_width="match_parent"  

    android:layout_height="wrap_content"  

    android:paddingBottom="@dimen/activity_horizontal_margin"  

    android:paddingLeft="@dimen/activity_horizontal_margin"  

    android:paddingRight="@dimen/activity_horizontal_margin"  

    android:paddingTop="@dimen/activity_top_margin"  

    tools:context=".MainActivity" >         

  

    <EditText  

        android:id="@+id/etName"  

        android:hint="@string/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"     //使用系统自带的EditText样式，即橙色全框  

        android:drawableLeft="@drawable/icons_inform_user"  

        android:drawablePadding="@dimen/drawable_padding"  

        android:ems="10" >  

        <requestFocus />  

    </EditText>  

  

    <EditText  

        android:id="@+id/etPass"  

        android:hint="@string/etPass"  

        android:layout_width="match_parent"   

        android:layout_height="wrap_content"  

        android:layout_alignLeft="@+id/etName"  

        android:layout_below="@+id/etName"  

        android:layout_marginTop="10dp"  

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

        android:drawableLeft="@drawable/icons_inform_pass"  

        android:drawablePadding="@dimen/drawable_padding"  

        android:ems="10"          

        android:inputType="textPassword" />  

  

    <LinearLayout                                    //添加一个线性布局，用于保存两个Button  

        android:layout_width="match_parent"  

        android:layout_height="wrap_content"  

        android:layout_alignLeft="@+id/etPass"  

        android:layout_below="@+id/etPass"  

        android:layout_marginTop="20dp" >  

  

        <Button  

            android:id="@+id/btLogin"  

            android:layout_width="wrap_content"  

            android:layout_height="wrap_content"  

            android:layout_weight="1"                         //权重为1，如果页面中所有控件都设置1，那么该页面被所有空间平分，如果只有一个控件设置为1，那么该页面在分配给其余控件相应的区域后，剩余空间全部由权重为1的控件填充  

            android:background="@drawable/btchange_bg"        //按钮背景为一个xml文件，可以进行点击变换处理  

            android:text="@string/btLogin" />  

  

       <Button  

            android:id="@+id/btRegister"                         

            android:layout_width="wrap_content"  

            android:layout_height="wrap_content"  

            android:layout_weight="1"  

            android:background="@drawable/btchange_bg"            

            android:text="@string/btRegister"  

            android:layout_marginLeft="5dp" />  

    </LinearLayout>                               

  

</RelativeLayout>  

2.login_top.xml页面的背景为白色半透明图片，设置在logintop_bg.xml页面中。

   logintop_bg.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">  

    <solid android:color="#55FFFFFF"/>  <!-- 后边六个字母代表颜色，前边两位数字代表透明度 -->  

    <corners android:radius="10dp"/>  

</shape>  

3.在values文件夹下有dimens.xml页面和strings.xml页面，其中dimens.xml页面保存程序中使用的距离数值，strings.xml页面保存程序中使用的Text值。

  dimens.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

<resources>  

  

    <!-- 用于存储距离数据 -->  

    <!-- Default screen margins, per the Android Design guidelines. -->  

    <dimen name="activity_horizontal_margin">16dp</dimen>  

    <dimen name="activity_top_margin">20dp</dimen>  

    <dimen name="activity_vertical_margin">16dp</dimen>  

    <dimen name="activity_left_margin">125dp</dimen>  

   

    <dimen name="drawable_padding">10dp</dimen>  

      

    <dimen name="activity_changeLeft_margin">135dp</dimen>  

 </resources>  

strings.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

<!-- 设置Text的页面 -->  

<resources>  

    <string name="app_name">登录</string>  

    <string name="action_settings">Settings</string>  

    <string name="hello_world">Hello world!</string>  

    <string name="tvForgetPass"><u>忘记密码</u></string>  

    <string name="etName">请输入用户名</string>  

    <string name="etPass">请输入密码</string>  

    <string name="btLogin">登录</string>  

    <string name="btRegister">注册</string>  

</resources>  

4.页面Button的点击效果由btchange_bg.xml页面控制，其中btn_shape.xml页面表示Button未按下时状态，btn_shape_after.xml页面表示Button按下时状态。

  btchange_bg.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

  

<!-- 按钮点击处理页面 -->  

<selector xmlns:android="http://schemas.android.com/apk/res/android" >  

    <!-- state_pressed为判断是否被按下，如果值为false，说明未被按下，背景为btn_shape -->  

    <item android:drawable="@drawable/btn_shape" android:state_pressed="false"></item>  

    <!-- state_pressed为判断是否被按下，如果值为true，说明被按下，背景为btn_shape_after -->  

    <item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item>  

</selector>  

btn_shape.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

  

<!-- 设置按钮点击前的样式  -->  

<shape xmlns:android="http://schemas.android.com/apk/res/android" >  

    <solid android:color="#FF7acaee"/>  <!-- 设置图形为填充图形并且设置填充颜色 -->  

    <corners android:radius="10dp"/>    <!-- 矩形四个角的圆角半径 -->  

</shape>  

btn_shape_after.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

  

<!-- 设置按钮点击前的样式  -->  

<shape xmlns:android="http://schemas.android.com/apk/res/android" >  

    <solid android:color="#9ac0cd"/>      <!-- 设置图形为填充图形并且设置填充颜色 -->  

    <corners android:radius="10dp"/>      <!-- 矩形四个角的圆角半径 -->  

</shape>  

5.整个页面的蓝色背景保存在login_bg.xml页面中。

  login_bg.xml页面：

[html] view
plain copy

<?xml version="1.0" encoding="utf-8"?>  

<shape xmlns:android="http://schemas.android.com/apk/res/android" >  

    <gradient   

        android:angle="45"  

        android:endColor="#FF72CAE1"  

        android:startColor="#FFACDAE5"/>       <!-- gradient为设置渐变色的标签，angle为渐变角度，endcolor和startcolor分别对应渐变的重点色和起始色 -->  

</shape>  

6.activity_login.xml为显示登录的主页面，将login_top.xml页面包含到activity_login.xml页面中，并添加其余的控件。

  activity_login.xml页面：

[html] view
plain copy

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    xmlns:tools="http://schemas.android.com/tools"  

    android:background="@drawable/login_bg"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent"  

    android:paddingLeft="@dimen/activity_horizontal_margin"       

    android:paddingRight="@dimen/activity_horizontal_margin"  

    android:paddingTop="@dimen/activity_top_margin"  

    tools:context=".MainActivity" >                  <!-- padding...代表该控件距离空间中内容的边距离，是内边距 -->  

  

    <include                

        android:id="@+id/include1"  

        layout="@layout/login_top" />                <!-- 导入login_top.xml文件 -->  

  

    <TextView  

        android:id="@+id/tvForgetPass"  

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content"  

        android:layout_alignParentBottom="true"  

        android:layout_alignRight="@+id/include1"  

        android:layout_marginBottom="182dp"  

        android:text="@string/tvForgetPass" />  

  

    <ImageView  

        android:id="@+id/ivSun"  

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content"  

        android:layout_alignParentBottom="true"  

        android:layout_alignRight="@+id/tvForgetPass"  

        android:layout_marginBottom="16dp"  

        android:src="@drawable/sun" />  

  

</RelativeLayout>  

7.本程序中，注意LinearLayout标签为线性布局，在该标签下的所有子元素会根据orientation属性的值来决定是按行或者是按列来逐个显示；而RelativeLayout为相对布局，是根据控件的相对位置而言，比如居于按钮的左侧或者右侧。

8.完成后运行就可以看到图示效果，并且点击按钮可变色。