Walker登录页面

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

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

[html]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:background="@drawable/logintop_bg"     //背景调用logintop_bg.xml页面        
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:paddingBottom="@dimen/activity_horizontal_margin"  
7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
8.     android:paddingRight="@dimen/activity_horizontal_margin"  
9.     android:paddingTop="@dimen/activity_top_margin"  
10.     tools:context=".MainActivity" >         
11.   
12.     <EditText  
13.         android:id="@+id/etName"  
14.         android:hint="@string/etName"  
15.         android:layout_width="match_parent"  
16.         android:layout_height="wrap_content"  
17.         android:layout_alignParentLeft="true"  
18.         android:layout_alignParentTop="true"  
19.         android:background="@android:drawable/edit_text"     //使用系统自带的EditText样式，即橙色全框  
20.         android:drawableLeft="@drawable/icons_inform_user"  
21.         android:drawablePadding="@dimen/drawable_padding"  
22.         android:ems="10" >  
23.         <requestFocus />  
24.     </EditText>  
25.   
26.     <EditText  
27.         android:id="@+id/etPass"  
28.         android:hint="@string/etPass"  
29.         android:layout_width="match_parent"   
30.         android:layout_height="wrap_content"  
31.         android:layout_alignLeft="@+id/etName"  
32.         android:layout_below="@+id/etName"  
33.         android:layout_marginTop="10dp"  
34.         android:background="@android:drawable/edit_text"  
35.         android:drawableLeft="@drawable/icons_inform_pass"  
36.         android:drawablePadding="@dimen/drawable_padding"  
37.         android:ems="10"          
38.         android:inputType="textPassword" />  
39.   
40.     <LinearLayout                                    //添加一个线性布局，用于保存两个Button  
41.         android:layout_width="match_parent"  
42.         android:layout_height="wrap_content"  
43.         android:layout_alignLeft="@+id/etPass"  
44.         android:layout_below="@+id/etPass"  
45.         android:layout_marginTop="20dp" >  
46.   
47.         <Button  
48.             android:id="@+id/btLogin"  
49.             android:layout_width="wrap_content"  
50.             android:layout_height="wrap_content"  
51.             android:layout_weight="1"                         //权重为1，如果页面中所有控件都设置1，那么该页面被所有空间平分，如果只有一个控件设置为1，那么该页面在分配给其余控件相应的区域后，剩余空间全部由权重为1的控件填充  
52.             android:background="@drawable/btchange_bg"        //按钮背景为一个xml文件，可以进行点击变换处理  
53.             android:text="@string/btLogin" />  
54.   
55.        <Button  
56.             android:id="@+id/btRegister"                         
57.             android:layout_width="wrap_content"  
58.             android:layout_height="wrap_content"  
59.             android:layout_weight="1"  
60.             android:background="@drawable/btchange_bg"            
61.             android:text="@string/btRegister"  
62.             android:layout_marginLeft="5dp" />  
63.     </LinearLayout>                               
64.   
65. </RelativeLayout>  

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

   logintop_bg.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">  
3.     <solid android:color="#55FFFFFF"/>  <!-- 后边六个字母代表颜色，前边两位数字代表透明度 -->  
4.     <corners android:radius="10dp"/>  
5. </shape>  

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

  dimens.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <!-- 用于存储距离数据 -->  
5.     <!-- Default screen margins, per the Android Design guidelines. -->  
6.     <dimen name="activity_horizontal_margin">16dp</dimen>  
7.     <dimen name="activity_top_margin">20dp</dimen>  
8.     <dimen name="activity_vertical_margin">16dp</dimen>  
9.     <dimen name="activity_left_margin">125dp</dimen>  
10.    
11.     <dimen name="drawable_padding">10dp</dimen>  
12.       
13.     <dimen name="activity_changeLeft_margin">135dp</dimen>  
14.  </resources>  

strings.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- 设置Text的页面 -->  
3. <resources>  
4.     <string name="app_name">登录</string>  
5.     <string name="action_settings">Settings</string>  
6.     <string name="hello_world">Hello world!</string>  
7.     <string name="tvForgetPass"><u>忘记密码</u></string>  
8.     <string name="etName">请输入用户名</string>  
9.     <string name="etPass">请输入密码</string>  
10.     <string name="btLogin">登录</string>  
11.     <string name="btRegister">注册</string>  
12. </resources>  

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

  btchange_bg.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <!-- 按钮点击处理页面 -->  
4. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
5.     <!-- state_pressed为判断是否被按下，如果值为false，说明未被按下，背景为btn_shape -->  
6.     <item android:drawable="@drawable/btn_shape" android:state_pressed="false"></item>  
7.     <!-- state_pressed为判断是否被按下，如果值为true，说明被按下，背景为btn_shape_after -->  
8.     <item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item>  
9. </selector>  

btn_shape.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <!-- 设置按钮点击前的样式  -->  
4. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
5.     <solid android:color="#FF7acaee"/>  <!-- 设置图形为填充图形并且设置填充颜色 -->  
6.     <corners android:radius="10dp"/>    <!-- 矩形四个角的圆角半径 -->  
7. </shape>  

btn_shape_after.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <!-- 设置按钮点击前的样式  -->  
4. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
5.     <solid android:color="#9ac0cd"/>      <!-- 设置图形为填充图形并且设置填充颜色 -->  
6.     <corners android:radius="10dp"/>      <!-- 矩形四个角的圆角半径 -->  
7. </shape>  

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

  login_bg.xml页面：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <gradient   
4.         android:angle="45"  
5.         android:endColor="#FF72CAE1"  
6.         android:startColor="#FFACDAE5"/>       <!-- gradient为设置渐变色的标签，angle为渐变角度，endcolor和startcolor分别对应渐变的重点色和起始色 -->  
7. </shape>  

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

  activity_login.xml页面：

[html]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:background="@drawable/login_bg"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:paddingLeft="@dimen/activity_horizontal_margin"       
7.     android:paddingRight="@dimen/activity_horizontal_margin"  
8.     android:paddingTop="@dimen/activity_top_margin"  
9.     tools:context=".MainActivity" >                  <!-- padding...代表该控件距离空间中内容的边距离，是内边距 -->  
10.   
11.     <include                
12.         android:id="@+id/include1"  
13.         layout="@layout/login_top" />                <!-- 导入login_top.xml文件 -->  
14.   
15.     <TextView  
16.         android:id="@+id/tvForgetPass"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_alignParentBottom="true"  
20.         android:layout_alignRight="@+id/include1"  
21.         android:layout_marginBottom="182dp"  
22.         android:text="@string/tvForgetPass" />  
23.   
24.     <ImageView  
25.         android:id="@+id/ivSun"  
26.         android:layout_width="wrap_content"  
27.         android:layout_height="wrap_content"  
28.         android:layout_alignParentBottom="true"  
29.         android:layout_alignRight="@+id/tvForgetPass"  
30.         android:layout_marginBottom="16dp"  
31.         android:src="@drawable/sun" />  
32.   
33. </RelativeLayout>  

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

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