Lance老师UI系列教程第一课->QQ设置界面的实现（android）

转载地址：http://blog.csdn.net/lancees/article/details/7742344

做android应用开发，UI的东东既是基础又很重要，也是实现良好用户体验的第一步。而大多数我们的应用要实现的界面效果基本上在现有的第三方应用上都能找的到原型，此刻我们会特别希望在需要实现某种UI效果的时候能有个模板进行参照，这样便可以轻而易举地输出我们自个儿的精美布局。有鉴于此，蓝老师决定推出UI系列教程，结合当下流行应用的界面视觉效果为大家讲解其实现原理，以造福于广大新手以及刚入行的童鞋，老鸟们请飘过。。。

                                                                                                                                                                                                        -----       前言    

 

UI系列教程第一课：QQ设置界面布局的实现

类似QQ设置界面这种布局排版相信很多应用都会用到，大家关心的无非就是就是布局的圆角问题，这其中包括全圆角，上半圆角，下半圆角以及无圆角

下面贴上布局文件为童鞋们讲解

[java] view plaincopy

1. <LinearLayout   
2.            android:orientation="vertical"   
3.            android:layout_width="fill_parent"   
4.            android:layout_height="wrap_content">       
5.              
6.            <!-- 界面显示 -->  
7.            <LinearLayout   
8.                style="@style/leba_bg_layout">              
9.                <LinearLayout   
10.                    style="@style/leba_bg_single_layout">                  
11.                    <TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="界面显示" android:layout_weight="1.0" />  
12.                    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>  
13.                </LinearLayout>  
14.            </LinearLayout>  
15.               
16.                  
17.            <!--  反馈建议    关于 -->     
18.            <LinearLayout   
19.                style="@style/leba_bg_layout">                      
20.                <!--  反馈建议    -->     
21.                <LinearLayout   
22.                    style="@style/leba_bg_top_layout">  
23.                    <TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="反馈建议" android:layout_weight="1.0" />  
24.                    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>  
25.                </LinearLayout>  
26.                  
27.                <View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  
28.                  
29.                <!-- 关于 -->     
30.                <LinearLayout   
31.                    style="@style/leba_bg_bottom_layout">  
32.                    <TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="关于" android:layout_weight="1.0" />  
33.                    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>  
34.                </LinearLayout>                               
35.            </LinearLayout>  
36.              
37.                  
38.                  
39.            <!--  声音提示    震动提示         消息提示 -->     
40.            <LinearLayout   
41.                style="@style/leba_bg_layout">                    
42.                <!--  声音提示    -->     
43.                <LinearLayout   
44.                    style="@style/leba_bg_top_layout">  
45.                    <TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="声音" android:layout_weight="1.0" />  
46.                    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>  
47.                </LinearLayout>  
48.                  
49.                <View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  
50.                  
51.                 <!--  震动提示   -->     
52.                 <LinearLayout   
53.                      style="@style/leba_bg_mid_layout">  
54.                    <TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="震动提示" android:layout_weight="1.0" />  
55.                    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>  
56.                 </LinearLayout>  
57.                  
58.                 <View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  
59.                        
60.                <!-- 消息提示  -->     
61.                <LinearLayout   
62.                    style="@style/leba_bg_bottom_layout">  
63.                    <TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="消息提示" android:layout_weight="1.0" />  
64.                    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>  
65.                </LinearLayout>                               
66.            </LinearLayout>  
67.                 
68.              
69.                  
70.             <LinearLayout   
71.                style="@style/leba_bg_layout"  
72.                android:padding="10.0dip">   
73.                <TextView   
74.                    android:textSize="16.0dip"   
75.                    android:textColor="#ffaa0000"   
76.                    android:layout_width="fill_parent"   
77.                    android:layout_height="wrap_content"   
78.                    android:layout_marginLeft="12.0dip"   
79.                    android:text="@string/blog_addr"  
80.                    android:layout_weight="1.0"   
81.                    android:ellipsize="marquee"           
82.                 android:focusable="true"   
83.                 android:focusableInTouchMode="true"  
84.                 android:scrollHorizontally="true"  
85.                 />            
86.             </LinearLayout>     
87.                  
88.        </LinearLayout>       

 

