(用户体验)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="登\t\t录"
                        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文件夹中需要的一些图片也提供出来:
logo登陆外框眼睛锁邮箱按钮
注释写得很清楚了。喜欢的朋友可以进一步优化一下。有欠缺之处,欢迎大家吐槽,讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值