高仿Android QQ2012登陆界面和注册界面 hierarchyviewer

最近工作比较轻松，项目不忙，所以闲着的时间去研究了自己比较感兴趣的UI界面，确实漂亮的UI能给用户带来良好的体验，在android应用中一直尤为重要，这次模仿的是QQ2012Android版的的最新登陆界面以及部分注册的功能，简洁漂亮的UI给人耳目一新的感觉，但看似简单的布局要真的自己做起来还是会遇到很多的困难，尤其是木有什么美工的基础，先上图片看下做完后的效果，有个别的地方还是与原版有出入的：

         

          

     

首先下载官方最新的QQ2012APK文件，然后将后缀名改为.rar打开后可以获得全部锁需要的图片资源，嘿嘿，好多.9的图片都不需要自己再做了~！，之后既要研究该如何去模仿这款应用的布局了

--------------------------------------------------华丽的分割线------------------------------------------------------------------

究竟怎样控制好各个控件之间的排布，如何确定各种布局的嵌套呢？既然是优秀的UI界面，我们来完全模仿，那就可以直接照搬QQ的设计排版，这里我用到了android中自带的

层级观察器hierarchyviewer工具来分析UI的布局，hierarchyviewer是非常之实用的工具，即可以用来优化自己的布局，也可以用来参考别人优秀的布局，在\android-sdk-windows\tools目录下双击即可以使用:

点击Load View Hierarchy 选项进入如下画面，可以分析其中的布局了：

分成四个区域，左边较大的工作区即是当前UI的整体布局，一层级的方式排列展示出来，右侧的分三块区域，上边是左侧的缩略图，中间是当前选中布局的属性介绍，可以点击查看具体的数值，很 方便，下边是点击当前布局的实际效果，通过这些就可以了解当前UI是怎样的布局，具体用到了哪些布局方式和控件，一目了然。

--------------------------------------------------华丽的分割线------------------------------------------------------------------

点击Inspect Scrrenshot，进入如下画面：

左侧区域是当前布局的树状结构，这样看起来布局更容易理解，右侧是当前页面的图像，可以通过鼠标移动十字交叉处选中当前元素，而具体的信息就会在中间显示出来。包括所选地方的颜色值，坐标信息，也可以通过放大来进一步进行细微的操作。通过这个工具，怎么样？是不是可以很轻松的把自己喜欢的UI模仿学习下来呢~！

--------------------------------------------------华丽的分割线------------------------------------------------------------------

以下是部分布局的代码，具体的java代码可以自行下载研究，我也写了比较幼稚的注释嘿嘿：

登陆界面的布局：

