心得感悟
这个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。