安卓实现登陆页logo随键盘收放动态伸缩（完美解决键盘弹出遮挡控件的问题）

在最近的两个项目中，产品狗都要求我实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去，避免键盘遮挡住登陆按钮*/ 这样的效果，宝宝心里苦呀，本来半天搞定的事还非得折腾一下，好吧我妥协，毕竟我还是一只非常注重用户体验的猿。那就做吧，初步定下的方案是输入框和登陆按钮大小不变，在键盘弹出的时候让logo的大小和位置进行改变，从而给键盘腾出位置，当然在键盘收起的时候还要给它还原一下，就像什么都没发生一样，嗯对，就是这样，说了这么多，放张图先感受一下效果吧:

接下来上正餐，布局上比较简单，注意给图片外边套上一个合身的linearlayout就好，因为待会要靠它改变logo的位置，布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".login.LoginActivity"
    android:orientation="vertical"
    android:id="@+id/ll_login_root">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="90dp"
        android:id="@+id/ll_login_logobg"
        android:layout_marginBottom="50dp">

        <ImageView
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:id="@+id/iv_login_logo"
            android:background="@mipmap/login_logo"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp">

            <ImageView
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:background="@mipmap/login_phone"
                android:id="@+id/imageView2"
                android:layout_gravity="bottom" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="phone"
                android:ems="10"
                android:id="@+id/et_login_phone"
                android:layout_gravity="center"
                android:hint="请输入手机号"
                android:background="@null"
                android:maxLength="11"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/text_gray"></LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <ImageView
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:background="@mipmap/login_password"
                android:id="@+id/imageView3"
                android:layout_gravity="bottom" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="phone"
                android:ems="10"
                android:id="@+id/et_login_code"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:hint="请输入验证码"
                android:background="@null"
                android:maxLength="6"/>

            <Button
                android:layout_width="90dp"
                android:layout_height="30dp"
                android:text="获取验证码"
                android:textColor="@color/white"
                android:id="@+id/bt_login_getcode"
                android:background="@mipmap/login_button_blue"
                android:layout_gravity="center_vertical"
                android:textSize="14dp" />
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/text_gray"
            android:layout_marginBottom="10dp" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:id="@+id/ll_login_warning"
            android:visibility="gone">

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:background="@mipmap/login_warning"
                android:id="@+id/imageView"
                android:layout_gravity="center_vertical" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="请输入验证码"
                android:id="@+id/tv_login_wraning"
                android:layout_gravity="center_vertical"
                android:textColor="@color/text_red"
                android:textSize="13dp" />
        </LinearLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:textColor="@color/white"
            android:id="@+id/bt_login_submit"
            android:background="@mipmap/login_button_gray"
            android:text="登 录"
            android:textSize="18dp"
            android:layout_marginTop="10dp" />

    </LinearLayout>

</LinearLayout>

主代码如下，我会把注释添加到代码中，因为是整个模块的代码所以也会有一些其他功能在里边：

package com.millionideas.cm.login;

import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.millionideas.cm.R;
import com.millionideas.cm.home.HomeActivity;
import com.millionideas.cm.main.BaseActivity;
import com.millionideas.cm.tools.TimeCountUtils;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.Event;
import org.xutils.view.annotation.ViewInject;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

@ContentView(R.layout.activity_login)
public class LoginActivity extends BaseActivity implements View.OnLayoutChangeListener{
//用xUtils进行控件绑定
    @ViewInject(R.id.iv_login_logo)
    ImageView iv_login_logo;
    @ViewInject(R.id.ll_login_logobg)
    LinearLayout ll_login_logobg;
    @ViewInject(R.id.et_login_phone)
    EditText et_login_phone;
    @ViewInject(R.id.et_login_code)
    EditText et_login_code;
    @ViewInject(R.id.ll_login_warning)
    LinearLayout ll_login_warning;
    @ViewInject(R.id.tv_login_wraning)
    TextView tv_login_wraning;
    @ViewInject(R.id.bt_login_getcode)
    Button bt_login_getcode;
    @ViewInject(R.id.bt_login_submit)
    Button bt_login_submit;
    @ViewInject(R.id.ll_login_root)
    LinearLayout activityRootView;//需要操作的布局
    private TimeCountUtils timeCountUtils;
    private Matcher phone_num;
    private Pattern phonenumber;
    private ProgressDialog progressDialog;
    private Handler handler;

