Android第三天——实现一个仿QQ的登录界面(一)
- 仿QQ登录界面
- 1.最终效果
- 2.设计分析
- 3.资源获取
- 3.布局搭建
- 4.业务实现
- 5.[Demo下载](https://github/bflyff/LoginLikeQQ)
- (未完待续)
仿QQ登录界面
上一次我们通过简单计算器,使用了Android的线性布局LinearLayout和网格布GridLayout构建了计算器的键盘界面。今天通过实现一个QQ的登录界面来学习如下内容:
- 相对布局RelativeLayout;
- drawable中layer-list标签的简单使用 ;
- drawable中selector标签的使用;
- EditText的属性标签使用;
- PopupWindow的简单使用。
1.最终效果
2.设计分析
- 控件分析:
使用手机版QQ(我的版是7.7.5)退出当前账号登陆,在登陆界面看到包含内容如下:
看到的控件 | 业务功能 | 猜想可能的控件 |
---|---|---|
企鹅图标 | 无 | ImageView |
“QQ”文本 | 无 | TextView |
账号输入框 | 编辑输入账号 | EditText |
密码输入框 | 编辑输入密码 | EditText |
圆形头像图标 | 显示当前用户账号对应头像 | ImageView |
三角下拉箭头 | 显示用户登陆记录 | ImageView |
登陆按钮 | 执行登陆 | Button |
“忘记密码"文本 | 跳转到找回密码页面 | TextView |
“新用户注册"文本 | 跳转到用户注册页面 | TextView |
“登陆即…"文本 | 无 | TextView |
“服务条款"文本 | 跳转到对应界面 | TextView |
- 布局分析:
直观分析如下图所示:
打开开发者模式中的GPU过度绘制功能,可以看到如下效果图,所有矩形选中的区域均为有控件的地方,这说明我们直观分析的大部分都是正确的。而且不得不说QQ的布局优化很好,基本没什么红区,给赞一个!
如有同学不懂这个过度绘制请转百度。
好了,经过这么一分析,这个登陆界面就比较容易理解了,首先,假设根布局为相对布局,我们把中间布局就定义为水平居中,垂直居中但是向上偏移的一段距离;以中间布局为参考对象,上边布局和中间布局在竖直方向上就是近似的左对齐关系,在水平方向的也是向上偏移一段距离;而下面布局更简单,它也是水平居中,然后以屏幕底部为参考点,向上偏移一段距离。
那么,我们的相对布局RelativeLayout的特点就出来了:
在它内部的控件,可以参考其他控件的边缘,或者屏幕边缘的位置来规定自己的位置。
还有就是在中间布局的第一行中,根据界面分析到的应该是:一个EditText和两个ImageView横向排列,但是实际QQ的表现却不是这样的,如下图所示:
在这个EditText里面如果连续不断的输入文本,最终文本会覆盖的清除图标和下拉图标之上,可见QQ在这里的布局使用的依然是一个相对布局,但我不缺定这在其他人眼里开是否是一个比较怪异的现象。所以这里我使用线性布局不让他们重合(来自强迫症晚期患者内心的挣扎)。
3.资源获取
因为此页面中存在较多的图像资源,显然我们开发者是自己搞不出来的,因此我们尽量使用一些相似的资源。一般像这些图标资源都可以百度到相似的,但是目前好多网站对这些资源下载有限制,推荐使用阿里巴巴矢量图标库。
- 背景图片:
百度了很久才找出来的
- 企鹅图标
在阿里矢量图库中搜索QQ,或者企鹅如下:
找到一大堆,我们选一个差不多像的,比如一排三列的那位,然后点击要下载的图标,第一次会提示登录,然后就去注册个Github账号,回来登录就能下载了,下载的时候还可以选图标颜色尺寸,或者AI格式的,感觉是不是很强大。(手动膜拜下阿里)
下图是我下载的一个:
- 下拉箭头(同上)
- 清除按钮
3.布局搭建
EditText
属性 | 值 | 说明 |
---|---|---|
android:hint | String | 设置显示在空间上的提示信息 |
android:hint | String | 设置显示在空间上的提示信息 |
android:hint | String | 设置显示在空间上的提示信息 |
4.业务实现
5.Demo下载
(未完待续)
更多推荐
Android第三天——实现一个仿QQ的登录界面
发布评论