先看效果图
效果图录制出来有黑屏帧,勉强看哈,效果就是点击输入框后,顶部缩小,按返回按钮时再还原
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:fitsSystemWindows="true"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/topPanel"
android:layout_width="match_parent"
android:layout_height="200dp">
<View
android:id="@+id/back_line"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="#d4ab7f" />
<ImageView
android:id="@+id/back_bg"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@mipmap/login_top_back" />
<ImageView
android:id="@+id/logo_bg"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true"
android:src="@mipmap/default_headimg" />
</RelativeLayout>
<LinearLayout
android:id="@+id/body"
android:layout_width="match_parent"
android:layout_height="210dp"
android:layout_below="@+id/logo"
android:layout_marginTop="30dp"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="13dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/et_mobile"
android:layout_width="0dp"
android:layout_height="55dp"
android:layout_weight="1"
android:background="@null"
android:hint="请输入手机号码"
android:inputType="textVisiblePassword"
android:maxLength="11"
android:singleLine="true"
android:text=""
android:textColor="#999999"
android:textColorHint="#999999"
android:textSize="14dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#eeeeee" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="13dp">
<EditText
android:id="@+id/et_password"
android:layout_width="0dp"
android:layout_height="55dp"
android:layout_weight="1"
android:background="@null"
android:hint="请输入密码"
android:inputType="textPassword"
android:maxLength="30"
android:singleLine="true"
android:text=""
android:textColor="#999999"
android:textColorHint="#999999"
android:textSize="14dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#eeeeee" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="21dp"
android:background="#d4ab7f"
android:text="登录"
android:textColor="#ffffff"
android:textSize="18dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/service"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="联系客服"
android:textColor="#b0b8b2"
android:textSize="14dp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#eeeeee" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="关于我们"
android:textColor="#b0b8b2"
android:textSize="14dp" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
看代码 这里是布局,注意图片的scaleType
android:scaleType="centerCrop"
初始化的数据
private void initView() {
//logo图
logo = findViewById(R.id.logo_bg);
//背景图渐变消失后的颜色
bgLine = findViewById(R.id.back_line);
//背景图
backBg = findViewById(R.id.back_bg);
//包裹上面三个view的父View
topView = findViewById(R.id.topPanel);
et_mobile = findViewById(R.id.et_mobile);
et_password = findViewById(R.id.et_password);
}
输入框事件监听,获取焦点是时调用缩小动画
private void initListener() {
// EditText焦点的监听
et_mobile.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void onFocusChange(View v, boolean hasFocus) {
// 当hasFocus = true 是获取焦点
if (hasFocus && !isSuoxiao) {
suoxiao();
isSuoxiao = true;
}
}
});
et_password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void onFocusChange(View v, boolean hasFocus) {
// 当hasFocus = true 是获取焦点
if (hasFocus && !isSuoxiao) {
suoxiao();
isSuoxiao = true;
}
}
});
}
返回时还原动画
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (isSuoxiao) {
kuoda();
isSuoxiao = false;
}
}
return false;
}
再来看看实际调用的动画
//缩小动画
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void suoxiao() {
final int height = topView.getHeight();
topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//0.5代表要缩小多少倍高度
int i = (int) (height * 0.5 * (float) animation.getAnimatedValue());
topView.getLayoutParams().height = height - i;
topView.requestLayout();
}
}).setInterpolator(new AccelerateDecelerateInterpolator()).start();
logo.animate().scaleX(0.5f).scaleY(0.5f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
backBg.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();
bgLine.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();
}
//扩大动画
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void kuoda() {
final int height = topView.getHeight();
topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int i = (int) (height * (float) animation.getAnimatedValue());
topView.getLayoutParams().height = height + i;
topView.requestLayout();
}
}).setInterpolator(new AccelerateDecelerateInterpolator()).start();
logo.animate().scaleX(1f).scaleY(1.0f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
backBg.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();
bgLine.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();
}
以上使用的都是View自带的动画ViewPropertyAnimator
完整代码请参考Demo
需要源码的童鞋底部公众号回复:“登录动画” 即可获取哦.
小编整理了一份Android电子书籍,需要的童鞋关注公众号回复:"e_books" 即可获取哦!
欢迎关注公众号(longxuanzhigu),获得更多福利、精彩内容哦!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。