android自动登录简书,Android的学习与实践6（炫酷登陆界面的实现）

1.收获

今天是过了两周后再上课，感觉是有点跟不上的，但是没有办法，只有慢慢的把感觉找回来，今天虽然只是做了一个demo但是这个demo的知识点还是比较宽的，所以还是有很大的价值的，自己虽然在课上听的不是很明白，但是自己下来后看视频也还是能够理解的。总的来说今天还是没有能够跟上可得节奏，因为有的知识在前面学过，但是还是遗忘了。所以还是要进行复习的，进行熟悉，只有这样才能够把知识点活用，才会有更加灵活的思维方式。

2.技术

(1)有共同旋转或者是平移的动画目的是相反的就可以设置两种状态

(2)在配置xml文件时的代码优化

(3)背景的虚化

(4)系统键盘的隐藏

3.技术的实际应用和实践

(1)有共同旋转或者是平移的动画目的是相反的就可以设置两种状态

在我们给控件设置动画的过程中，我们有一种需求，就是一个动画需要一个外部命令他才能执行，有时同时也伴随着另一个动画的执行。

例如：

TranslateAnimation up= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_translate);

lefthand.startAnimation(up);

righthand.startAnimation(up);

TranslateAnimation down= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_translate);

lefthand.startAnimation(down);

righthand.startAnimation(down);

在这两个代码块中有两种不同的动画，一个是执行down,一个是up,那么我们需要去实现这两个动画

首先找到项目：project

image.png

然后在项目中新建一个文件

image.png

在新建的文件下面在新建一个

image.png

然后在新建的文件中实现相关的动画

image.png

image.png

(2)在配置xml文件时的代码优化

在我们进行代码写入的过程中我们会发现我们的代码会显得十分的臃肿，一个代码块里面的代码就会有很多，而另一个代码块里面的代码又会很少，这时候我们会发现代码的外表并不是很美观，并且代码的结构是一样的，那么我们会考虑进行代码的整合。

在这个demo中就有这样的现象。

android:id="@+id/et_password"

android:layout_width="match_parent"

android:layout_height="50dp"

android:background="@drawable/editview_shape"

android:layout_marginTop="20dp"

android:drawableLeft="@drawable/iconfont_user"

android:paddingLeft="7dp"

android:drawablePadding="7dp"

android:textSize="20sp"

android:textColor="@color/colorPrimary"

android:maxLines="1"

android:hint="请输入密码"

android:inputType="textPassword"

/>

android:id="@+id/et_password"

android:layout_width="match_parent"

android:layout_height="50dp"

android:background="@drawable/editview_shape"

android:layout_marginTop="20dp"

android:drawableLeft="@drawable/iconfont_user"

android:paddingLeft="7dp"

android:drawablePadding="7dp"

android:textSize="20sp"

android:textColor="@color/colorPrimary"

android:maxLines="1"

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

android:inputType="textPassword"

/>

在这个代码块中有很多的代码都是一样的，那么我们就可以来优化代码

首先，我们需要找到value

image.png

然后在value中新建一个xml文件

image.png

然后将这些相同的代码放入这个xml文件中

match_parent

50dp

@drawable/editview_shape

20dp

@drawable/iconfont_user

7dp

7dp

20sp

1

@color/colorPrimary

而在xml配置的文件中就看起来就非常好看，简洁了

android:id="@+id/et_password"

style="@style/EditTextStyle"

android:hint="请输入密码"

android:inputType="textPassword"

/>

(3)背景的虚化

在这个项目我们有两处用到了虚化，一个是在在整个背景下用的虚化，另一个地方就是在编辑框背景的时候用到了虚化。虚化的作用是要实际来体现的，不同的地方虚化的作用不同。在虚化的时候我们需要引入一个属性：io.alterac.blurkit.BlurLayout。

背景的虚化：

android:layout_width="match_parent"

android:layout_height="match_parent"

app:blk_fps="0"

app:blk_blurRadius="10"

/>

在这里面：blk_fps：表示的是虚化的程度

app:blk_blurRadius：表示的是虚化的半径

在这里虚化的作用是将背景模糊化，具有一种美感

编辑框背景的虚化：

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"

/>

在这里虚化的作用是可以挡住一些不需要看见的控件

(4)系统键盘的隐藏

在这个项目中我们有时候会需要键盘隐藏，而我们用的系统的键盘，那么我们需要通过系统来隐藏键盘

当有控件获得焦点focus 自动弹出键盘

1.点击软键盘的enter键 自动收回键盘

2.代码控制 InputMethodManager

showSoftInput:显示键盘 必须先让这个VIEW成为焦点requestFocuse

我么通过属性： hideSoftInputFromWindow来隐藏键盘

//1.获取系统输入的管理器

InputMethodManager inputMethodManager= (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);

//2.隐藏键盘

inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(),0);

//3.取消焦点

View v=getCurrentFocus();

