美文网首页
钉钉新建任务页面文字/语音切换按钮位于软键盘之上的实现思路

钉钉新建任务页面文字/语音切换按钮位于软键盘之上的实现思路

作者: _fanqh | 来源:发表于2019-01-04 13:26 被阅读0次

    1、项目中要实现一个发布定时任务的功能,页面效果类似于钉钉新建任务页面,现将基本实现思路及部分核心代码记录于此,先看下钉钉的实现效果,上图:


    钉钉-新建任务.gif

    此页面主要交互难点就在键盘弹出,文字与语音切换按钮位于软键盘之上。


    part1.png part2.png
    先说说我的实现思路

    1、软键盘弹出/隐藏监听

    etText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                //当键盘弹出或隐藏的时候会 调用此方法。
                @Override
                public void onGlobalLayout() {
    
                    Rect r = new Rect();
                    //获取当前界面可视部分
                    NewTaskActivity.this.getWindow().getDecorView().getWindowVisibleDisplayFrame(r);
    
                    //获取屏幕的高度
                    int screenHeight = NewTaskActivity.this.getWindow().getDecorView().getRootView().getHeight();
    
                    //此处就是用来获取键盘的高度的, 在键盘没有弹出的时候 此高度为0 键盘弹出的时候为一个正数
                    int heightDifference = screenHeight - r.bottom;
    
                    //因为该监听回调特别频繁,加此判断,防止频繁执行重复操作
                    if (heightDiff != heightDifference) {
                        heightDiff = heightDifference;
    
                        //此处可判断软键盘是否弹出,navigationBarHeight是手机导航栏的高度,
                        //">"后面的值一般大于导航栏高度就可以,不过稍微定义的再大多一点点。
                        isKeyboardShow = heightDifference > navigationBarHeight * 2;
    
                       //设置part2.png中那块区域的布局参数,其高度为软键盘的高度,
                      //此处要判断屏幕底部导航栏是否显示,显示的话要减去导航栏的高度
                        if (isKeyboardShow) {
                            ViewGroup.LayoutParams layoutParams = part2.getLayoutParams();
                            layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
                            if (isNavigationBarShow) { //导航栏是否显示
                                layoutParams.height = heightDifference - navigationBarHeight;
                            } else {
                                layoutParams.height = heightDifference;
                            }
                            part2.setLayoutParams(layoutParams);
                        }
                      //设置part1.png中那块区域是否显示
                        if (isKeyboardShow) {
                            //显示part1区域
                            part1.setVisibility(View.VISIBLE);
                        } else {
                            //文字模式下,软键盘隐藏,则part1区域隐藏
                            if (!isWordMode) {
                               part1.setVisibility(View.GONE);
                            }
                        }
                    }
                }
            });
    

    相关文章

      网友评论

          本文标题:钉钉新建任务页面文字/语音切换按钮位于软键盘之上的实现思路

          本文链接:https://www.haomeiwen.com/subject/aqbhrqtx.html