Android：实现一个以假乱真的QQ登录界面

前言

Android初学者，这是我的第一篇博客，用以记录自己的学习成果，以及与同为初学者的朋友们分享。本人现是在校大学生，音乐天才，游戏奇才，代码鬼才，B哥理智粉。希望与大家共同进步！

效果与亮点

最终效果

我们的目标是要达到原版QQ的登录界面，下面我将原版界面和最终效果做对比。

可以看到，除了图片色泽和和部分比例不同，我们各个组件的分布与原版一样，而且在不同屏幕尺寸的手机上运行，各个组件的相对位置都不变。
输入账号和密码，点击登录（密码是账号+“qq”），如果密码正确，弹出"登录成功"，反之，弹出"密码错误"。

亮点和难点

（1）ConstraintLayout布局方法。相比于LinerLayout，ConstraintLayout更容易实现复杂的布局；相比于RelativeLayout，ConstraintLayout避免了大量嵌套所导致的运行缓慢。而且实现起来特别直观，关于ConstraintLayout的介绍，大家可以参照郭大婶的这篇博客：
ConstraintLayout
（2）Toast的应用。在设置登录按钮的监听器时，加入Toast就行。Toast不仅可以弹出文本，还可以弹出图片，我这里就只简单的弹出文字。
（3）登录按钮按下后变色。默认的Button按下没啥特效，我这里按下后整个按钮会变淡一些。
（4）一个文本框显示不同颜色的字体。图片中最下方有一句话：登录即代表阅读并同意服务条款。其中服务条款是蓝色的，如果你不知道这里怎么处理，就只能用两个文本框来输出。

以上4点我在下面对应部分详细说明。

设计与分析

将目标界面做控件分析

控件号码	控件类型
1	Button
2	EditText
3	EditText
4	TextView
5	TextView
6	TextView
7	ImageView
8	TextView
9	ImageView

布局实现（xml）

ConstraintLayout（约束布局）。与相对布局相似，约束布局也是找核心控件，在这里，我们把登录按钮作为核心，因为它在最中间。

实现Button布局

1.在layout里面new一个Layout Resource File，输入一个name，Root element可以不用管，我们待会再设置里面转换成ConstrainLayout。

2.创建好后，是这样一个界面

然后在LinearLayout点击右键，最下面有个Convert…，点他OK就行了
3.拖动一个Button到布局中，可以看到这个Button有四个小圈，拖动其中一个到边界上，它会移动到边界上，当你四个圈都固定好之后，这个Button的位置也就被确定下来。
4.如果我们想改变它的位置，就通过图中的两个小滑轮实现（只有当控件位置确定之后，才有这两个滑轮）

5.点击这个方块中的蓝色箭头，可以改变Button的大小（箭头像是把Button中的内容往中间挤，所以它就是wrap_content；线段是指定的长度；像弹簧一样的Z型类似于match_parent）,这里我们把宽度换成match Contraint，再指定一个高度（我指定的60dp），完成之后会呈现下图样式。

6.我们发现Button的左右两边离边线太近了，显得太拥挤，想要离远一点，可以在方块中的margin中调节。（注意，系统会默认给控件和其他控件8dp的距离，所以即便你设置成0dp，它俩之间还是会有一点空隙，想要它俩紧贴着，需要设置成-8dp）

7.调节背景颜色。直接在Design（视图）中调也可以，但是建议在Text（文本）里面调，因为方便挑选颜色（视图中的改变会引起文本中代码的改变，反过来也是一样）。在Text打出：android:background=""
这个时候在引号里面输入#ffffffff（8个f），这个色号是白色，会在左边出现一个白色小框，点击就可以在里面选择你想要的颜色。

这样就得到了下图的Button

其余控件布局

有了这个核心之后，其他控件都可以链接到Button上，下面一输入账号框举例。
1.拖入一个EditText（不要弄成TextView），EditText的左边与Button的左边链接，EditText的右边与Button的右边链接。

2.EditText的下面与Button的上面链接，上下拖动EditText，找到一个你喜欢的距离即可。

3.EditText在没输入时会显示“请输入账号”，这个在代码中用hint实现

其余的控件都可以像这样实现。完成之后，整体就固定下来，你会发现你拖动Button，其余也会跟着Button动。

Button和TextView的特效

1.点击Button会变色。默认的button点击效果太生硬，想要像真实QQ那样按下会改变颜色，只需要在drawable中new一个drawable的资源文件，paste以下代码

state_pressed="true"表示按下以后，radius用来让Button的四角有一定弧度。
再到layout中的button代码中加一句就可以实现了：

 android:background="@drawable/btn_state"

2.同一个TextView中显示两种不同颜色的字体。在Java代码中固定控件的地方加两行代码

		String str = "登录即代表阅读并同意服务条款";
        txtAccept.setText(Html.fromHtml(str));

图标小tip

相信很多初学者跟我一样，做图标时在网上找一个图片，然后复制到mipmap文件中，其实AS里面已经为我们准备了大量的图标。
drawable->new->Vector Asset

再点击icon图标，选好之后确认，就出现在你的drawable里面的。

功能实现（Java）

Toast的实现。Toast是指在一个事件后弹出提示框，提示框可以是文字，也可以是图片。（提示框的位置总是在一个地方出现，即屏幕中线偏下方）
Toast里面有三个参数：get，所显示的文字，显示的时长（长or短）。比如：
Toast.makeText(getApplicationContext(),“登录成功”,Toast.LENGTH_LONG)
不要忘了下面跟一个toast.show()，不然不能显示。
下面是给btnLogin设置监听器的代码

        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String qq = edTqq.getText().toString();
                String pw = edTpw.getText().toString();
                if(pw.equals(qq+"qq")){
                    Toast toast = Toast.makeText(getApplicationContext(),"登录成功",Toast.LENGTH_LONG);
                    toast.show();
                }else{
                    Toast toast = Toast.makeText(getApplicationContext(),"密码错误",Toast.LENGTH_LONG);
                    toast.show();
                }
            }
        });

不足之处

界面并没有实现输入账号框右边的头像显示。

要在界面中显示一个圆形头像的方法有两种：1.头像本身就是圆的；2.矩形的图片显示成圆的。
我肯定选择第一种，但很快发现网上很多所谓的圆形图片只是用白色背景把周围覆盖住，显示出一个圆形的图，但我们想要的是通过裁剪得到的圆形图，电脑上自带的三个图片编辑都只有方形裁剪，手机上也没有这样的app，所以只能选择第二种。然而第二种对于现在的我还是太难了，我把链接放在参考链接里面，希望以后能够实现。

自我总结

一个应用基本的布局和功能实现起来很简单，但如果要满足人们的使用体验，很多细节不能忽视。
每天都在用手机，手机上的这些应用是如何实现的，布局是怎样设计的，这些好好研究能学到很多东西。
按钮的特效，文本框的圆角程度，背景的渐入等等，一系列做到精致之后，给人的体验将是非常爽的。一点点的差距也是一门大学问。

参考链接

约束布局的使用
将图片显示成圆形
常用色号代码值

源代码

QQ登录界面源码