if(v!=null){

v.clearFocus();//取消焦点

}

(5)demo的实现

效果：

录制_2019_09_27_11_26_27_260.gif

首先我们需要在xml中把控件配置好

android:layout_width="match_parent"

android:layout_height="match_parent"

android:src="@drawable/bg"

android:scaleType="fitXY"/>

android:layout_width="match_parent"

android:layout_height="match_parent"

app:blk_fps="0"

app:blk_blurRadius="10"

/>

android:layout_width="280dp"

android:layout_height="200dp"

android:layout_centerHorizontal="true"

android:layout_alignTop="@id/bg"

android:layout_marginTop="-100dp"

>

android:id="@+id/iv_head"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/owl_head"

android:layout_centerHorizontal="true"/>

android:id="@+id/iv_left_hand"

android:layout_width="80dp"

android:layout_height="80dp"

android:src="@drawable/icon_hand"

android:layout_alignParentLeft="true"

android:layout_alignBottom="@+id/iv_head"

android:layout_marginBottom="-35dp"

/>

android:id="@+id/iv_right_hand"

android:layout_width="80dp"

android:layout_height="80dp"

android:src="@drawable/icon_hand"

android:layout_alignParentRight="true"

android:layout_alignBottom="@+id/iv_head"

android:layout_marginBottom="-35dp"

/>

android:id="@+id/iv_left_arm"

android:layout_width="65dp"

android:layout_height="40dp"

android:src="@drawable/arm_left"

android:layout_below="@+id/iv_head"

android:layout_alignParentLeft="true"/>

android:id="@+id/iv_rigth_arm"

android:layout_width="61dp"

android:layout_height="40dp"

android:src="@drawable/arm_right"

android:layout_below="@+id/iv_head"

android:layout_alignParentRight="true"/>

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"

/>

android:layout_width="match_parent"

android:layout_height="400dp"

android:layout_centerInParent="true"

android:orientation="vertical"

android:padding="20dp"

android:layout_marginRight="20dp"

android:layout_marginLeft="20dp">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="炫酷登陆"

android:textColor="#00ff00"

android:textSize="20dp"

android:textAlignment="center"

android:layout_marginTop="60dp"

/>

android:id="@+id/et_user"

style="@style/EditTextStyle"

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

android:inputType="text"

/>

android:id="@+id/et_password"

style="@style/EditTextStyle"

android:hint="请输入密码"

android:inputType="textPassword"

/>

android:id="@+id/bt_login"

android:layout_width="match_parent"

android:layout_height="50dp"

android:text="登陆"

android:textColor="#ffffff"

android:layout_marginTop="20dp"

android:enabled="false"

android:background="@drawable/login_btn_state"

/>

然后我们在MainActivity中对一些控件进行操作

找到控件

user=findViewById(R.id.et_user);

password=findViewById(R.id.et_password);

loginBtn=findViewById(R.id.bt_login);

leftarm=findViewById(R.id.iv_left_arm);

rightarm=findViewById(R.id.iv_rigth_arm);

lefthand=findViewById(R.id.iv_left_hand);

righthand=findViewById(R.id.iv_right_hand);

给控件添加监听事件

//监听内容改变 ->控制按钮的控制状态

user.addTextChangedListener(this);

password.addTextChangedListener(this);

判断是否需要执行捂眼睛的动画

//监听EidtText焦点的变化 ->控制是否需要捂眼睛

password.setOnFocusChangeListener(new View.OnFocusChangeListener() {

@Override

public void onFocusChange(View view, boolean b) {

if(b==true){

//捂眼睛

close();

}else{

//打开

open();

}

}

});

捂眼睛动画的实现

这里捂眼睛的动画有两个，一个是打开眼睛，一个是关闭眼睛

public void close(){

//旋转翅膀

//左翅膀

RotateAnimation lAnim=new RotateAnimation(0,175,leftarm.getWidth(),0f);

lAnim.setDuration(500);

lAnim.setFillAfter(true);

leftarm.startAnimation(lAnim);

//右翅膀

RotateAnimation rAnim=new RotateAnimation(0,-175,0f,0f);

rAnim.setDuration(500);

rAnim.setFillAfter(true);

rightarm.startAnimation(rAnim);

TranslateAnimation down= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_translate);

lefthand.startAnimation(down);

righthand.startAnimation(down);

}

public void open(){

//旋转翅膀

//左翅膀

RotateAnimation lAnim=new RotateAnimation(175,0,leftarm.getWidth(),0f);

lAnim.setDuration(500);

lAnim.setFillAfter(true);

leftarm.startAnimation(lAnim);

//右翅膀

RotateAnimation rAnim=new RotateAnimation(-175,0,0f,0f);

rAnim.setDuration(500);

rAnim.setFillAfter(true);

rightarm.startAnimation(rAnim);

TranslateAnimation up= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_translate);

lefthand.startAnimation(up);

righthand.startAnimation(up);

}

}