Android登录

Android登录

大家先看效果图：

1.login.xml

[html]  view plain  copy

1. <LinearLayout  
2.         android:id="@+id/login_input01"  
3.         android:layout_below="@id/zx_text"  
4.         android:layout_width="fill_parent"  
5.         android:layout_height="wrap_content"  
6.         android:layout_marginTop="50dp"  
7.         android:layout_marginLeft="5dp"  
8.         android:layout_marginRight="5dp"  
9.         android:gravity="center_vertical"  
10.     android:orientation="horizontal"   
11.     <span style="color:#cc0000;">android:addStatesFromChildren="true"//这个很重要，</span><span style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif; "><em><span style="color:red;">从子控件</span></em></span><span style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif; "><u><span style="color:red;"><EditText></span><span style="color:red;">中获取焦点</span></u></span>  
12.     android:background="@drawable/input_box_selector"  
13. >  
14.     <ImageView  
15.             android:id="@+id/user_image"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_marginLeft="15dp"  
19.             android:layout_marginRight="8dp"  
20.             android:background="@drawable/name"  
21.             android:clickable="true" />  
22.     <<span style="color:#ff0000;">EditText</span>  
23.             android:id="@+id/user_name"          
24.             android:layout_width="fill_parent"  
25.             android:layout_height="40dp"  
26.             android:paddingLeft="10dp"  
27.             android:maxLength="20"  
28.             android:singleLine="true"      
29.             <span style="color:#ff0000;">android:background="@null"   </span>            
30.          />    
31. </LinearLayout>  
32.       
33. <LinearLayout  
34.         android:id="@+id/login_input02"  
35.         android:layout_below="@id/login_input01"  
36.         android:layout_width="fill_parent"  
37.         android:layout_height="wrap_content"  
38.         android:layout_marginTop="8dp"  
39.         android:layout_marginLeft="5dp"  
40.         android:layout_marginRight="5dp"  
41.         android:gravity="center_vertical"  
42.         android:addStatesFromChildren="true"  
43.     android:orientation="horizontal"   
44.     android:background="@drawable/input_box_selector"  
45. >  
46.     <ImageView  
47.             android:id="@+id/lock_image"  
48.             android:layout_width="wrap_content"  
49.             android:layout_height="wrap_content"  
50.             android:layout_marginLeft="15dp"  
51.             android:layout_marginRight="8dp"  
52.             android:background="@drawable/password"  
53.             android:clickable="true" />  
54.     <EditText  
55.             android:id="@+id/user_password"  
56.             android:layout_width="fill_parent"  
57.             android:layout_height="40dp"  
58.             android:paddingLeft="10dp"  
59.             android:layout_centerHorizontal="true"  
60.             <span style="color:#ff6600;">android:inputType="textPassword"</span>  
61.             android:maxLength="20"  
62.             android:password="true"  
63.             <span style="color:#ff0000;">android:background="@null"</span>     
64.          />  
65. </LinearLayout>  

[html]  view plain  copy

1. <LinearLayout   
2.         android:id="@+id/linearlayout"  
3.         android:layout_below="@id/login_input02"              
4.         android:layout_width="match_parent"  
5.         android:layout_height="40dp"  
6.         android:layout_marginTop="5dp"  
7.         android:orientation="horizontal">  
8.   
9.     <CheckBox  
10.           android:id="@+id/login_checkBox"  
11.           <span style="color:#ff0000;">style="@style/MyCheckBox"</span>  
12.           android:layout_width="wrap_content"  
13.           android:layout_height="wrap_content"  
14.           android:layout_gravity="center_vertical"                
15.           android:layout_marginRight="3dp"  
16.           android:scaleX="0.5"  
17.           android:scaleY="0.5"  
18.           android:text="@string/login_remember_psw"  
19.           android:textColor="#777"  
20.           android:textSize="32sp" />  
21.           
22.     <TextView   
23.          android:id="@+id/forget_pwd"                 
24.          android:layout_width="0dp"  
25.          android:layout_weight="1"  
26.          android:layout_height="wrap_content"  
27.          android:text="@string/forget_pwd"  
28.          android:textSize="16sp"  
29.          android:textColor="#777"  
30.          android:gravity="center"  
31.          android:layout_gravity="center_vertical"  
32.          android:layout_marginLeft="10dp"  
33.          android:layout_marginRight="30dp"  
34.          />  
35. </LinearLayout>  

