Android登录界面编辑框被输入法遮挡解决方案

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

如下这样一个登录界面,如果不做任何处理,键盘会遮挡用户名和密码输入框,导致用户体验非常差
这里写图片描述
为了解决这一问题,我做的效果是当键盘弹起的时候,使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>

效果图:
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值