源码 打印 ？

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@drawable/login_bg"  
6.     android:orientation="vertical" >  
7.   
8.     <ImageView  
9.         android:id="@+id/image_logo"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_marginLeft="42dp"  
13.         android:layout_marginRight="42dp"  
14.         android:layout_marginTop="40dp"  
15.         android:src="@drawable/login_pic2" />  
16.   
17.     <LinearLayout  
18.         android:id="@+id/linearLayout01"  
19.         android:layout_width="fill_parent"  
20.         android:layout_height="wrap_content"  
21.         android:layout_below="@id/image_logo"  
22.         android:layout_marginLeft="42dp"  
23.         android:layout_marginRight="42dp"  
24.         android:background="@drawable/login_input"  
25.         android:orientation="vertical" >  
26.   
27.         <LinearLayout  
28.             android:layout_width="fill_parent"  
29.             android:layout_height="wrap_content"  
30.             android:orientation="horizontal" >  
31.   
32.             <EditText  
33.                 android:id="@+id/et_qqNum"  
34.                 android:layout_width="220dp"  
35.                 android:layout_height="40dp"  
36.                 android:background="#00ffffff"  
37.                 android:hint="请输入QQ号码"  
38.                 android:inputType="number"  
39.                 android:paddingLeft="10dp" />  
40.   
41.             <Button  
42.                 android:id="@+id/btn_more_pop"  
43.                 android:layout_width="10dp"  
44.                 android:layout_height="8dp"  
45.                 android:layout_gravity="center"  
46.                 android:layout_marginRight="10dp"  
47.                 android:layout_weight="1"  
48.                 android:background="@drawable/login_input_arrow" />  
49.         </LinearLayout>  
50.   
51.         <View  
52.             android:layout_width="fill_parent"  
53.             android:layout_height="1dp"  
54.             android:layout_marginLeft="1dp"  
55.             android:layout_marginRight="1dp"  
56.             android:background="@drawable/divider_horizontal_line" />  
57.   
58.         <EditText  
59.             android:id="@+id/et_qqPwd"  
60.             android:layout_width="fill_parent"  
61.             android:layout_height="40dp"  
62.             android:background="#00ffffff"  
63.             android:hint="请输入密码"  
64.             android:inputType="textPassword"  
65.             android:paddingLeft="10dp" />  
66.     </LinearLayout>  
67.   
68.     <Button  
69.         android:id="@+id/btn_login"  
70.         android:layout_width="fill_parent"  
71.         android:layout_height="wrap_content"  
72.         android:layout_below="@id/linearLayout01"  
73.         android:layout_marginLeft="42dp"  
74.         android:layout_marginRight="42dp"  
75.         android:layout_marginTop="10dp"  
76.         android:background="@drawable/login_button_select"  
77.         android:text="登陆" />  
78.   
79.     <RelativeLayout  
80.         android:layout_width="fill_parent"  
81.         android:layout_height="wrap_content"  
82.         android:layout_below="@id/btn_login"  
83.         android:layout_marginLeft="42dp"  
84.         android:layout_marginRight="42dp" >  
85.   
86.         <CheckBox  
87.             android:layout_width="wrap_content"  
88.             android:layout_height="wrap_content"  
89.             android:background="@null"  
90.             android:button="@null"  
91.             android:checked="true"  
92.             android:drawableLeft="@drawable/checkbox_bg"  
93.             android:paddingTop="2dp"  
94.             android:text="记住密码"  
95.             android:textSize="12sp" />  
96.   
97.         <Button  
98.             android:id="@+id/btn_login_regist"  
99.             android:layout_width="wrap_content"  
100.             android:layout_height="wrap_content"  
101.             android:layout_alignParentRight="true"  
102.             android:background="@drawable/login_reg_button"  
103.             android:gravity="left|center"  
104.             android:paddingLeft="8dp"  
105.             android:paddingRight="25dp"  
106.             android:text="注册新账号"  
107.             android:textColor="#ffffffff"  
108.             android:textSize="12sp" />  
109.     </RelativeLayout>  
110.   
111.           
112.           
113.           
114.           
115.     <LinearLayout  
116.         android:layout_width="fill_parent"  
117.         android:layout_height="wrap_content"  
118.         android:layout_alignParentBottom="true"  
119.         android:background="@drawable/login_moremenu_back"  
120.         android:orientation="vertical" >  
121.   
122.         <RelativeLayout  
123.             android:clickable="true"  
124.             android:id="@+id/view_more"  
125.             android:layout_width="fill_parent"  
126.             android:layout_height="40dp" >  
127.   
128.             <TextView  
129.                 android:background="@null"   
130.                 android:id="@+id/tv_login_more"  
131.                 android:layout_width="wrap_content"  
132.                 android:layout_height="wrap_content"  
133.                 android:layout_centerInParent="true"  
134.                 android:gravity="center"  
135.                 android:text="更多登陆选项"  
136.                 android:textColor="#ffffffff" />  
137.   
138.             <ImageView  
139.                 android:id="@+id/img_more_up"  
140.                 android:layout_width="wrap_content"  
141.                 android:layout_height="wrap_content"  
142.                 android:layout_centerVertical="true"  
143.                 android:layout_toLeftOf="@id/tv_login_more"  
144.                 android:clickable="false"  
145.                 android:src="@drawable/login_more_up" />  
146.         </RelativeLayout>  
147.   
148.         <LinearLayout  
149.             android:id="@+id/menu_more"  
150.             android:layout_width="fill_parent"  
151.             android:layout_height="wrap_content"  
152.             android:orientation="vertical"  
153.             android:visibility="gone" >  
154.   
155.             <View  
156.                 android:layout_width="fill_parent"  
157.                 android:layout_height="1dp"  
158.                 android:background="#ffffffff" />  
159.   
160.             <View  
161.                 android:layout_width="fill_parent"  
162.                 android:layout_height="1dp"  
163.                 android:background="#ffffffff" />  
164.   
165.             <LinearLayout  
166.                 android:layout_width="fill_parent"  
167.                 android:layout_height="wrap_content"  
168.                 android:layout_marginLeft="35dp"  
169.                 android:layout_marginRight="35dp"  
170.                 android:layout_marginTop="17dp"  
171.                 android:orientation="horizontal" >  
172.   
173.                 <CheckBox  
174.                     android:layout_width="1dp"  
175.                     android:layout_height="wrap_content"  
176.                     android:layout_weight="2"  
177.                     android:background="@null"  
178.                     android:button="@null"  
179.                     android:drawableLeft="@drawable/checkbox_bg"  
180.                     android:drawablePadding="4dp"  
181.                     android:text="隐身登陆"  
182.                     android:textSize="12sp" />  
183.   
184.                 <CheckBox  
185.                     android:layout_width="1dp"  
186.                     android:layout_height="wrap_content"  
187.                     android:layout_weight="1"  
188.                     android:background="@null"  
189.                     android:button="@null"  
190.                     android:drawableLeft="@drawable/checkbox_bg"  
191.                     android:drawablePadding="4dp"  
192.                     android:text="静音登陆"  
193.                     android:textSize="12sp" />  
194.             </LinearLayout>  
195.   
196.             <LinearLayout  
197.                 android:layout_width="fill_parent"  
198.                 android:layout_height="wrap_content"  
199.                 android:layout_marginBottom="17dp"  
200.                 android:layout_marginLeft="35dp"  
201.                 android:layout_marginRight="35dp"  
202.                 android:layout_marginTop="17dp"  
203.                 android:orientation="horizontal" >  
204.   
205.                 <CheckBox  
206.                     android:layout_width="1dp"  
207.                     android:layout_height="wrap_content"  
208.                     android:layout_weight="2"  
209.                     android:background="@null"  
210.                     android:button="@null"  
211.                     android:drawableLeft="@drawable/checkbox_bg"  
212.                     android:drawablePadding="4dp"  
213.                     android:text="允许手机/电脑同时在线"  
214.                     android:textSize="12sp" />  
215.   
216.                 <CheckBox  
217.                     android:layout_width="1dp"  
218.                     android:layout_height="wrap_content"  
219.                     android:layout_weight="1"  
220.                     android:background="@null"  
221.                     android:button="@null"  
222.                     android:drawableLeft="@drawable/checkbox_bg"  
223.                     android:drawablePadding="4dp"  
224.                     android:text="接收群消息"  
225.                     android:textSize="12sp" />  
226.             </LinearLayout>  
227.         </LinearLayout>  
228.     </LinearLayout>  
229.   
230. </RelativeLayout>  

