先看效果圖
效果圖錄製出來有黑屏幀,勉強看哈,效果就是點擊輸入框後,頂部縮小,按返回按鈕時再還原
佈局文件
<?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
需要源碼的童鞋底部公衆號回覆:“登錄動畫” 即可獲取哦.
以下是公衆號(longxuanzhigu),之後發佈的文章會同步到該公衆號,方便交流學習Android知識,歡迎關注:
[圖片上傳失敗...(image-bfac0e-1603684268674)]