这个是补录很久以前的一篇文章，大家不要介意哈哈

我们大家都用过QQ对吧，我们看到QQ的登录界面是这个样子的:

今天我们来模拟一下QQ的登录界面，当然会用假数据来实现他的登录功能,模拟的效果如下：

模拟qq登录界面实现

---

这个其实主要就是我们写的UI了，其次是它实现的几个小功能：

1.在输入框有文字时候，后面×（删除）标志显示，没有文字时候，×标志不显示。

2.点击×标志之后，将当前行的文字全部清除。

3.登录后跳转界面，显示账号密码。

4.实现记住密码功能

下面我们来依次实现这几个功能：

---

首先我们来编写我们的登录UI界面：

我们把login_layout.xml设为RelativeLayout布局。

1.首先是左上角的QQ图标，我们照一张企鹅样式的图片就好，然后后面添加一个TextView，写上QQ，字体颜色设为灰白色。

2.然后开始写两个输入框。由于我们每个输入框后面都要有一个×（删除）图片，所以为了方便，我们把 他们写在LinearLayout布局里面。

放置EditText和ImageView的布局

    上面的一些属性大家都能看懂，我们让liner1位于相对image（就是上面的QQ的图片）下面，然后限制了起始边界和末尾边界的大小；将展示方向这设置为水平。

在这个liner1里面 添加editText和ImageView。

输入框和删除按钮

    首先我解释一下我为什么要把输入框的宽度设为0，然后加上权重，而不是把他设置为wrap_content或者match_parent。

    如果我们不设置权重，而是设为wrap_content的话，那么如果我们输入的内容很短，那么后面的删除按钮就会紧随在后面，这样是很不美观的。而且如果说超出长度，还会把删除按钮挡出屏幕外面。

如果设为wrap_content

    但如果我们设置为match_parent，那么他会占满我们的父窗体，这样我们就无法看到我们的删除按钮了。

    剩下的属性都是修饰属性，大家都可以看懂的。

    密码的也是同上写法。

3.然后就是我们的登录button了。

    我们给button进行宽度、字体颜色修改，然后我们要修改一下他的背景，这里我们需要说明一下：

    在点击按钮时实现了这样的效果：当点击状态下他的颜色不一样。

点击按钮效果

    我们在layout中写一个.xml文件，名字起为but_selector.xml。

but_selector.xml

    首先我们写了一个selector标签，在里面写了两个item，下面的item是在默认状态下的样式，上面的item我们指定了一个state_pressed属性，它是指我们在点击状态下的样子。

    solid属性是设置他的内部颜色，corners标签是设置他的圆角边框，数值越高，它就越接近圆。

    我们把他添加到button的background属性里面，好了，现在他的功能UI就已经差不多了，（下面还剩下几行小字，这个相信难不倒大家，就不多说了）。

---

然后我们来修改我们的代码

1.我们首先要获取到这几个控件，username、password、delete1、delete2、login（这是对应id，去上面图片看）

2.我们要分别注册他们需要的监听事件：

username监听事件

我们给username注册了文字改变监听事件。当他输入框里面的文字发生改变时候，会执行。

他一共有三个方法，在之前（before）、改变中（on）、改变后（after）。我们只对后两个方法进行修改。当我们刚开始输入时候，如果我们发现有内容，那么就让删除按钮显示出来，在输入结束之后，如果输入框没有内容，我们就再让删除按钮消失，password也是同样。

2然后就是给delete按钮注册监听事件。

delete按钮监听事件

这个逻辑就很简单了，我们点击以后，就让对应输入框的内容清空就好。

3.然后是我们的登录按钮，这个就是一个Intent跳转就好，不用多说，以后可以讲。

4.最后是我们的数据保存功能。这个我们用SHaredPreferences来实现：

    我们在Activity中定义一个Shrepreferrences，用它来实现数据存储

如果没有data文件夹，他会在shared_prefs目录下创建一个名为data的.xml文件。

登录按钮中跳转同时实现数据存储，

我们在点击登录按钮后，会把我们本次登录的账号密码存储到data中。

LoadData方法

LoadData方法是我们在初始化控件完成之后执行的一个方法，作用就是判断如果上一次存储过数据，就将数据导入到输入框中。

---

现在我们的几个功能就全都实现了。