简介
今天为大家介绍的是登录界面的搭建，使用动画使得登录界面更有趣味，话不多说，先上效果图：
实现
1. 将需要的图片文件导入drawable中（此项目素材在本文末尾提供）
2.在下图路径下添加 implementation 'io.alterac.blurkit:blurkit:1.1.0'，导入虚化效果第三方库
3.创建布局需要的资源文件
1.在drawable下创建文件
editview_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"></corners>
<stroke android:width="1dp"
android:color="#4F4F4F"></stroke>
</shape>
2.drawable路径下创建input_bg_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp"></corners>
<solid android:color="#88999999"></solid>
</shape>
3.drawable路径下创建login_selector.xml
<?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="10dp"></corners>
<solid android:color="#666666"></solid>
</shape>
</item>
<!--正常状态 蓝色背景 圆角矩形-->
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"></corners>
<solid android:color="#00BFFF"></solid>
</shape>
</item>
</selector>
4.在value路径下创建editview_style.xml
<?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:paddingLeft">10dp</item>
<item name="android:drawablePadding">10dp</item>
<item name="android:textSize">20dp</item>
<item name="android:maxLines">1</item>
</style>
</resources>
4.接着在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="20"
></io.alterac.blurkit.BlurLayout>
<!--猫头鹰-->
<RelativeLayout
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_alignTop="@+id/bg"
android:layout_marginTop="-100dp">
<!--头像-->
<ImageView
android:id="@+id/head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/owl_head"
android:layout_centerHorizontal="true"
/>
<!--手掌-->
<ImageView
android:id="@+id/hand_left"
android:layout_width="50dp"
android:layout_height="60dp"
android:src="@drawable/icon_hand"
android:layout_alignParentLeft="true"
android:layout_alignBottom="@+id/head"
android:layout_marginBottom="-25dp"
android:layout_marginLeft="10dp"/>
<ImageView
android:id="@+id/hand_right"
android:layout_width="50dp"
android:layout_height="60dp"
android:src="@drawable/icon_hand"
android:layout_alignParentRight="true"
android:layout_alignBottom="@+id/head"
android:layout_marginBottom="-25dp"
android:layout_marginRight="10dp"/>
<!--翅膀-->
<ImageView
android:id="@+id/arm_left"
android:layout_width="65dp"
android:layout_height="40dp"
android:src="@drawable/arm_left"
android:layout_below="@+id/head"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<ImageView
android:id="@+id/arm_right"
android:layout_width="65dp"
android:layout_height="40dp"
android:src="@drawable/arm_right"
android:layout_below="@+id/head"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"/>
</RelativeLayout>
<View
android:id="@+id/bg"
android:layout_width="match_parent"
android:layout_height="280dp"
android:background="@drawable/input_bg_shape"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<io.alterac.blurkit.BlurLayout
android:layout_width="match_parent"
android:layout_height="280dp"
app:blk_fps="0"
app:blk_blurRadius="20"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
></io.alterac.blurkit.BlurLayout>
<!--添加标题和输入框-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:orientation="vertical"
android:padding="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
>
<!--标题-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="我是一只猫头鹰"
android:textSize="20dp"
android:textAlignment="center"
/>
<!--添加输入框-->
<EditText
android:id="@+id/et_user"
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="10dp"
android:drawablePadding="10dp"
android:textSize="18dp"
android:hint="请输入账号"
android:maxLines="1"
android:inputType="text"/>
<EditText
android:id="@+id/et_password"
style="@style/EditTextStyle"
android:inputType="textPassword"
android:drawableLeft="@drawable/iconfont_password"
android:hint="请输入密码"/>
<!--登录按钮-->
<Button
android:id="@+id/login_btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@drawable/login_selector"
android:text="登录"
android:enabled="false"
android:textSize="25dp"
android:textAlignment="center"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>
5.创建两个动画文件
res路径下创建anim目录（详情参考(https://www.jianshu.com/p/dcb6ae758410)）
translate_down.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0"
android:toYDelta="100"
android:fillAfter = "true"
android:duration = "500">
</translate>
translate_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="100"
android:toYDelta="0"
android:fillAfter = "true"
android:duration = "500">
</translate>
6.创建第二个界面MainActivity2，并配置xml
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=".Main2Activity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/yans"
android:scaleType="fitXY"/>
</RelativeLayout>
7.最后，在MainActivity中使用
public class MainActivity extends AppCompatActivity implements TextWatcher {
private EditText user;
private EditText password;
private Button login;
private ImageView rightArm;
private ImageView leftArm;
private ImageView leftHand;
private ImageView rightHand;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
/**
* 键盘
* 当有控件获得焦点focus 自动弹出键盘
* 1.点击软键盘的 return键 自动收回键盘
* 2.代码控制 InputMethodManager
* showSoftInput 显示键盘 必须先让这个view成为焦点
*
* */
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN){
//隐藏键盘
// 1.获取系统输入输出的管理器
InputMethodManager inputMethodManager = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
// 2.隐藏键盘
System.out.println(inputMethodManager.toString());
inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(), 0);
// 3.取消焦点
View focusView = getCurrentFocus();
if (focusView != null){
focusView.clearFocus();
}
// getCurrentFocus().requestFocus(); //请求焦点
}
return true;
}
private void initViews(){
user = findViewById(R.id.et_user);
password = findViewById(R.id.et_password);
login = findViewById(R.id.login_btn);
leftArm = findViewById(R.id.arm_left);
rightArm = findViewById(R.id.arm_right);
leftHand = findViewById(R.id.hand_left);
rightHand = findViewById(R.id.hand_right);
//监听内容改变
user.addTextChangedListener(this);
password.addTextChangedListener(this);
//监听EditText的焦点变化
password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View view, boolean b) {
if (b == true){
// 捂住眼睛
close();
}else {
//放开
open();
}
}
});
//登录按钮被点击
login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 登录需要完成操作的内容
Intent intent = new Intent(MainActivity.this,Main2Activity.class);
startActivity(intent);
}
});
}
@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)){
// 按钮可以点击了
login.setEnabled(true);
}else {
login.setEnabled(false);
}
}
private void close(){
//旋转动画
RotateAnimation rAnim = new RotateAnimation(0, 170, Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0f);
rAnim.setDuration(500);
rAnim.setFillAfter(true);
leftArm.startAnimation(rAnim);
RotateAnimation rAnim1 = new RotateAnimation(0, -170, Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
rAnim1.setDuration(500);
rAnim1.setFillAfter(true);
rightArm.startAnimation(rAnim1);
TranslateAnimation tAnim = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translate_down );
leftHand.startAnimation(tAnim);
rightHand.startAnimation(tAnim);
}
private void open(){
//旋转动画
RotateAnimation rAnim = new RotateAnimation(170, 0, Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0f);
rAnim.setDuration(500);
rAnim.setFillAfter(true);
leftArm.startAnimation(rAnim);
RotateAnimation rAnim1 = new RotateAnimation(-170, 0, Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
rAnim1.setDuration(500);
rAnim1.setFillAfter(true);
rightArm.startAnimation(rAnim1);
TranslateAnimation tAnim = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translate_up );
leftHand.startAnimation(tAnim);
rightHand.startAnimation(tAnim);
}
}
本文素材：
arm_left.png
arm_right.png
bg.jpeg
bg_blure.png
icon_hand.png
iconfont_password.png
iconfont_user.png
owl_head.png
yans.jpg
