最近工作比較輕松,項目不忙,所以閑着的時間去研究了自己比較感興趣的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代碼可以自行下載研究,我也寫了比較幼稚的注釋嘿嘿:
登陸界面的布局:
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>
--------------------------------------------------華麗的分割線------------------------------------------------------------------
注冊界面的布局:
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>
--------------------------------------------------華麗的分割線------------------------------------------------------------------
注冊驗證的布局:
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的注冊以及短信的驗證等信息,但自己寫寫邏輯也還不錯,總之收獲還是蠻多的,不僅僅是布局,也有代碼的編寫,附上源碼,希望和大家一起分享交流