心得感悟
这个Demo对我还是比较有难度的，花了好久去理解。因为动画比较有趣，所以想自己改改样式，也有助于自己的理解。这是进入Android开发学习第六天了，每天的学习都是懂了很多，却还有很多不懂，还是那句加油吧！
内容简概
- 一、需求分析
- 二、去除标题栏和虚化图片
- 三、虚化页面背景和输入框背景
- 四、新建xml文件配置输入框
- 五、新建xml文件管理按钮的不同状态
- 六、实现捂眼睛动画
- 七、图片素材及源代码
- 八、最终效果图
具体内容
一、需求分析
1. 实现效果预览
之前我们也做过登录页面，但这次做的和上次稍有不同，我们先来分析一下关键处，建议先滑到最后看一下动态效果图。
①页面背景和输入框背景都是透明色
②点击输入框，系统自动弹出键盘；点击输入框以外的地方，键盘收回
③只有输入框中的用户名和密码均不为空时，登录按钮可以点击，否则为无效状态
④点击密码输入框，有一个捂眼睛的动画；点击输入框以外的地方，猫头鹰不捂眼睛
二、去除标题栏和虚化图片
1. 去除标题栏
每次做项目都要去除标题栏，因为它不仅占位置还不好看，这里再温习一下如何去除标题栏。
找到styles.xml文件
讲文件中的DarkActionBar改为NoActionBar
2. 虚化图片
在Android studio中可以通过编写代码实现，但是这个方法太繁琐，所以我们可以通过引用第三方库来实现。进入GitHub网站，搜索blurkit即为这里用的库，你也可以搜索Virtual（虚化）使用其他库。再按下图顺序将其插入我们的项目中。
③添加一行代码
implementation 'io.alterac.blurkit:blurkit:1.1.0'
三、虚化页面背景和输入框背景
1. 虚化页面背景
这里我们只需要虚化第一帧即可。虚化程度最大为25
<!--添加虚化层-->
<io.alterac.blurkit.BlurLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:blk_fps="0" # 虚化哪一帧
app:blk_blurRadius="25"/> # 虚化程度
2. 虚化输入框
<!--输入框背景-->
<io.alterac.blurkit.BlurLayout
android:id="@+id/bg"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@drawable/input_bg_shape"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:blk_fps="0"
app:blk_blurRadius="20"/>
四、新建xml文件配置输入框
用户名输入框和密码输入框的边框、背景、字体等都相同，若直接写在activity_main.xml中，不便阅读检查，所以当有大量重复性的代码时，可以考虑用一个文件专门管理它。
按箭头顺序创建一个xml文件，命名如白色方框中的文件
将二者相同的代码写进去
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--app中的标题：字体 字号 颜色 -->
<!--共同拥有的东西-->
<style name="EditTextStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:background">@drawable/editview_shape</item>
<item name="android:layout_marginTop">20dp</item>
<item name="android:paddingLeft">7dp</item>
<item name="android:drawablePadding">7dp</item>
<item name="android:textSize">20sp</item>
<item name="android:maxLines">1</item>
</style>
</resources>
acitivity.main.xml中使用如下：
<!--添加输入框-->
<EditText
android:id="@+id/et_user"
style="@style/EditTextStyle"
android:inputType="text"
android:hint="请输入用户名"/>
五、新建xml文件管理按钮的不同状态
按钮有可点击状态和无法点击状态，在这个文件中设置不同状态下按钮的样式。
与上面相似创建文件，命名如白色方框所示。
有些属性并不存在，需要自己手打出来，注意不要打错。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--无法点击状态 灰色背景 圆角矩形-->
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#666666"/>
</shape>
</item>
<!--正常状态 蓝色背景 圆角矩形-->
<item >
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#39A4F9"/>
</shape>
</item>
</selector>
六、实现捂眼睛动画
观察捂眼睛的翅膀，可以发现它实际上是在做旋转动作，上一篇文章中有讲解基本的动画如旋转，对动画不熟悉的朋友可以去看一看。
下面给出主要代码，添加监听、放置翅膀图片等代码就不在此多说。
public void close(){
//左边
RotateAnimation lAnim = new RotateAnimation(0,
170,
leftArm.getWidth(),
0f);
lAnim.setDuration(500);
lAnim.setFillAfter(true);
leftArm.startAnimation(lAnim);
RotateAnimation rAnim = new RotateAnimation(0,
-170,
0f,
0f);
rAnim.setDuration(500);
rAnim.setFillAfter(true);
rightArm.startAnimation(rAnim);
TranslateAnimation down = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_anim);
leftHand.startAnimation(down);
rightHand.startAnimation(down);
}
在Project中找到anim，在里面创建两个xml文件
七、图片素材及源代码
| 文件如下 |
|---|
| 综合考虑后，决定不提供源码和素材了 |
八、最终效果图
输入密码时录屏软件不可用，会黑屏直到密码输完。其他要点都能在动图中展现。
你也可以尝试自己改改配色高度等，改代码也有助于自己理解这个Demo。
