使用层级观察器HierarchyViewer综合各种布局实现Android QQ2012登陆界面和注册界面

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

               

         

 

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

 

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

究竟怎样控制好各个控件之间的排布，如何确定各种布局的嵌套呢？既然是优秀的UI界面，我们来完全模仿，那就可以直接照搬QQ的设计排版，这里我用到了Android中自带的层级观察器HierarchyViewer工具来分析UI的布局，HierarchyViewer是非常之实用的工具，即可以用来优化自己的布局，也可以用来参考别人优秀的布局，在\android-sdk-windows\tools目录下双击即可以使用（或者点击Window——>OpenPerspective——>Other——>HierarchyViewer）：

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

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

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

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

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

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

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

登陆界面的布局：

  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>

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

注册验证的布局：

<div bg_java"="" style="font-family: verdana, Arial, helvetica, sans-seriff, ����; font-size: 13px; width: 693px; color: rgb(54, 46, 43); line-height: 26px; text-align: left; ">

  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源代码

原文地址：点击打开链接