（用户体验）EditText与软键盘的显示和隐藏

最近比较有空，整理了一些登陆页面的一些体验，写成demo总结记录下来，在此分享给大家：
先看看效果图吧：模拟器效果不是很好，真机上却是没问题的。

为了用模拟器录效果图，花了很长时间在模拟器不弹软键盘的问题上。哭死，差点没耐心录屏了。。。
接下来我们就看看上面是怎么实现的吧。
xml布局中login_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ecedf1" >

    <ScrollView  android:id="@+id/login_sv" android:layout_width="fill_parent" android:layout_height="wrap_content" >

        <RelativeLayout  android:id="@+id/login_rl_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" >

            <LinearLayout  android:id="@+id/login_ll_blue" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" >

                <LinearLayout  android:id="@+id/login_ll_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical" >

                    <Button  android:id="@+id/login_td" android:layout_width="94dp" android:layout_height="94dp" android:layout_marginTop="61dp" android:background="@drawable/login_bg" android:clickable="false" />
                </LinearLayout>

                <LinearLayout  android:id="@+id/login_ll_username_password" android:layout_width="fill_parent" android:layout_height="119dp" android:layout_marginLeft="18dp" android:layout_marginRight="18dp" android:layout_marginTop="45dip" android:background="@drawable/login_boxbg" android:orientation="vertical" >

                    <LinearLayout  android:layout_width="fill_parent" android:layout_height="59dp" android:orientation="horizontal" >

                        <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="18dp" android:paddingLeft="10dp" android:paddingTop="18dp" android:src="@drawable/login_icon_mail" />

                        <EditText  android:id="@+id/login_et_username" android:layout_width="0dip" android:layout_height="fill_parent" android:layout_weight="9" android:background="@null" android:hint="请输入邮箱" android:inputType="textEmailAddress" android:padding="10dp" android:paddingTop="10dp" android:singleLine="true" android:textColor="#acacac" android:textColorHint="#acacac" android:textSize="13sp" />
                    </LinearLayout>

                    <View  android:layout_width="fill_parent" android:layout_height="1dp" android:background="#f0f1f4" />

                    <LinearLayout  android:layout_width="fill_parent" android:layout_height="59dp" android:orientation="horizontal" >

                        <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="18dp" android:paddingLeft="10dp" android:paddingTop="18dp" android:src="@drawable/login_icon_lock" />

                        <EditText  android:id="@+id/login_et_password" android:layout_width="0dip" android:layout_height="fill_parent" android:layout_weight="9" android:background="@null" android:digits="1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" android:hint="输入密码" android:inputType="textEmailAddress" android:maxLength="12" android:padding="10dp" android:paddingTop="10dp" android:password="true" android:singleLine="true" android:textColor="#acacac" android:textColorHint="#acacac" android:textSize="13sp" />

                        <ImageButton  android:id="@+id/login_ib_eye" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginRight="10dp" android:background="@drawable/login_icon_eye" />
                    </LinearLayout>
                </LinearLayout>

                <LinearLayout  android:id="@+id/login_ll_login" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:orientation="horizontal" android:padding="10dip" >

                    <Button  android:id="@+id/login_bt_login" android:layout_width="0dip" android:layout_height="45dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dip" android:layout_weight="1" android:background="@drawable/public_bt_green_select" android:gravity="center" android:text="登tt录" android:textColor="#ffffff" />
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

在Activity中，需要监听软件盘的弹起，控制来滑动ScrollView；

@SuppressLint("NewApi")
public class MainActivity extends Activity implements OnClickListener,OnLayoutChangeListener{ 
    //登录页面背景
    private View rlLoginBg;  
    //登录页面上面部分背景
    private LinearLayout llLoginBg; 
    // 账号、密码
    private EditText etUsername,etPassword;
    // 屏幕的高度
    private int screenHeight; 
    //软件盘弹起后所占高度阀值
    private int keyHeight = 0;
    //滚动条
    private ScrollView mScrollView; 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login_activity);        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);// 隐藏软键盘
        initView();
    } 
    /** * 初始化控件与事件监听 */
    protected void initView() {  
        // 得到屏幕高度
        screenHeight = getWindowManager().getDefaultDisplay().getHeight();
        //阀值设置为屏幕高度的1/3 
        keyHeight = screenHeight/3;

        rlLoginBg=findViewById(R.id.login_rl_bg);
        mScrollView = (ScrollView) findViewById(R.id.login_sv);  
        llLoginBg=(LinearLayout)findViewById(R.id.login_ll_bg);
        etUsername=(EditText) findViewById(R.id.login_et_username); 
        etPassword=(EditText) findViewById(R.id.login_et_password);     
        llLoginBg.setOnClickListener(this);
        etUsername.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0,MotionEvent arg1) {
                //滚动条下滑到底部
                scrollToBottom(etUsername);
                return false;
            }
        });
        etPassword.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0,MotionEvent arg1) {
                //滚动条下滑到底部
                scrollToBottom(etPassword);         
                return false;
            }
        }); 
    }
    @Override
    public void onClick(View v) {

        switch (v.getId()) {
        //登陆背景按钮点击事件
        case R.id.login_ll_bg:
            //隐藏软件盘
            HideKeyboard(etPassword);    
            break;
        default:
            break;
        }
    } 
    @SuppressLint("NewApi")
    @Override  
    protected void onResume() {  
        super.onResume();            
        //添加layout大小发生改变监听器 
        rlLoginBg.addOnLayoutChangeListener(this);  
    } 
    // 隐藏软键盘
    private void HideKeyboard(EditText edittext){
        etPassword.setCursorVisible(false);
        etUsername.setCursorVisible(false);
        InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        if(imm.isActive()){
            imm.hideSoftInputFromWindow(edittext.getWindowToken(),0);
        }
    }
    //监听软件盘弹起和关闭
    @Override  
    public void onLayoutChange(View v,int left,int top,int right,int bottom,int oldLeft,int oldTop,int oldRight,int oldBottom) {     
        //现在认为只要控件将Activity向上推的高度超过了1/3屏幕高，就认为软键盘弹起 
        if(oldBottom != 0 && bottom != 0 &&(oldBottom - bottom > keyHeight)){  
            // Toast.makeText(LoginActivity.this,"监听到软键盘弹起...",0).show();
            scrollToBottom(etUsername);
        }else if(oldBottom != 0 && bottom != 0 &&(bottom - oldBottom > keyHeight)){  
            // Toast.makeText(LoginActivity.this,"监听到软件盘关闭...",0).show(); 
        }
    } 
    private void scrollToBottom(final EditText et){ 
        et.setFocusable(true);
        mScrollView.postDelayed(new Runnable() { 
            public void run() { 
                //smoothScrollTo和ScrollTo效果不一样
                mScrollView.smoothScrollTo(0,llLoginBg.getBottom()); 
            } 
        },100);
    }
}

另外drawable文件夹中需要的一些图片也提供出来：
注释写得很清楚了。喜欢的朋友可以进一步优化一下。有欠缺之处，欢迎大家吐槽，讨论。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!