再上style风格属性资源文件

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.       
4.    <style name="leba_bg_layout">  
5.         <item name="android:orientation">vertical</item>  
6.         <item name="android:background">@drawable/leba_shape_bg</item>  
7.         <item name="android:layout_width">fill_parent</item>  
8.         <item name="android:layout_height">wrap_content</item>  
9.         <item name="android:layout_marginLeft">8.0dip</item>  
10.         <item name="android:layout_marginTop">10.0dip</item>  
11.         <item name="android:layout_marginRight">8.0dip</item>     
12.    </style>  
13.       
14.    <style name="leba_bg_base_layout">  
15.         <item name="android:orientation">horizontal</item>  
16.         <item name="android:layout_width">fill_parent</item>  
17.         <item name="android:layout_height">wrap_content</item>  
18.         <item name="android:gravity">center_vertical</item>  
19.         <item name="android:paddingTop">16.0dip</item>  
20.         <item name="android:paddingBottom">16.0dip</item>  
21.         <item name="android:focusable">true</item>  
22.         <item name="android:clickable">true</item>     
23.    </style>  
24.          
25.    <style name="leba_bg_top_layout" parent="@style/leba_bg_base_layout">        
26.         <item name="android:background">@drawable/leba_bg_top_selector</item>  
27.    </style>  
28.                                      
29.      
30.    <style name="leba_bg_mid_layout" parent="@style/leba_bg_base_layout">  
31.         <item name="android:background">@drawable/leba_bg_mid_selector</item>   
32.    </style>  
33.                       
34.      
35.    <style name="leba_bg_bottom_layout" parent="@style/leba_bg_base_layout">  
36.         <item name="android:background">@drawable/leba_bg_bottom_selector</item>   
37.    </style>  
38.      
39.     <style name="leba_bg_single_layout" parent="@style/leba_bg_base_layout">  
40.         <item name="android:background">@drawable/leba_bg_single_selector</item>    
41.     </style>     
42.          
43. </resources>  

 

 

 

 

大家可以看到，布局中用到了大量的STYLE，而style无非就是些android attribute的集合

以上四大块布局都是以@style/leba_bg_layout风格作为底布局

其中<item name="android:background">@drawable/leba_shape_bg</item>

leba_shape_bg是全圆角

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape android:shape="rectangle"  
3.   xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <solid android:color="@color/white" />  
5.     <stroke android:width="1.0px"  android:color="@color/shape_line" />  
6.     <corners android:radius="8.0dip" />  
7.     <padding android:left="1.0px" android:top="1.0px" android:right="1.0px" android:bottom="1.0px" />  
8. </shape>  

 

再以第二块布局（反馈建议和关于）为例

“反馈建议”横布局是上半圆角使用@style/leba_bg_top_layout风格作为底布局

 其中<itemname="android:background">@drawable/leba_bg_top_selector</item>

leba_bg_top_selector

[java] view plaincopy

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

 

leba_bg_top_selected和leba_bg_top_unselected都是上半圆角

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape android:shape="rectangle"  
3.   xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <solid android:color="@color/button_selected" />  
5.     <corners android:topLeftRadius="8.0dip" android:topRightRadius="8.0dip" android:bottomLeftRadius="1.0dip" android:bottomRightRadius="1.0dip" />  
6. </shape>  

 

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape android:shape="rectangle"  
3.   xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <solid android:color="@color/white" />  
5.     <corners android:topLeftRadius="8.0dip" android:topRightRadius="8.0dip" android:bottomLeftRadius="1.0dip" android:bottomRightRadius="1.0dip" />  
6. </shape>  

 

“关于”横布局使用@style/leba_bg_bottom_layout风格作为底布局，自然就是下半圆角了（具体配置就不贴了，其它布局同理）

而中间的小横线则更为简单

[java] view plaincopy

1. <View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  

leba_shape_line

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape android:shape="rectangle"  
3.   xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <solid android:color="@color/shape_line" />  
5. </shape>  

 

 

本文讲解之布局较为简单，每行只是ImageView和TextView构成

若需添加更多UI控件只要在合适位置插入即可

根据需要可能要使用ReleativeLayout作为行布局来规划实现UI效果

其它就没啥好说的了，对于style和shape以及selector还不甚了解的童鞋先补习一下相关知识吧

 

下面附上工程链接：

http://download.csdn.net/detail/geniuseoe2012/4425939