    private int screenHeight = 0;//屏幕高度
    private int keyHeight = 0; //软件盘弹起后所占高度

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        screenHeight = this.getWindowManager().getDefaultDisplay().getHeight(); //获取屏幕高度
        keyHeight = screenHeight / 3;//弹起高度为屏幕高度的1/3
        timeCountUtils = new TimeCountUtils(LoginActivity.this, 60000, 1000, bt_login_getcode);//时间工具类用以实现倒计时
        progressDialog=new ProgressDialog(this);//对话框
        handler=new Handler();
        bt_login_submit.setClickable(false);
        et_login_phone.addTextChangedListener(new TextWatcher() {//为edittext添加文本改变监听，根据是否有文本输入更改确认按钮的背景颜色
            @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 (!et_login_phone.getText().toString().equals("")){
                    bt_login_submit.setClickable(true);
                    bt_login_submit.setBackgroundResource(R.drawable.login_button);
                }else {
                    bt_login_submit.setClickable(false);
                    bt_login_submit.setBackgroundResource(R.mipmap.login_button_gray);
                }
            }
        });
    }
    //xUtils的事件处理
    @Event(value = {R.id.bt_login_submit, R.id.bt_login_getcode}, type = View.OnClickListener.class)
    private void onClick(View view) {
        switch (view.getId()) {
            case R.id.bt_login_submit://确认按钮事件
                if (!CheckPhone(et_login_phone).matches()) {//判断手机号格式
                    ll_login_warning.setVisibility(View.VISIBLE);
                    tv_login_wraning.setText("手机号码格式不正确");
                } else if (!et_login_code.getText().toString().equals("000")) {//验证码判断，为方便测试设置了默认值
                    ll_login_warning.setVisibility(View.VISIBLE);
                    tv_login_wraning.setText("验证码不正确");
                } else {//条件全部满足，开始登陆
                    ll_login_warning.setVisibility(View.GONE);
                    progressDialog.setMessage("正在登录…");
                    progressDialog.show();//弹出加载对话框
                    handler.postDelayed(new Runnable() {//设置一个1s的延时操作模拟登陆的过程
                        @Override
                        public void run() {//登陆成功关掉对话框，跳转页面，关掉本页
                            progressDialog.dismiss();//不能用hide
                            Intent intent=new Intent(LoginActivity.this, HomeActivity.class);
                            startActivity(intent);
                            LoginActivity.this.finish();
                        }
                    },1000);

                }
                break;
            case R.id.bt_login_getcode:
                if (CheckPhone(et_login_phone).matches()) {//手机号正确则获取验证码，开启倒计时
                    ll_login_warning.setVisibility(View.GONE);
                    bt_login_getcode.setBackgroundResource(R.mipmap.login_button_gray);
                    timeCountUtils.start();
                } else {
                    ll_login_warning.setVisibility(View.VISIBLE);
                    tv_login_wraning.setText("手机号码格式不正确");
                }
                break;
        }
    }

    public Matcher CheckPhone(EditText editText) {//判断手机号格式
        phonenumber = Pattern
                .compile("^[1][3-8][0-9]{9}$");
        phone_num = phonenumber.matcher(editText.getText()
                .toString());
        return phone_num;
    }

    @Override
    protected void onResume() {
        super.onResume();
        activityRootView.addOnLayoutChangeListener(this);//给需要操作的布局设置监听
    }

    @Override
    public void onLayoutChange(View v, int left, int top, int right,
                               int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
       /* old是改变前的左上右下坐标点值，没有old的是改变后的左上右下坐标点值
        现在认为只要控件将Activity向上推的高度超过了1/3屏幕高，就认为软键盘弹起*/
        if (oldBottom != 0 && bottom != 0 && (oldBottom - bottom > keyHeight)) {
            ViewGroup.LayoutParams params = iv_login_logo.getLayoutParams();//获取布局，设置键盘弹起后logo的宽高
            params.height = 300;
            params.width = 300;
            iv_login_logo.setLayoutParams(params);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ll_login_logobg.getLayoutParams());
            lp.setMargins(0, 90, 0, 50);//设置包含logo的布局的位置
            ll_login_logobg.setLayoutParams(lp);
        } else if (oldBottom != 0 && bottom != 0 && (bottom - oldBottom > keyHeight)) {//键盘收回后，logo恢复原来大小，位置同样回到初始位置
            ViewGroup.LayoutParams params = iv_login_logo.getLayoutParams();
            params.height = 480;
            params.width = 480;
            iv_login_logo.setLayoutParams(params);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ll_login_logobg.getLayoutParams());
            lp.setMargins(0, 270, 0, 150);
            ll_login_logobg.setLayoutParams(lp);
        }
    }
}

至此，效果实现。

---------------------------------------------分割线---------------------------------------------

最近才发现一个重要的细节：

不要忘了在主配置文件给登陆页设置软键盘模式

android:windowSoftInputMode="stateHidden|stateUnchanged|adjustResize"

------------------------------------------分割线------------------------------------------------

demo地址：DynamiclogoDemo

博客新址：BobbyZhang的技术小站