Android第三天

#Android第三天| 来源: 网络整理| 查看: 265

Android第三天——实现一个仿QQ的登录界面（一）仿QQ登录界面1.最终效果2.设计分析3.资源获取3.布局搭建4.业务实现5.[Demo下载](https://github.com/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:hintString设置显示在空间上的提示信息android:hintString设置显示在空间上的提示信息android:hintString设置显示在空间上的提示信息 4.业务实现 5.Demo下载（未完待续）

【本文地址】

公司简介

联系我们