使用層級觀察器hierarchyviewer綜合各種布局實現Android QQ2012登陸界面和注冊界面


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

點擊下載QQ登陸的Demo源代碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM