心得感悟

这个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。

【Android开发】动画登录页面