image.png
image.png
1.导入素材
image.png
2.配值xml文件
1.Activity_main.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="200dp"
android:layout_centerHorizontal="true"
android:layout_alignTop="@id/bg"
android:layout_marginTop="-50dp"
>
<!--头像-->
<ImageView
android:id="@+id/iv_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/owl_head"
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/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"/>
<!--添加标题和输入框视图-->
<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="20dp"
android:enabled="false"
android:background="@drawable/login_bin_selector"/>
</LinearLayout>
</RelativeLayout>
2.edit_view_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp"/>
<stroke android:width="1dp"
android:color="#44000000"/>
</shape>
3.input_bg_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"/>
</shape>
4.login_bin_selector.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"/>
</shape>
5.translate.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:toYDelta="100"
android:fromYDelta="0"
android:fillAfter="true"
android:duration="400"
>
</translate>
6.translate1.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:toYDelta="0"
android:fromYDelta="100"
android:fillAfter="true"
android:duration="500"
>
</translate>
7.addview.style.xml
<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/edit_view_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>
8.styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
3.MainActivity
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);
initView();
}
public void initView(){
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 hasfocus) {
if (hasfocus==true){
//捂住眼睛
close();
}else{
//打开
open();
}
}
});
}
/**
*当有控件获得焦点focus 自动弹出键盘
* 1.点击软键盘的enter 自动收回键盘
* 2.代码控制 InputMethodMannager
*
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN) {
//隐藏键盘
//1.获取系统输入的管理器
InputMethodManager inputMethodManager=(InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
//2.隐藏键盘
inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(),0);
//3.取消焦点
View focusView=getCurrentFocus();
if(focusView!=null){
focusView.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 lrotateAnimation=new RotateAnimation(0,170,leftarm.getWidth(),0f);
lrotateAnimation.setDuration(400);
lrotateAnimation.setFillAfter(true);
//右边
RotateAnimation rrotateAnimation=new RotateAnimation(0,-170,0f,0f);
rrotateAnimation.setDuration(400);
rrotateAnimation.setFillAfter(true);
leftarm.startAnimation(lrotateAnimation);
rightarm.startAnimation(rrotateAnimation);
TranslateAnimation down = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translate);
leftHand.startAnimation(down);
rightHand.startAnimation(down);
}
public void open(){
//旋转翅膀左边
RotateAnimation lrotateAnimation=new RotateAnimation(170,0,leftarm.getWidth(),0f);
lrotateAnimation.setDuration(400);
lrotateAnimation.setFillAfter(true);
//右边
RotateAnimation rrotateAnimation=new RotateAnimation(-170,0,0f,0f);
rrotateAnimation.setDuration(400);
rrotateAnimation.setFillAfter(true);
leftarm.startAnimation(lrotateAnimation);
rightarm.startAnimation(rrotateAnimation);
TranslateAnimation up = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translate1);
leftHand.startAnimation(up);
rightHand.startAnimation(up);
}
}
4.心得体会
很有趣的一个demo，学多了不少关于补间动画的知识，很有意义