--------------------------------------------------华丽的分割线------------------------------------------------------------------ 

注册界面的布局：

源码 打印 ？

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#e8f0f0"  
6.     android:orientation="vertical" >  
7.   
8.     <include layout="@layout/title_bar" />  
9.   
10.     <FrameLayout  
11.         android:layout_width="fill_parent"  
12.         android:layout_height="wrap_content"  
13.         android:layout_weight="1.0" >  
14.   
15.         <LinearLayout  
16.             android:id="@+id/linearLayout01"  
17.             android:layout_width="fill_parent"  
18.             android:layout_height="fill_parent"  
19.             android:orientation="vertical" >  
20.   
21.             <LinearLayout  
22.                 android:layout_width="fill_parent"  
23.                 android:layout_height="wrap_content"  
24.                 android:layout_margin="15dp"  
25.                 android:orientation="horizontal" >  
26.   
27.                 <LinearLayout  
28.                     android:layout_width="wrap_content"  
29.                     android:layout_height="wrap_content"  
30.                     android:layout_weight="1.0" >  
31.   
32.                     <TextView  
33.                         android:layout_width="wrap_content"  
34.                         android:layout_height="wrap_content"  
35.                         android:text="手机验证"  
36.                         android:textColor="#000000"  
37.                         android:textSize="15sp" />  
38.   
39.                     <ImageView  
40.                         android:layout_width="wrap_content"  
41.                         android:layout_height="wrap_content"  
42.                         android:layout_gravity="center"  
43.                         android:paddingLeft="20dp"  
44.                         android:src="@drawable/group_fold_arrow" />  
45.                 </LinearLayout>  
46.   
47.                 <LinearLayout  
48.                     android:layout_width="wrap_content"  
49.                     android:layout_height="wrap_content"  
50.                     android:layout_weight="1.0" >  
51.   
52.                     <TextView  
53.                         android:layout_width="wrap_content"  
54.                         android:layout_height="wrap_content"  
55.                         android:text="密码设置"  
56.                         android:textSize="15sp" />  
57.   
58.                     <ImageView  
59.                         android:layout_width="wrap_content"  
60.                         android:layout_height="wrap_content"  
61.                         android:layout_gravity="center"  
62.                         android:paddingLeft="20dp"  
63.                         android:src="@drawable/group_fold_arrow" />  
64.                 </LinearLayout>  
65.   
66.                 <LinearLayout  
67.                     android:layout_width="wrap_content"  
68.                     android:layout_height="wrap_content"  
69.                     android:layout_weight="1.0" >  
70.   
71.                     <TextView  
72.                         android:layout_width="wrap_content"  
73.                         android:layout_height="wrap_content"  
74.                         android:text="注册完成"  
75.                         android:textSize="15sp" />  
76.   
77.                     <ImageView  
78.                         android:layout_width="wrap_content"  
79.                         android:layout_height="wrap_content"  
80.                         android:layout_gravity="center"  
81.                         android:paddingLeft="20dp"  
82.                         android:src="@drawable/group_fold_arrow" />  
83.                 </LinearLayout>  
84.             </LinearLayout>  
85.   
86.             <View  
87.                 android:layout_width="fill_parent"  
88.                 android:layout_height="1dp"  
89.                 android:background="@drawable/prefresh_list_cutline" />  
90.   
91.             <LinearLayout  
92.                 android:layout_width="fill_parent"  
93.                 android:layout_height="wrap_content"  
94.                 android:layout_marginBottom="14dp"  
95.                 android:layout_marginLeft="10dp"  
96.                 android:layout_marginRight="10dp"  
97.                 android:layout_marginTop="20dp"  
98.                 android:background="@drawable/input"  
99.                 android:orientation="vertical" >  
100.   
101.                 <LinearLayout  
102.                     android:layout_width="fill_parent"  
103.                     android:layout_height="wrap_content"  
104.                     android:layout_margin="10dp"  
105.                     android:orientation="horizontal" >  
106.   
107.                     <TextView  
108.                         android:layout_width="wrap_content"  
109.                         android:layout_height="wrap_content"  
110.                         android:text="所在地"  
111.                         android:textColor="#000000"  
112.                         android:textSize="19sp" />  
113.   
114.                     <TextView  
115.                         android:id="@+id/tv_region_show"  
116.                         android:layout_width="wrap_content"  
117.                         android:layout_height="wrap_content"  
118.                         android:layout_marginLeft="20dp"  
119.                         android:text="+86中国大陆 "  
120.                         android:textColor="#505050"  
121.                         android:textSize="19sp" />  
122.   
123.                     <TextView  
124.                         android:id="@+id/tv_region_modify"  
125.                         android:layout_width="wrap_content"  
126.                         android:layout_height="wrap_content"  
127.                         android:layout_weight="1.0"  
128.                         android:clickable="true"  
129.                         android:gravity="center_horizontal"  
130.                         android:text="修改"  
131.                         android:textColor="#50a8e0"  
132.                         android:textSize="19sp" />  
133.                 </LinearLayout>  
134.   
135.                 <View  
136.                     android:layout_width="fill_parent"  
137.                     android:layout_height="1dp"  
138.                     android:background="@drawable/prefresh_list_cutline" />  
139.   
140.                 <LinearLayout  
141.                     android:layout_width="fill_parent"  
142.                     android:layout_height="wrap_content"  
143.                     android:layout_margin="10dp" >  
144.   
145.                     <TextView  
146.                         android:layout_width="wrap_content"  
147.                         android:layout_height="wrap_content"  
148.                         android:text="手机号"  
149.                         android:textColor="#000000"  
150.                         android:textSize="19sp" />  
151.   
152.                     <EditText  
153.                         android:id="@+id/et_mobileNo"  
154.                         android:layout_width="wrap_content"  
155.                         android:layout_height="wrap_content"  
156.                         android:layout_marginLeft="20dp"  
157.                         android:background="@null"  
158.                         android:hint="请输入手机号码"  
159.                         android:textSize="17sp" />  
160.                 </LinearLayout>  
161.             </LinearLayout>  
162.   
163.             <LinearLayout  
164.                 android:layout_width="fill_parent"  
165.                 android:layout_height="wrap_content"  
166.                 android:layout_marginLeft="20dp"  
167.                 android:orientation="horizontal" >  
168.   
169.                 <CheckBox  
170.                     android:id="@+id/chk_agree"  
171.                     android:layout_width="wrap_content"  
172.                     android:layout_height="wrap_content"  
173.                     android:background="@null"  
174.                     android:button="@null"  
175.                     android:checked="true"  
176.                     android:drawableLeft="@drawable/checkbox_bg"  
177.                     android:drawablePadding="4dp"  
178.                     android:padding="2dp"  
179.                     android:text="已阅读并同意"  
180.                     android:textColor="#888888" />  
181.   
182.                 <TextView  
183.                     android:id="@+id/tv_QQ_Server"  
184.                     android:layout_width="wrap_content"  
185.                     android:layout_height="wrap_content"  
186.                     android:clickable="true"  
187.                     android:text="《腾讯QQ服务条款》"  
188.                     android:textColor="#5858f8" />  
189.             </LinearLayout>  
190.   
191.             <Button  
192.                 android:id="@+id/btn_send_code"  
193.                 android:layout_width="fill_parent"  
194.                 android:layout_height="wrap_content"  
195.                 android:layout_marginLeft="20dp"  
196.                 android:layout_marginRight="20dp"  
197.                 android:layout_marginTop="24dp"  
198.                 android:background="@drawable/register_button_select"  
199.                 android:paddingBottom="14dp"  
200.                 android:paddingTop="14dp"  
201.                 android:text="向我发送验证码"  
202.                 android:textSize="19sp" />  
203.         </LinearLayout>  
204.     </FrameLayout>  
205.   
206. </LinearLayout>  

