Android 关于软键盘的三个故事

前言

有输入框的地方

就有软键盘

那是一种,会呼吸的痛

第一个故事

留言板

错误的打开方式

错误的打开姿势.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;
  }

参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容