美文网首页week.ioAndroid 踩坑记经验之谈
Android 关于软键盘的三个故事

Android 关于软键盘的三个故事

作者: HelloVass | 来源:发表于2016-01-28 22:00 被阅读1304次

    前言

    有输入框的地方

    就有软键盘

    那是一种,会呼吸的痛

    第一个故事

    留言板

    错误的打开方式

    错误的打开姿势.gif

    仔细观察会发现,当软键盘弹出时 background、recyclerview、toolbar软键盘顶上去了!这样的交互简直不能忍,对用户来说也非常突兀。

    正确的打开方式

    正确的打开姿势.gif

    软键盘弹出只是遮盖了 background 一部分,background 没有被压缩

    实现

    1. AndroidMainifest.xml 配置文件

    <activity
          android:name=".MainActivity"
          android:windowSoftInputMode="adjustResize">
    

    2. activity_main.xml 布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    
    
      <!-- 关键处,用 ScrollView 包裹 ImageView -->
      <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <ImageView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:adjustViewBounds="true" 
          android:scaleType="centerCrop"
          android:src="@mipmap/bg_leave_msg_board" />
    
      </ScrollView>
    
      <!-- Toolbar-->
      <include layout="@layout/view_msg_board_app_bar_layout" />
    
      <!-- Recyclerview-->
      <geeklub.org.hellovass.endless_recyclerview.widget.HVEndlessRecyclerView
        android:id="@+id/rv_msg_board"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    
      <!-- 输入框-->
      <geeklub.org.messageboarddemo.widget.LeaveMessageBoard
        android:id="@+id/leave_msg_board"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        app:layout_behavior="geeklub.org.messageboarddemo.LeaveMessageViewBehavior" />
    
    </android.support.design.widget.CoordinatorLayout>
    
    
    

    目瞪口呆,为什么这样搞定了?

    android:windowSoftInputMode 属性

    Value Description
    adjustPan 软键盘弹出时,Activity 主窗口不会调整大小留出空间给软键盘。相反,window 的内容将自动移动以便当前焦点不被键盘覆盖(用户总是能看到输入内容的部分)
    adjustResize 软键盘弹出时,对 Activity 主窗口调整大小以留出软键盘的空间

    很明显,错误的姿势.gif 中使用的是第一种属性

    android:windowSoftInputMode = adjustResize 时, Activity 究竟做了什么?

    简单自定义 ImageView、ScrollView,打印出关键信息
    
    public class HVImageView extends ImageView {
    
      private static final String TAG = HVImageView.class.getSimpleName();
    
      //  省略部分代码...
    
      @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.i(TAG, "onMeasure,height -->" + MeasureSpec.getSize(heightMeasureSpec));
      }
    
      @Override protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        Log.i(TAG, "onLayout,left -->" + l + ",top -->>" + t + ", right -->>" + r + ",bottom -->>" + b);
      }
    
      @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Log.i(TAG, "onSizeChanged,width -->"
            + w
            + ",height -->>"
            + h
            + ", oldWidth -->>"
            + oldw
            + ",oldHeight -->>"
            + oldh);
      }
    }
    
    //  省略自定义 HVScrollView 代码
    
    
    bg_leave_msg_board.jpg
    背景图片(width = 1080px,height = 1917px)
    HVImageView 的 log 信息
    第一次启动时
    第一次启动
    软键盘弹出时
    软键盘弹出时
    软键盘隐藏时
    软键盘隐藏时

    从 log 中可以看出,从第一次启动后 ImageView 的onSizeChanged 就不再执行。软键盘无论隐藏或弹出,bottom 的值一直是 2130px。

    HVScrollView 的 log 信息
    第一次启动时
    第一次启动
    键盘弹出时
    键盘弹出时
    键盘隐藏时
    键盘隐藏时

    从 log 中可以看出,ScrollView 的 onSizeChanged 是一直会被调用的。键盘弹出时,height:1776px->1072px; 键盘隐藏时,height:1072px ->1776px。

    分析
    思路
    1. ImageView 的长宽比应该与背景图的长宽比(1080px / 1917px = 0.5634)相同。背景图需要完整显示在 ImageView,并且占满 ImageView。

    2. windowSoftInputMode 设置为 adjustResize, Activity 主窗口调整大小时 ImageView 的 height 需要保持不变

    利用 adjustViewBounds 属性解决第一个问题
    ImageView 的 adjustViewBounds 属性

    设置为 true 的时候调整 ImageView 的边界来保持 drawable 的长宽比

    此时,ImageView 的 height = 屏幕的宽度(1200px) / 图片长宽比(0.56) = 2130px。

    使用 ScrollView 包裹 ImageView 解决第二个问题

    ScrollView 的 onSizeChanged 方法会在软键盘弹出、隐藏时被调用,而 ImageView 的 onSizeChanged 不会被调用,height 也就不会变化了。

    软键盘弹出时,ScrollView 高度减小,ImageView 的高度不变(这点很重要),我们能看到的背景图区域就缩小了,背景图被软键盘覆盖

    同理,软键盘隐藏时也一样。

    到这里,疑问也差不多解答完了...

    补充得到软键盘高度的几种方法

    其实这个问题和背景图被压缩并没有一毛钱关系,但是,如果要做到 QQ 聊天页面相近的体验——键盘弹出时,将 recyclerview/listview 滚动对应的距离(键盘的高度),这时候,如果能 SDK 里直接提供了这样的方法该多好啊。然而,并没有!

    方法一

     /**
       * 得到虚拟按键的高度
       *
       * @return 虚拟按键的高度
       */
      @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) public static int getSupportNavigationBarHeight(
          Context context) {
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    
        // 获取可用的高度
        DisplayMetrics defaultDisplayMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(defaultDisplayMetrics);
        int usableHeight = defaultDisplayMetrics.heightPixels;
    
        // 获取实际的高度
        DisplayMetrics realDisplayMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getRealMetrics(realDisplayMetrics);
        int realHeight = realDisplayMetrics.heightPixels;
    
        return realHeight > usableHeight ? realHeight - usableHeight : 0;
      }
    
      /**
       * 得到当前软键盘的高度
       *
       * @return 软键盘的高度
       */
      public static int getSoftInputHeight(Activity activity) {
        Rect rect = new Rect();
    
        activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(rect);
    
        int screenHeight = activity.getWindow().getDecorView().getRootView().getHeight();
    
        int softInputHeight = screenHeight - rect.bottom;
    
        // Android LOLLIPOP 以上的版本才有虚拟按键
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
          softInputHeight -= getSupportNavigationBarHeight(activity);
        }
    
        return softInputHeight;
      }
    

    参考链接

    相关文章

      网友评论

      • 逍遥wqy:但是这个貌似做不到图片完整显示在输入框上面Toolbar下面的内容区域吧
        HelloVass:@逍遥wqy 没有理解你的意思,要说图片完整显示的话,那是不可能的。因为软键盘弹出,图片就不可能完全现实出来。我这里尽可能做到和QQ聊天界面一样,不压缩背景图片
      • YoKey:棒棒哒
      • 小鄧子:这个必须顶了
        小鄧子:@HelloVass 有机会一起睡觉
        HelloVass:@小鄧子 小凳子,摸摸哒
        HelloVass:@小鄧子 我哭了,小凳子,搬凳子的速度简直了。。。

      本文标题:Android 关于软键盘的三个故事

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