大家在使用bilibili等应用时，常见到类似的一些操作，在输入密码时，猫头鹰将手臂旋转遮住自己的眼镜，这个功能比较有意思，这里代码主要就是实现这个功能
app效果展示：
app外部展示
进入后界面
输入密码时遮住眼睛
xml文件配置：
使用相对布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--背景图片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"
android:scaleType="fitXY"/>
<!--添加虚化层-->
<io.alterac.blurkit.BlurLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:blk_fps="0"
app:blk_blurRadius="25" />
<!--猫头鹰-->
<RelativeLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_alignTop="@+id/iv_bg"
android:layout_marginTop="-100dp">
<!--头像-->
<ImageView
android:id="@+id/iv_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/owl_headre"
android:layout_centerHorizontal="true"/>
<!--手掌-->
<ImageView
android:id="@+id/iv_left_hand"
android:layout_width="50dp"
android:layout_height="60dp"
android:src="@drawable/icon_hand"
android:layout_alignParentLeft="true"
android:layout_alignBottom="@id/iv_head"
android:layout_marginBottom="-20dp"
android:layout_marginLeft="10dp"/>
<!--手掌-->
<ImageView
android:id="@+id/iv_right_hand"
android:layout_width="50dp"
android:layout_height="60dp"
android:src="@drawable/icon_hand"
android:layout_alignParentRight="true"
android:layout_alignBottom="@id/iv_head"
android:layout_marginBottom="-20dp"
android:layout_marginRight="10dp"/>
<!--翅膀-->
<ImageView
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:layout_marginLeft="20dp"/>
<!--翅膀-->
<ImageView
android:id="@+id/iv_right_arm"
android:layout_width="65dp"
android:layout_height="40dp"
android:src="@drawable/arm_right"
android:layout_below="@+id/iv_head"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"/>
</RelativeLayout>
<!--输入背景框-->
<io.alterac.blurkit.BlurLayout
android:id="@+id/iv_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" />
<!--添加标题和输入框视图-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:orientation="vertical"
android:padding="20dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp">
<!--标题-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="炫酷登录"
android:textColor="#999999"
android:textSize="20dp"
android:textAlignment="center"/>
<!--添加一个输入框-->
<EditText
android:id="@+id/et_user"
style="@style/EditTextStyle"
android:inputType="text"
android:hint="请输入用户名" />
<EditText
android:id="@+id/et_password"
style="@style/EditTextStyle"
android:inputType="textPassword"
android:hint="请输入密码" />
<!--添加按钮-->
<Button
android:id="@+id/bt_login"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="登录"
android:textColor="#ffffff"
android:layout_marginTop="30dp"
android:enabled="false"
android:background="@drawable/login_btn_selector"/>
</LinearLayout>
</RelativeLayout>
一层一层将控件加上去
另外，我们希望对背景图片进行虚化，具体的虚化操作如下：
找到这里
implementation 'io.alterac.blurkit:blurkit:1.1.0'
加入对应代码
然后右上方弹出：
点击同步即可
然后可能会报错，报错将对应的安卓版本改为21；
更改版本为21
相应资源文件管理：
anim
hand_down_anim内部代码：
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:toYDelta="100"
android:fromYDelta="0"
android:fillAfter="true"
android:duration="500">
</translate>
hand_up_anim内部代码：
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:toYDelta="0"
android:fromYDelta="100"
android:fillAfter="true"
android:duration="500">
</translate>
drawable
editview_shape内部代码：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5sp"/>
<stroke android:width="1dp"
android:color="#44000000"/>
</shape>
input_bg_shape内部代码：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#44666666"/>
</shape>
login_btn_selector内部代码：
<?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>
设置共有属性（这样我们同样的属性就不需要反复的去设置，只要导用相应的样式即可）
共有属性
<?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:drawableLeft">@drawable/iconfont_user</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>
主程序中代码：
package swu.twj.a7_covereyelogin;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements TextWatcher {
private EditText user;
private EditText password;
private Button loginBtn;
private ImageView leftArm;
private ImageView rightArm;
private ImageView leftHand;
private ImageView rightHand;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
public void initViews(){
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_right_arm);
leftHand = findViewById(R.id.iv_left_hand);
rightHand = findViewById(R.id.iv_right_hand);
//监听内容改变 -> 控制按钮的点击状态
user.addTextChangedListener(this);
password.addTextChangedListener(this);
//监听EditText的焦点变化 -> 控制是否需要捂住眼睛
password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View view, boolean hasFoucus) {
if (hasFoucus == true){
//旋转手臂
close();
//捂住眼睛
Toast t = Toast.makeText(getApplicationContext(),"捂住眼睛",Toast.LENGTH_SHORT);
t.show();
}else {
//旋转手臂
open();
//打开
Toast.makeText(getApplicationContext(),"放手",Toast.LENGTH_SHORT).show();
}
}
});
}
/**
* 当有控件获得焦点focus 自动弹出键盘
* 1.点击软键盘的enter键 自动收回键盘
* 2.代码控制 InputMethodManager
* requestFocus
* showSoftInput:显示键盘 必须先让这个View成为焦点requestFocus
* hideSoftInputFromWindow:隐藏键盘
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
//隐藏键盘
//1.获取系统输入的管理器
InputMethodManager inputManager = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
//2.隐藏键盘
inputManager.hideSoftInputFromWindow(user.getWindowToken(),0);
//3.取消焦点
View focusView = getCurrentFocus();
if (focusView != null){
focusView.clearFocus(); //取消焦点
}
//getCurrentFocus().clearFocus();
//focusView.requestFocus(); //请求焦点
}
return true;
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
//判断两个输入框是否有内容
if (user.getText().toString().length() > 0 &&
password.getText().toString().length() > 0){
//按钮可以点击
loginBtn.setEnabled(true);
}else {
//按钮不能点击
loginBtn.setEnabled(false);
}
}
public void close(){
//旋转翅膀（左）
RotateAnimation lAnim = new RotateAnimation(0,167,leftArm.getWidth(),0f);
lAnim.setDuration(500);
lAnim.setFillAfter(true);
leftArm.startAnimation(lAnim);
//旋转翅膀（右）
RotateAnimation rAnim = new RotateAnimation(0,-167,0,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);
}
public void open(){
//旋转翅膀（左）
RotateAnimation lAnim = new RotateAnimation(167,0,leftArm.getWidth(),0f);
lAnim.setDuration(500);
lAnim.setFillAfter(true);
leftArm.startAnimation(lAnim);
//旋转翅膀（右）
RotateAnimation rAnim = new RotateAnimation(-167,0,0,0f);
rAnim.setDuration(500);
rAnim.setFillAfter(true);
rightArm.startAnimation(rAnim);
}
}
