[转]高仿Android QQ2012登陆界面和注册界面

Admin

最近工作比较轻松，项目不忙，所以闲着的时间去研究了自己比较感兴趣的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>

复制代码