--------------------------------------------------华丽的分割线------------------------------------------------------------------

注册验证的布局：

源码 打印 ？

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#e8f0f0"  
6.     android:orientation="vertical" >  
7.   
8.     <include layout="@layout/title_bar" />  
9.   
10.     <LinearLayout  
11.         android:id="@+id/linearLayout01"  
12.         android:layout_width="fill_parent"  
13.         android:layout_height="fill_parent"  
14.         android:orientation="vertical" >  
15.   
16.         <LinearLayout  
17.             android:layout_width="fill_parent"  
18.             android:layout_height="wrap_content"  
19.             android:layout_margin="15dp"  
20.             android:orientation="horizontal" >  
21.   
22.             <LinearLayout  
23.                 android:layout_width="wrap_content"  
24.                 android:layout_height="wrap_content"  
25.                 android:layout_weight="1.0" >  
26.   
27.                 <TextView  
28.                     android:layout_width="wrap_content"  
29.                     android:layout_height="wrap_content"  
30.                     android:text="手机验证"  
31.                     android:textColor="#000000"  
32.                     android:textSize="15sp" />  
33.   
34.                 <ImageView  
35.                     android:layout_width="wrap_content"  
36.                     android:layout_height="wrap_content"  
37.                     android:layout_gravity="center"  
38.                     android:paddingLeft="20dp"  
39.                     android:src="@drawable/group_fold_arrow" />  
40.             </LinearLayout>  
41.   
42.             <LinearLayout  
43.                 android:layout_width="wrap_content"  
44.                 android:layout_height="wrap_content"  
45.                 android:layout_weight="1.0" >  
46.   
47.                 <TextView  
48.                     android:layout_width="wrap_content"  
49.                     android:layout_height="wrap_content"  
50.                     android:text="密码设置"  
51.                     android:textSize="15sp" />  
52.   
53.                 <ImageView  
54.                     android:layout_width="wrap_content"  
55.                     android:layout_height="wrap_content"  
56.                     android:layout_gravity="center"  
57.                     android:paddingLeft="20dp"  
58.                     android:src="@drawable/group_fold_arrow" />  
59.             </LinearLayout>  
60.   
61.             <LinearLayout  
62.                 android:layout_width="wrap_content"  
63.                 android:layout_height="wrap_content"  
64.                 android:layout_weight="1.0" >  
65.   
66.                 <TextView  
67.                     android:layout_width="wrap_content"  
68.                     android:layout_height="wrap_content"  
69.                     android:text="注册完成"  
70.                     android:textSize="15sp" />  
71.   
72.                 <ImageView  
73.                     android:layout_width="wrap_content"  
74.                     android:layout_height="wrap_content"  
75.                     android:layout_gravity="center"  
76.                     android:paddingLeft="20dp"  
77.                     android:src="@drawable/group_fold_arrow" />  
78.             </LinearLayout>  
79.         </LinearLayout>  
80.   
81.         <View  
82.             android:layout_width="fill_parent"  
83.             android:layout_height="1dp"  
84.             android:background="@drawable/prefresh_list_cutline" />  
85.   
86.         <LinearLayout  
87.             android:layout_width="fill_parent"  
88.             android:layout_height="50dp"  
89.             android:layout_marginBottom="20dp"  
90.             android:layout_marginLeft="10dp"  
91.             android:layout_marginRight="10dp"  
92.             android:layout_marginTop="20dp"  
93.             android:background="@drawable/input" >  
94.   
95.             <TextView  
96.                 android:layout_width="wrap_content"  
97.                 android:layout_height="wrap_content"  
98.                 android:layout_gravity="center"  
99.                 android:layout_marginLeft="16dp"  
100.                 android:text="验证码"  
101.                 android:textColor="#000000"  
102.                 android:textSize="19sp" />  
103.   
104.             <EditText  
105.                 android:layout_width="wrap_content"  
106.                 android:layout_height="wrap_content"  
107.                 android:layout_gravity="center"  
108.                 android:layout_marginLeft="22dp"  
109.                 android:background="@null"  
110.                 android:hint="请输入收到的验证码" />  
111.         </LinearLayout>  
112.   
113.         <FrameLayout  
114.             android:layout_width="fill_parent"  
115.             android:layout_height="wrap_content" >  
116.   
117.             <Button  
118.                 android:id="@+id/btn_reg_reget"  
119.                 android:layout_width="fill_parent"  
120.                 android:layout_height="wrap_content"  
121.                 android:layout_gravity="center_horizontal"  
122.                 android:layout_marginLeft="20dp"  
123.                 android:layout_marginRight="20dp"  
124.                 android:background="@drawable/register_button_select"  
125.                 android:text="重新获取"  
126.                 android:visibility="gone" />  
127.   
128.             <TextView  
129.                 android:id="@+id/tv_reg_reget"  
130.                 android:layout_width="fill_parent"  
131.                 android:layout_height="wrap_content"  
132.                 android:gravity="center"  
133.                 android:text="x秒后   可重新获得验证码"  
134.                 android:textColor="#000000"  
135.                 android:textSize="15sp" />  
136.         </FrameLayout>  
137.   
138.         <Button  
139.             android:layout_width="fill_parent"  
140.             android:layout_height="wrap_content"  
141.             android:layout_marginLeft="22dp"  
142.             android:layout_marginRight="22dp"  
143.             android:layout_marginTop="22dp"  
144.             android:background="@drawable/register_button_select"  
145.             android:text="提交验证码" />  
146.     </LinearLayout>  
147.   
148. </LinearLayout>  

以上只是布局的代码，还有部分功能逻辑的实现在源代码里面，当然只是简单操作，并没有真正实现QQ的注册以及短信的验证等信息，但自己写写逻辑也还不错，总之收获还是蛮多的，不仅仅是布局，也有代码的编写，附上源码，希望和大家一起分享交流

原文链接： http://blog.csdn.net/eyu8874521/article/details/7865343