Android之实现登陆页面分析

Android之实现登陆页面分析

二、登录界面的布局分析

1、login.xml
Step1:首先建立drawable 文件夹，创建logintopbg_roundcorner.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.     <solid  android:color="#55ffffff"/>  
4.     <corners android:radius="15dp"/>  
5. </shape>  

Step2:创建btn_select.xml

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item android:drawable="@drawable/btn_shape" android:state_pressed="false"></item>  
4.      <item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item>  
5. </selector>  

其中btn_shape.xml 文件和btn_shape_after.xml 文件如下
btn_shape.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.     <solid android:color="#ff72CAE1"/>  
4.     <corners android:radius="10dp"/>  
5.   
6. </shape>  

btn_shape_after.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.         <solid android:color="#87cefa"/>  
4.     <corners android:radius="10dp"/>  
5.   
6. </shape>  

Step3：定义login_tio.xml 文件，布局如下

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout   
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.      xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:background="@drawable/logintopbg_roundcorner"  
7.     android:layout_height="match_parent"  
8.     android:paddingBottom="@dimen/activity_vertical_margin"  
9.     android:paddingLeft="@dimen/activity_horizontal_margin"  
10.     android:paddingRight="@dimen/activity_horizontal_margin"  
11.     android:paddingTop="@dimen/activity_vertical_margin"  
12.     tools:context=".Loginactivity" >  
13. <EditText  
14.         android:id="@+id/tdName"  
15.          android:drawableLeft="@drawable/icons_user_img"  
16.         android:layout_width="match_parent"  
17.         android:layout_height="wrap_content"  
18.         android:layout_alignParentLeft="true"  
19.         android:layout_alignParentTop="true"  
20.         android:ems="10"  
21.         android:background="@android:drawable/edit_text"  
22.         android:drawablePadding="10dp"  
23.          android:hint="@string/etName"  
24.         />  
25.   
26. <EditText  
27.     android:id="@+id/tdPassword"  
28.     android:layout_width="match_parent"  
29.     android:layout_height="wrap_content"  
30.     android:layout_alignParentTop="true"  
31.     android:layout_centerHorizontal="true"  
32.     android:layout_marginTop="62dp"  
33.     android:background="@android:drawable/edit_text"  
34.     android:drawableLeft="@drawable/icons_password_img"  
35.     android:drawablePadding="10dp"  
36.     android:hint="@string/etPassword"  
37.     android:ems="10" />  
38. <LinearLayout   
39.      android:layout_width="match_parent"  
40.     android:layout_height="50dp"  
41.     android:layout_below="@id/tdPassword"  
42.     >  
43.   
44.     <Button  
45.         android:id="@+id/button1"  
46.         android:layout_width="50dp"  
47.         android:layout_height="50dp"  
48.         android:layout_weight="1"  
49.         android:background="@drawable/btn_select"  
50.         android:text="@string/btnlogin" />  
51.   
52.     <Button  
53.         android:id="@+id/button2"  
54.         android:layout_width="50dp"  
55.         android:layout_height="50dp"  
56.         android:background="@drawable/btn_select"  
57.          android:layout_weight="1"  
58.         android:layout_marginLeft="5dp"  
59.         android:text="@string/btnRegister" />  
60.       
61. </LinearLayout>  
62. </RelativeLayout>  

activity_main.xml

[html] view plain copy

1. <span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@drawable/btn_shape"  
6.     tools:context=".MainActivity" >  
7.   
8.     <ImageView  
9.         android:id="@+id/imageView1"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_alignParentBottom="true"  
13.         android:layout_alignParentRight="true"  
14.         android:layout_marginBottom="34dp"  
15.         android:layout_marginRight="27dp"  
16.         android:src="@drawable/monkey" />  
17.   
18.     <LinearLayout   
19.        android:id="@+id/tt"  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content">  
22.   
23.     </LinearLayout>  
24.   
25.     <TextView  
26.         android:id="@+id/textView1"  
27.         android:layout_width="80dp"  
28.         android:layout_height="30dp"  
29.         android:layout_alignParentRight="true"  
30.         android:layout_centerVertical="true"  
31.         android:text="@string/etPassword2" />  
32.   
33.     <include  
34.         android:id="@+id/include1"  
35.         android:layout_width="294dp"  
36.         android:layout_height="wrap_content"  
37.         android:layout_alignParentTop="true"  
38.         android:layout_centerHorizontal="true"  
39.         layout="@layout/login_top" />  
40.   
41. </RelativeLayout></span>