心得感悟

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

android:layout_width="match_parent"

android:layout_height="match_parent"

app:blk_fps="0" # 虚化哪一帧

app:blk_blurRadius="25"/> # 虚化程度

2. 虚化输入框

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文件,命名如白色方框中的文件

将二者相同的代码写进去

match_parent

50dp

@drawable/editview_shape

20dp

7dp

7dp

20sp

1

acitivity.main.xml中使用如下:

android:id="@+id/et_user"

style="@style/EditTextStyle"

android:inputType="text"

android:hint="请输入用户名"/>

五、新建xml文件管理按钮的不同状态

按钮有可点击状态和无法点击状态,在这个文件中设置不同状态下按钮的样式。

与上面相似创建文件,命名如白色方框所示。

有些属性并不存在,需要自己手打出来,注意不要打错。

六、实现捂眼睛动画

观察捂眼睛的翅膀,可以发现它实际上是在做旋转动作,上一篇文章中有讲解基本的动画如旋转,对动画不熟悉的朋友可以去看一看。

下面给出主要代码,添加监听、放置翅膀图片等代码就不在此多说。

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。