android之模仿QQ登陆的布局实现

小鱼儿 2022-08-25 09:19 183阅读 0赞

可以参考wangjinyu501的博客,地址:[http://blog.csdn.net/wangjinyu501/article/details/8166389][http_blog.csdn.net_wangjinyu501_article_details_8166389]

效果如下:

![SouthEast][]

![SouthEast 1][]

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **package** com.example.imitateqq;  
2.    
3.  **import** android.app.Activity;  
4.  **import** android.content.Intent;  
5.  **import** android.os.Bundle;  
6.  **import** android.os.Handler;  
7.    
8.  **public** **class** SplashActivity **extends** Activity \{  
9.    
10.      **private** Intent intent;  
11.      @Override  
12.      **protected** **void** onCreate(Bundle savedInstanceState) \{  
13.           **super**.onCreate(savedInstanceState);  
14.           setContentView(R.layout.splash);  
15.           startMainAvtivity();  
16.      \}  
17.   
18.      **private** **void** startMainAvtivity() \{            
19.           **new** Handler().postDelayed(**new** Runnable() \{  
20.                **public** **void** run() \{  
21.                     intent=**new** Intent(SplashActivity.**this**,QQ.**class**);  
22.                     startActivity(intent);  
23.                     SplashActivity.**this**.finish();//结束本Activity  
24.                \}  
25.           \}, 1000);//设置执行时间  
26.      \}       
27. \}

xml布局文件就是一个全屏的图片，要注意的是设置 *android:scaleType ="matrix"这个属性。不然不会全屏*

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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:orientation= "vertical" **>**  
6.      **<** **ImageView**  
7.          android:layout\_width ="match\_parent"  
8.          android:layout\_height ="match\_parent"  
9.          android:scaleType ="matrix"  
10.         android:src ="@drawable/splash" **/>**  
11. **</** **LinearLayout****>**

过1秒之后转入登陆页面，从图片我们可以看出，腾讯的UI做的还是相当美观漂亮的，既简洁又不失美观。先分析一下这个登录界面，从整体可以看出，根布局的背景色是蓝色的，而那个QQ 2012 Android其实是一个图片背景色和根布局的背景色一样，这样就不会有视觉偏差。下面就是两个文本框EditText了，注意这里和官方给的不一样，因为后面有一个小箭头，当点击这个箭头时，会在第一个文本框的下面显示已经输入的qq号码，在qq号码的后面还有删除qq信息的按钮。这个地方需要注意一下。再往下就是登陆Button以及那连个“记住密码”和“注册新账号”比较简单，注意位置的安排即可。最后就是最下面的“更多登陆选项”，当点击的时候会向上弹出一些内容，其实就是一个隐藏的布局，当点击上面的时候，使下面隐藏的布局显示。当然也可以使用滑动抽屉来做，但是相对来说比较麻烦。下面看一下xml代码，相信大家就会一路了然。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<** **RelativeLayout** xmlns:android ="http://schemas.android.com/apk/res/android"  
2.      xmlns:tools= "http://schemas.android.com/tools"  
3.      android:layout\_width= "match\_parent"  
4.      android:layout\_height= "match\_parent"  
5.      android:background= "@drawable/login\_bg" **>**  
6.    
7.      **<** **ImageView**  
8.          android:id ="@+id/loginbutton"  
9.          android:layout\_width ="wrap\_content"  
10.         android:layout\_height ="wrap\_content"  
11.         android:layout\_centerHorizontal ="true"  
12.         android:layout\_marginTop ="50dp"  
13.         android:src ="@drawable/login\_pic" **/>**  
14.   
15.     **<****LinearLayout**  
16.         android:id ="@+id/input"  
17.         android:layout\_width ="fill\_parent"  
18.         android:layout\_height ="wrap\_content"  
19.         android:layout\_below ="@id/loginbutton"  
20.         android:layout\_marginLeft ="28.0dip"  
21.         android:layout\_marginRight ="28.0dip"  
22.         android:background ="@drawable/login\_input"  
23.         android:orientation ="vertical" **>**  
24.   
25.         **<** **LinearLayout**  
26.             android:layout\_width ="fill\_parent"  
27.             android:layout\_height ="44.0dip"  
28.             android:background ="@drawable/login\_input"  
29.             android:gravity ="center\_vertical"  
30.             android:orientation ="horizontal" **>**  
31.   
32.             **<** **EditText**  
33.                 android:id ="@+id/searchEditText"  
34.                 android:layout\_width ="0dp"  
35.                 android:layout\_height ="fill\_parent"  
36.                 android:layout\_weight ="1"  
37.                 android:background ="@null"  
38.                 android:ems ="10"  
39.                 android:imeOptions ="actionDone"  
40.                 android:singleLine ="true"  
41.                 android:textSize ="16sp" **>**  
42.   
43.                 **<** **requestFocus** **/>**  
44.             **</** **EditText****>**  
45.   
46.             **<** **Button**  
47.                 android:id ="@+id/button\_clear"  
48.                 android:layout\_width ="20dip"  
49.                 android:layout\_height ="20dip"  
50.                 android:layout\_marginRight ="8dip"  
51.                 android:background ="@drawable/login\_input\_arrow"  
52.                 android:visibility ="visible" **/>**  
53.         **</** **LinearLayout****>**  
54.   
55.         **<** **View**  
56.             android:layout\_width ="fill\_parent"  
57.             android:layout\_height ="1.0px"  
58.             android:layout\_marginLeft ="1.0px"  
59.             android:layout\_marginRight ="1.0px"  
60.             android:background ="\#ffc0c3c4" **/>**  
61.   
62.         **<** **EditText**  
63.             android:id ="@+id/password"  
64.             android:layout\_width ="fill\_parent"  
65.             android:layout\_height ="44.0dip"  
66.             android:background ="\#00ffffff"  
67.             android:gravity ="center\_vertical"  
68.             android:inputType ="textPassword"  
69.             android:maxLength ="16"  
70.             android:maxLines ="1"  
71.             android:textColor ="\#ff1d1d1d"  
72.             android:textColorHint ="\#ff666666"  
73.             android:textSize ="16.0sp" **/>**  
74.     **</****LinearLayout** **>**  
75.   
76.     **<****Button**  
77.         android:id ="@+id/buton1"  
78.         android:layout\_width ="270dp"  
79.         android:background ="@drawable/chat\_send\_button\_bg"  
80.         android:paddingTop ="5.0dip"  
81.         android:layout\_height ="50dp"  
82.         android:layout\_marginLeft ="28.0dip"  
83.         android:layout\_marginRight ="28.0dip"  
84.         android:layout\_marginTop ="12.0dip"  
85.         android:layout\_below ="@+id/input"  
86.         android:gravity ="center"  
87.         android:textSize ="20dp"  
88.         android:text = "登录" **/>**  
89.   
90.     **<****RelativeLayout**  
91.         android:id ="@+id/relative"  
92.         android:layout\_width ="fill\_parent"  
93.         android:layout\_height ="wrap\_content"  
94.         android:layout\_alignLeft ="@+id/input"  
95.         android:layout\_alignRight ="@+id/input"  
96.         android:layout\_below ="@id/buton1" **>**  
97.   
98.          **<** **CheckBox**  
99.             android:id ="@+id/auto\_save\_password"  
100.             android:layout\_width ="wrap\_content"  
101.             android:layout\_height ="wrap\_content"  
102.             android:layout\_alignParentLeft ="true"  
103.             android:background ="@null"  
104.             android:button ="@null"  
105.             android:checked ="true"  
106.             android:drawableLeft ="@drawable/checkbox\_bg1"  
107.             android:drawablePadding ="4.0dip"  
108.             android:text = "记住密码"  
109.             android:textColor ="\#ffffffff"  
110.             android:textSize ="12.0sp" **/>**  
111.   
112.         **<** **Button**  
113.             android:id ="@+id/regist"  
114.             android:layout\_width ="wrap\_content"  
115.             android:layout\_height ="wrap\_content"  
116.             android:layout\_alignParentRight ="true"  
117.             android:background ="@drawable/login\_reg\_normal"  
118.             android:clickable ="true"  
119.             android:gravity ="left|center"  
120.             android:paddingLeft ="8.0dip"  
121.             android:paddingRight ="18.0dip"  
122.             android:text = "注册新账号"  
123.             android:textColor ="\#ffffffff"  
124.             android:textSize ="12.0sp" **/>**  
125.     **</****RelativeLayout** **>**  
126.   
127.     **<****LinearLayout**  
128.         android:id ="@+id/more\_bottom"  
129.         android:layout\_width ="fill\_parent"  
130.         android:layout\_height ="wrap\_content"  
131.         android:layout\_alignParentBottom ="true"  
132.         android:background ="@drawable/login\_moremenu\_back"  
133.         android:orientation ="vertical" **>**  
134.          
135.     **<****RelativeLayout**  
136.         android:id ="@+id/input2"  
137.         android:layout\_width ="fill\_parent"  
138.         android:layout\_height ="40dp"  
139.         android:background ="@drawable/login\_moremenu\_back"  
140.         android:orientation ="vertical" **>**  
141.   
142.         **<** **ImageView**  
143.                 android:id ="@+id/more\_image"  
144.                 android:layout\_width ="wrap\_content"  
145.                 android:layout\_height ="wrap\_content"  
146.                 android:layout\_centerVertical ="true"  
147.                 android:layout\_marginRight ="5.0dip"  
148.                 android:layout\_toLeftOf ="@+id/more\_text"  
149.                 android:clickable ="false"  
150.                 android:src ="@drawable/login\_more\_up" **/>**  
151.          
152.         **<** **TextView**  
153.             android:id ="@+id/more\_text"  
154.             android:layout\_width ="wrap\_content"  
155.             android:layout\_height ="wrap\_content"  
156.             android:layout\_centerInParent ="true"  
157.             android:background ="@null"  
158.             android:gravity ="center"  
159.             android:maxLines ="1"  
160.             android:text = "更多登陆选项"  
161.             android:textColor ="\#ffc6e6f9"  
162.             android:textSize ="14.0sp" **/>**  
163.     **</****RelativeLayout** **>**  
164.      **<****LinearLayout**  
165.             android:id ="@+id/morehidebottom"  
166.             android:layout\_width ="fill\_parent"  
167.             android:layout\_height ="wrap\_content"  
168.             android:orientation ="vertical"  
169.             android:visibility ="gone" **>**  
170.   
171.             **<** **View**  
172.                 android:layout\_width ="fill\_parent"  
173.                 android:layout\_height ="1.0px"  
174.                 android:background ="\#ff005484" **/>**  
175.   
176.             **<** **View**  
177.                 android:layout\_width ="fill\_parent"  
178.                 android:layout\_height ="1.0px"  
179.                 android:background ="\#ff0883cb" **/>**  
180.   
181.             **<** **LinearLayout**  
182.                 android:layout\_width ="fill\_parent"  
183.                 android:layout\_height ="wrap\_content"  
184.                 android:layout\_marginLeft ="30.0dip"  
185.                 android:layout\_marginRight ="30.0dip"  
186.                 android:layout\_marginTop ="12.0dip"  
187.                 android:orientation ="horizontal" **>**  
188.   
189.                 **<** **CheckBox**  
190.                     android:id ="@+id/hide\_login"  
191.                     android:layout\_width ="1.0px"  
192.                     android:layout\_height ="wrap\_content"  
193.                     android:layout\_weight ="2.0"  
194.                     android:background ="@null"  
195.                     android:button ="@null"  
196.                     android:checked ="false"  
197.                     android:drawableLeft ="@drawable/checkbox\_bg1"  
198.                     android:drawablePadding ="4.0dip"  
199.                     android:text = "隐身登陆"  
200.                     android:textColor ="\#ffc6e6f9"  
201.                     android:textSize ="12.0sp" **/>**  
202.   
203.                 **<** **CheckBox**  
204.                     android:id ="@+id/silence\_login"  
205.                     android:layout\_width ="1.0px"  
206.                     android:layout\_height ="wrap\_content"  
207.                     android:layout\_weight ="1.0"  
208.                     android:background ="@null"  
209.                     android:button ="@null"  
210.                     android:checked ="false"  
211.                     android:drawableLeft ="@drawable/checkbox\_bg1"  
212.                     android:drawablePadding ="4.0dip"  
213.                     android:text = "静音登录"  
214.                     android:textColor ="\#ffc6e6f9"  
215.                     android:textSize ="12.0sp" **/>**  
216.             **</** **LinearLayout****>**  
217.   
218.             **<** **LinearLayout**  
219.                 android:layout\_width ="fill\_parent"  
220.                 android:layout\_height ="wrap\_content"  
221.                 android:layout\_marginBottom ="18.0dip"  
222.                 android:layout\_marginLeft ="30.0dip"  
223.                 android:layout\_marginRight ="30.0dip"  
224.                 android:layout\_marginTop ="18.0dip"  
225.                 android:orientation ="horizontal" **>**  
226.   
227.                 **<** **CheckBox**  
228.                     android:id ="@+id/accept\_accounts"  
229.                     android:layout\_width ="1.0px"  
230.                     android:layout\_height ="wrap\_content"  
231.                     android:layout\_weight ="2.0"  
232.                     android:background ="@null"  
233.                     android:button ="@null"  
234.                     android:checked ="true"  
235.                     android:drawableLeft ="@drawable/checkbox\_bg1"  
236.                     android:drawablePadding ="4.0dip"  
237.                     android:singleLine ="true"  
238.                     android:text = "允许手机/电脑同时在心线"  
239.                     android:textColor ="\#ffc6e6f9"  
240.                     android:textSize ="12.0sp" **/>**  
241.   
242.                 **<** **CheckBox**  
243.                     android:id ="@+id/accept\_troopmsg"  
244.                     android:layout\_width ="1.0px"  
245.                     android:layout\_height ="wrap\_content"  
246.                     android:layout\_weight ="1.0"  
247.                     android:background ="@null"  
248.                     android:button ="@null"  
249.                     android:checked ="true"  
250.                     android:drawableLeft ="@drawable/checkbox\_bg1"  
251.                     android:drawablePadding ="4.0dip"  
252.                     android:text = "接受群消息"  
253.                     android:textColor ="\#ffc6e6f9"  
254.                     android:textSize ="12.0sp" **/>**  
255.             **</** **LinearLayout****>**  
256.         **</** **LinearLayout****>**  
257.      
258.     **</****LinearLayout** **>**  
259.   
260. **</** **RelativeLayout****>**

各个组件的使用没有问题，关键是如何设置他们的属性，来获得一个比较美观的效果，大家可以参考这个例子，来做一下练习，来强化UI的设计。从这个例子中就可以学到很多东西，比如ViwGroup的使用（如何枪套）， background的设置，例如同时使用两个Edittext,设置 android:background  = *"@null"设置为空的时候就不会产生间隔了。这个要自己多做设计，时间长了就会有感悟了。最后看一下MainActivity的代码，布局简单*

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **package** com.example.imitateqq;  
2.    
3.  **import** android.os.Bundle;  
4.  **import** android.app.Activity;  
5.  **import** android.app.Dialog;  
6.  **import** android.view.Menu;  
7.  **import** android.view.View;  
8.  **import** android.view.View.OnClickListener;  
9.  **import** android.widget.Button;  
10. **import** android.widget.ImageView;  
11.   
12. **public** **class** QQ **extends** Activity **implements** OnClickListener\{  
13.   
14.      **private** Button login\_Button;  
15.      **private** View moreHideBottomView,input2;  
16.      **private** ImageView more\_imageView;  
17.      **private** **boolean** mShowBottom = **false**;  
18.     @Override  
19.     **public** **void** onCreate(Bundle savedInstanceState) \{  
20.         **super**.onCreate(savedInstanceState);  
21.         setContentView(R.layout.activity\_qq);  
22.         initView();  
23.     \}  
24.   
25.     **private** **void** initView() \{  
26.          login\_Button=(Button) findViewById(R.id.buton1);  
27.          login\_Button.setOnClickListener(**this**);  
28.            
29.          moreHideBottomView=findViewById(R.id.morehidebottom);  
30.          more\_imageView=(ImageView) findViewById(R.id.more\_image);  
31.            
32.          input2=findViewById(R.id.input2);  
33.          input2.setOnClickListener( **this**);  
34.      \}  
35.   
36.     **public** **void** showBottom(**boolean** bShow)\{  
37.          **if**(bShow)\{  
38.               moreHideBottomView.setVisibility(View.GONE);  
39.               more\_imageView.setImageResource(R.drawable.login\_more\_up);  
40.               mShowBottom = **true**;  
41.          \}**else**\{  
42.               moreHideBottomView.setVisibility(View.VISIBLE);  
43.               more\_imageView.setImageResource(R.drawable.login\_more);  
44.               mShowBottom = **false**;  
45.          \}  
46.     \}  
47.       
48.     **public** **void** onClick(View v) \{       
49.           **switch**(v.getId())  
50.           \{  
51.           **case** R.id.input2:  
52.                showBottom(!mShowBottom);  
53.                **break**;  
54.           **case** R.id.buton1:  
55.                showRequestDialog();  
56.                **break**;  
57.                **default**:  
58.                     **break**;  
59.           \}  
60.      \}  
61.       
62.      **private** Dialog mDialog = **null**;  
63.      **private** **void** showRequestDialog()  
64.      \{  
65.           **if** (mDialog != **null**)  
66.           \{  
67.                mDialog.dismiss();  
68.                mDialog = **null**;  
69.           \}  
70.           mDialog = DialogFactory.creatRequestDialog(**this**, "正在验证账号...");  
71.           mDialog.show();  
72.      \}  
73.        
74.      @Override  
75.     **public** **boolean** onCreateOptionsMenu(Menu menu) \{  
76.         getMenuInflater().inflate(R.menu.activity\_qq, menu);  
77.         **return** **true**;  
78.     \}  
79. \}

总结：本文可以作为一个UI练习Demo，大家可以自己独立去写，有问题的可以留下邮箱我给你发一下源码作为参考。下一篇将写主页面的实现，欢迎大家关注。

代码下载地址: [http://download.csdn.net/detail/wangjinyu501/5875407][http_download.csdn.net_detail_wangjinyu501_5875407]

[http_blog.csdn.net_wangjinyu501_article_details_8166389]: http://blog.csdn.net/wangjinyu501/article/details/8166389
[SouthEast]: /images/20220824/bfbf2e13a6174c0db58a30075b12ffb4.png
[SouthEast 1]: /images/20220824/231e13c2b0544c29bfba5c8fe0b45b98.png
[view plain]: http://blog.csdn.net/wangjinyu501/article/details/8166389#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/195133
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/195133/fork
[http_download.csdn.net_detail_wangjinyu501_5875407]: http://download.csdn.net/detail/wangjinyu501/5875407