[html]  view plain  copy

1. <Button   
2.         android:id="@+id/login_button"  
3.         android:layout_below="@id/linearlayout"  
4.         android:layout_width="fill_parent"  
5.         android:layout_height="35dp"  
6.         android:layout_marginLeft="15dp"  
7.         android:layout_marginRight="15dp"  
8.         android:layout_marginTop="10dp"  
9.         android:layout_centerHorizontal="true"  
10.         android:text="@string/login_button"  
11.         android:textColor="#ffffff"  
12.         android:background="@drawable/login_button_selector"  
13.         />  
14. <TextView   
15.     android:id="@+id/register_now"  
16.     android:layout_below="@id/login_button"  
17.     android:layout_width="wrap_content"  
18.     android:layout_height="wrap_content"  
19.     android:layout_marginTop="45dp"  
20.     android:text="@string/register_now"  
21.     android:layout_centerInParent="true"  
22.     android:textColor="#ff0000"    
23.     android:textSize="18sp"     
24.  />  

2.自定义显示效果

input_box_selector.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:state_focused="false" android:drawable="@drawable/input_normal" />    
4.      <item android:state_focused="true" android:drawable="@drawable/input_focused" />    
5. </selector>  

input_normal.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.    android:shape="rectangle">  
4.     <!-- 描边 -->  
5.     <stroke  
6.         android:width="1dp"  
7.         android:color="#cccccc" />  
8.     
9.     <!-- 设置按钮的四个角为弧形 -->  
10.     <corners android:radius="10dp" />  
11.   
12. </shape>  

input_focused.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.     android:shape="rectangle">  
4.     <!-- 描边 -->  
5.     <stroke  
6.         android:width="1dp"  
7.         android:color="#c70900" />  
8.     
9.     <!-- 设置按钮的四个角为弧形 -->  
10.   
11.     <corners android:radius="10dp" />  
12.   
13. </shape>  

3.res下values下styles.xml中添加

[html]  view plain  copy

1. <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">    
2.         <item name="android:button">@drawable/login_checkbox_style</item>         
3. </style>   

login_checkbox_style.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/checkbox_clickred" android:state_checked="true"/>    
4.     <item android:drawable="@drawable/checkbox_click" android:state_checked="false"/>    
5.     <item android:drawable="@drawable/checkbox_click"/>    
6. </selector>  

checkbox_clickred.png

[html]  view plain  copy

1. checkbox_click.png  

[html]  view plain  copy

1. 是两张图片  

4.该登录按钮的自定义选择器

login_button_selector.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:state_pressed="false">  
4.              <shape android:shape="rectangle" >  
5.                 <!-- 填充的颜色在strings里面 -->  
6.                 <solid android:color="@drawable/clr_normal"></solid>  
7.                   
8.                 <!-- 设置按钮的四个角为弧形 -->  
9.                <corners android:radius="10dp" />      
10.             </shape>  
11.     </item>  
12.       
13.     <item android:state_pressed="true">  
14.         <shape android:shape="rectangle">  
15.             <!-- 填充的颜色在strings里面 -->  
16.             <solid android:color="@drawable/clr_pressed" />  
17.               
18.             <!-- 设置按钮的四个角为弧形 -->  
19.             <corners android:radius="10dp" />  
20.          </shape>  
21.     </item>   
22.       
23. </selector>  

res下values下strings.xml里

[html]  view plain  copy

1. <resources>     
2.     <drawable name="clr_normal">#c70900</drawable>  
3.     <drawable name="clr_pressed">#FF3333</drawable><span style="font-family: Arial, Helvetica, sans-serif;">  </span>  

[html]  view plain  copy

1. <pre name="code" class="html">    <string name="forget_pwd">忘记密码?</string>  
2.     <string name="login_button">登录</string>  
3.     <string name="login_remember_psw">记住密码</string>  
4.     <string name="register_now">还没有账号，立即注册</string>