Android第三天——实现一个仿QQ的登录界面

仿QQ登录界面

上一次我们通过简单计算器，使用了Android的线性布局LinearLayout和网格布GridLayout构建了计算器的键盘界面。今天通过实现一个QQ的登录界面来学习如下内容：

1. 相对布局RelativeLayout；
2. drawable中layer-list标签的简单使用 ；
3. drawable中selector标签的使用；
4. EditText的属性标签使用；
5. PopupWindow的简单使用。

1.最终效果

2.设计分析

1. 控件分析：
   使用手机版QQ（我的版是7.7.5）退出当前账号登陆，在登陆界面看到包含内容如下：

看到的控件	业务功能	猜想可能的控件
企鹅图标	无	ImageView
“QQ”文本	无	TextView
账号输入框	编辑输入账号	EditText
密码输入框	编辑输入密码	EditText
圆形头像图标	显示当前用户账号对应头像	ImageView
三角下拉箭头	显示用户登陆记录	ImageView
登陆按钮	执行登陆	Button
“忘记密码"文本	跳转到找回密码页面	TextView
“新用户注册"文本	跳转到用户注册页面	TextView
“登陆即…"文本	无	TextView
“服务条款"文本	跳转到对应界面	TextView

2. 布局分析：
   直观分析如下图所示：
   
   打开开发者模式中的GPU过度绘制功能，可以看到如下效果图，所有矩形选中的区域均为有控件的地方，这说明我们直观分析的大部分都是正确的。而且不得不说QQ的布局优化很好，基本没什么红区，给赞一个！
   如有同学不懂这个过度绘制请转百度。
   
   好了，经过这么一分析，这个登陆界面就比较容易理解了，首先，假设根布局为相对布局，我们把中间布局就定义为水平居中，垂直居中但是向上偏移的一段距离；以中间布局为参考对象，上边布局和中间布局在竖直方向上就是近似的左对齐关系，在水平方向的也是向上偏移一段距离；而下面布局更简单，它也是水平居中，然后以屏幕底部为参考点，向上偏移一段距离。

那么，我们的相对布局RelativeLayout的特点就出来了：

在它内部的控件，可以参考其他控件的边缘，或者屏幕边缘的位置来规定自己的位置。

还有就是在中间布局的第一行中，根据界面分析到的应该是：一个EditText和两个ImageView横向排列，但是实际QQ的表现却不是这样的，如下图所示：

在这个EditText里面如果连续不断的输入文本，最终文本会覆盖的清除图标和下拉图标之上，可见QQ在这里的布局使用的依然是一个相对布局，但我不缺定这在其他人眼里开是否是一个比较怪异的现象。所以这里我使用线性布局不让他们重合（来自强迫症晚期患者内心的挣扎）。

3.资源获取

因为此页面中存在较多的图像资源，显然我们开发者是自己搞不出来的，因此我们尽量使用一些相似的资源。一般像这些图标资源都可以百度到相似的，但是目前好多网站对这些资源下载有限制，推荐使用阿里巴巴矢量图标库。

1. 背景图片：
   百度了很久才找出来的
   
2. 企鹅图标
   在阿里矢量图库中搜索QQ，或者企鹅如下：
   
   找到一大堆，我们选一个差不多像的，比如一排三列的那位，然后点击要下载的图标，第一次会提示登录，然后就去注册个Github账号，回来登录就能下载了，下载的时候还可以选图标颜色尺寸，或者AI格式的，感觉是不是很强大。（手动膜拜下阿里）
   下图是我下载的一个：
   
3. 下拉箭头（同上）
   
4. 清除按钮
   

3.布局搭建

EditText

属性	值	说明
android:hint	String	设置显示在空间上的提示信息
android:hint	String	设置显示在空间上的提示信息
android:hint	String	设置显示在空间上的提示信息

4.业务实现

5.Demo下载

（未完待续）