如下这样一个登录界面,如果不做任何处理,键盘会遮挡用户名和密码输入框,导致用户体验非常差
为了解决这一问题,我做的效果是当键盘弹起的时候,使logo做缩小动画,下面登录整体控件做上移,收起时做放大和下移。键盘监听请参考 https://github.com/guohaiyang1992/KeyBoardEventBus
@Override
public void onKeyBoardShow() {
HxLogUtils.e("lwjing", "键盘显示");
//缩小动画
zoomOut(tv_login_logo,0f,0f);
//上移动画
goUp(ll_login,tv_login_logo);
}
@Override
public void onKeyBoardHidden() {
HxLogUtils.v("lwjing", "键盘隐藏");
//放大动画
zoomIn(tv_login_logo,0f);
goDonw(ll_login,tv_login_logo);
}
属性动画平移 缩放:
private void goUp(View view,View view2) {
ObjectAnimator transYAnim = ObjectAnimator.ofFloat(view, "translationY", 0,-view2.getHeight()+20);
transYAnim.setDuration(ANIM_DURATION);
transYAnim.start();
}
/**
* 缩小
*属性动画
* @param view
*/
public void zoomOut(final View view, float scale, float dist) {
view.setPivotY(0);
view.setPivotX(view.getWidth() / 2);
AnimatorSet mAnimatorSet = new AnimatorSet();
ObjectAnimator mAnimatorScaleX = ObjectAnimator.ofFloat(view, "scaleX", 1.0f, scale);
ObjectAnimator mAnimatorScaleY = ObjectAnimator.ofFloat(view, "scaleY", 1.0f, scale);
ObjectAnimator mAnimatorAlpha = ObjectAnimator.ofFloat(view, "alpha", 1.0f, 0.8f, 0.6f, 0.4f, 0.2f, 0.0f);
// ObjectAnimator transYAnim = ObjectAnimator.ofFloat(view, "translationY", view.getHeight()/2,-view.getHeight()/3);
mAnimatorSet.playTogether(mAnimatorAlpha,mAnimatorScaleX,mAnimatorScaleY);
mAnimatorSet.setDuration(ANIM_DURATION);
mAnimatorSet.start();
}
private void goDonw(View view,View view2) {
// ObjectAnimator transXAnim = ObjectAnimator.ofFloat(view, "translationX", 100, 400);
ObjectAnimator transYAnim = ObjectAnimator.ofFloat(view, "translationY", -view2.getHeight()+20,0);
transYAnim.setDuration(ANIM_DURATION);
transYAnim.start();
}
/**
* f放大
*
* @param view
*/
public void zoomIn(final View view, float scale) {
view.setPivotY(0);
view.setPivotX(view.getWidth() / 2);
AnimatorSet mAnimatorSet = new AnimatorSet();
ObjectAnimator mAnimatorScaleX = ObjectAnimator.ofFloat(view, "scaleX", scale, 1.0f);
ObjectAnimator mAnimatorScaleY = ObjectAnimator.ofFloat(view, "scaleY", scale, 1.0f);
ObjectAnimator mAnimatorAlpha = ObjectAnimator.ofFloat(view, "alpha", 0.0f, 0.2f, 0.4f, 0.6f, 0.8f,1.0f);
// ObjectAnimator transYAnim = ObjectAnimator.ofFloat(view, "translationY", view.getHeight()/2,view.getHeight()/3);
mAnimatorSet.playTogether(mAnimatorAlpha,mAnimatorScaleX,mAnimatorScaleY);
mAnimatorSet.setDuration(ANIM_DURATION);
mAnimatorSet.start();
}
界面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_login_pic"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/tv_login_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/dp_48"
android:drawablePadding="@dimen/dp_15"
android:drawableTop="@drawable/icon_login_logo"
android:gravity="center_horizontal"
android:text="App"
android:textColor="#fffefe"
android:textSize="@dimen/sp_20"
/>
<LinearLayout
android:id="@+id/ll_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_45"
android:layout_marginLeft="@dimen/dp_35"
android:layout_marginRight="@dimen/dp_35"
android:layout_marginTop="@dimen/dp_45"
android:background="@drawable/bg_login_et"
android:ellipsize="end"
android:hint="用户名"
android:maxLines="1"
android:paddingLeft="@dimen/dp_20"
android:paddingRight="@dimen/dp_20"
android:singleLine="true"
android:textColor="@color/white"
android:textColorHint="@color/white"
android:textSize="@dimen/sp_20"/>
<EditText
android:id="@+id/et_psd"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_45"
android:layout_marginLeft="@dimen/dp_35"
android:layout_marginRight="@dimen/dp_35"
android:layout_marginTop="@dimen/dp_25"
android:background="@drawable/bg_login_et"
android:ellipsize="end"
android:hint="密码"
android:inputType="textPassword"
android:maxLines="1"
android:paddingLeft="@dimen/dp_20"
android:paddingRight="@dimen/dp_20"
android:singleLine="true"
android:textColor="@color/white"
android:textColorHint="@color/white"
android:textSize="@dimen/sp_20"/>
<CheckBox
android:id="@+id/cb_remember_psd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginRight="@dimen/dp_35"
android:layout_marginTop="@dimen/dp_30"
android:button="@null"
android:drawableLeft="@drawable/selector_remember_checkbox"
android:drawablePadding="@dimen/space_normal_8dp"
android:paddingLeft="0dp"
android:text="记住密码"
android:textColor="@color/white"
android:textSize="@dimen/text_size_16sp"/>
<Button
android:id="@+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_max_12dp"
android:background="@drawable/bg_login_btn"
android:enabled="true"
android:gravity="center"
android:text="登录"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginTop="@dimen/dp_35"
android:text="Copyright©2018"
android:textColor="@color/text_login_info"
android:textSize="@dimen/sp_13"/>
</LinearLayout>
效果图:

本文介绍了Android应用中登录界面遇到输入法弹出遮挡编辑框的问题,提供了解决方案:在键盘弹起时,通过属性动画使logo缩小并整体控件上移,键盘隐藏时则恢复原状,提升用户体验。实现细节参考了https://github.com/guohaiyang1992/KeyBoardEventBus。
671

被折叠的 条评论
为什么被折叠?



