Android键盘面板冲突 布局闪动处理方案

最新推荐文章于 2023-04-13 15:52:01 发布
最新推荐文章于 2023-04-13 15:52:01 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： Android键盘面板冲突

起源，之前在微信工作的时候，为了给用户带来更好的基础体验，做了很多尝试，踩了很多输入法的坑，特别是动态调整键盘高度，二级页面是透明背景，魅族早期的Smart bar等, 后来逐一完善了，考虑到拥抱开源，看业界还是有很多应用存在类似问题。就有了这个repo

之前有写过一篇核心思想: Switching between the panel and the keyboard in Wechat。

Android键盘面板冲突 布局闪动处理方案Android键盘面板冲突 布局闪动处理方案 Android键盘面板冲突 布局闪动处理方案Android键盘面板冲突 布局闪动处理方案

欢迎提交 Pull requests

  • 尽量多的英文注解。
  • 每个提交尽量的细而精准。
  • Commit message 遵循: AngularJS's commit message convention。
  • 尽可能的遵循IDE的代码检查建议(如 Android Studio 的 'Inspect Code')。

如何使用

在build.gradle中引入:

compile 'cn.dreamtobe.kpswitch:library:1.4.4'

使用引导

非全屏主题情况下使用引导

所谓非全屏主题，就是 (activity.getWindow().getAttributes().flags & WindowManager.LayoutParams.FLAG_FULLSCREEN) == 0

Android键盘面板冲突 布局闪动处理方案

I. AndroidManifest

可直接参照: AndroidManifest.xml

对应的Activity，在AndroidManifest中配置android:windowSoftInputMode=adjustResize

<manifest
  ...>
  <application
    ...>

    <activity
      android:name=".activity.ChattingActivity"
      android:windowSoftInputMode=adjustResize"/>
      ...
  </application>
  ...
</manifest>

II. 需要处理页面的layout xml

可直接参照: activity_chatting_resolved.xml

  1. 需要用到 最上层布局 (KPSwitchRootFrameLayout/KPSwitchRootLinearLayout/KPSwitchRootRelativeLayout)
  2. 需要用到 面板布局(KPSwitchPanelFrameLayout/KPSwitchPanelLinearLayout/KPSwitchPanelRelativeLayout)。

简单案例:

<?xml version="1.0" encoding="utf-8"?>
<!-- 可选用 KPSwitchRootLinearLayout、KPSwitchRootRelativeLayout、KPSwitchRootFrameLayout -->
<cn.dreamtobe.kpswitch.widget.KPSwitchRootLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 布局内容 -->
    ...

    <!-- 可选用 KPSwitchPanelLinearLayout、KPSwitchPanelRelativeLayout、KPSwitchPanelFrameLayout -->
    <cn.dreamtobe.kpswitch.widget.KPSwitchPanelLinearLayout
        android:id="@+id/panel_root"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/panel_height"
        android:visibility="gone">
        <!-- 面板内容 -->
        ...
    </cn.dreamtobe.kpswitch.widget.KPSwitchPanelLinearLayout>

</cn.dreamtobe.kpswitch.widget.KPSwitchRootLinearLayout>

III. 需要处理页面的Activity:

可直接参照: ChattingResolvedActivity.java

  1. 处理一些事件(KPSwitchConflictUtil)
  2. 键盘状态(高度与显示与否)监听(KeyboardUtil#attach())

简单案例:

...

// 面板View
private KPSwitchPanelLinearLayout mPanelLayout;
// 键盘焦点View，用于输入内容
private EditText mSendEdt;
// 用于切换键盘与面板的按钮View
private ImageView mPlusIv;

@Override
public void onCreate(Bundle saveInstanceState){
    ...

    mPanelLayout = (KPSwitchPanelLinearLayout)findViewById(R.id.panel_root);
    mSendEdt = (EditText) findViewById(R.id.send_edt);
    mPlusIv = (ImageView) findViewById(R.id.plus_iv);

    /**
     * 这个Util主要是监控键盘的状态: 显示与否 以及 键盘的高度
     * 这里也有提供给外界监听 键盘显示/隐藏 的监听器，具体参看
     * 这个接口 {@Link KeyboardUtil#attach(Activity, IPanelHeightTarget, OnKeyboardShowingListener)}
     */
    KeyboardUtil.attach(this, mPanelLayout);

    /**
     * 这个Util主要是协助处理一些面板与键盘相关的事件。
     * 这个方法主要是对一些相关事件进行注册，如切换面板与键盘等，具体参看源码，比较简单。
     * 里面还提供了一些已经处理了冲突的工具方法: 显示面板；显示键盘；键盘面板切换；隐藏键盘与面板；
     *
     * @param panelRoot 面板的布局。
     * @param switchPanelKeyboardBtn 用于触发切换面板与键盘的按钮。
     * @param focusView 键盘弹起时会给这个View focus，收回时这个View会失去focus，通常是发送的EditText。
     */
    KPSwitchConflictUtil.attach(mPanelLayout, mPlusIv, mSendEdt);

}

...

...

// 如果需要处理返回收起面板的话
@Override
public boolean dispatchKeyEvent(KeyEvent event){
    if (event.getAction() == KeyEvent.ACTION_UP &&
            event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
        if (mPanelLayout.getVisibility() == View.VISIBLE) {
            KPSwitchConflictUtil.hidePanelAndKeyboard(mPanelLayout);
            return true;
        }
    }
    return super.dispatchKeyEvent(event);
}

全屏主题情况下使用引导

所谓全屏主题，就是 (activity.getWindow().getAttributes().flags & WindowManager.LayoutParams.FLAG_FULLSCREEN) != 0

Android键盘面板冲突 布局闪动处理方案

I. AndroidManifest

可直接参照: AndroidManifest.xml

对应的Activity，在 AndroidManifest中配置 android:windowSoftInputMode=adjustUnspecified，或者不配置，默认就是这个模式。

II. 需要处理页面的layout xml

可直接参照: activity_chatting_fullscreen_resolved.xml

这边只需要用到一个 面板布局(KPSwitchFSPanelFrameLayout/KPSwitchFSPanelLinearLayout/KPSwitchFSPanelRelativeLayout)

<?xml version="1.0" encoding="utf-8"?>
...
    ...

    <!-- 可选用 KPSwitchFSPanelFrameLayout、KPSwitchFSPanelLinearLayout、KPSwitchFSPanelRelativeLayout -->
    <cn.dreamtobe.kpswitch.widget.KPSwitchFSPanelFrameLayout
        android:id="@+id/panel_root"
        style="@style/Panel"
        android:visibility="gone">

        ...
    </cn.dreamtobe.kpswitch.widget.KPSwitchFSPanelFrameLayout>

...

III. 需要处理页面的Activity:

可直接参照: ChattingResolvedFullScreenActivity.java

  1. 主要是处理一些事件(KPSwitchConflictUtil)
  2. 键盘状态(高度与显示与否)监听(KeyboardUtil#attach())
  3. 在onPause时，记录键盘状态用于从后台回到当前布局，恢复键盘状态不至于冲突(IFSPanelConflictLayout#recordKeyboardStatus())

如下使用案例:

...

// 面板View
private KPSwitchFSPanelLinearLayout mPanelLayout;
// 键盘焦点View，用于输入内容
private EditText mSendEdt;
// 用于切换键盘与面板的按钮View
private ImageView mPlusIv;

@Override
public void onCreate(Bundle saveInstanceState){
    ...


    mPanelLayout = (KPSwitchFSPanelLinearLayout)findViewById(R.id.panel_root);
    mSendEdt = (EditText) findViewById(R.id.send_edt);
    mPlusIv = (ImageView) findViewById(R.id.plus_iv);

    /**
     * 这个Util主要是监控键盘的状态: 显示与否 以及 键盘的高度
     * 这里也有提供给外界监听 键盘显示/隐藏 的监听器，具体参看
     * 这个接口 {@Link KeyboardUtil#attach(Activity, IPanelHeightTarget, OnKeyboardShowingListener)}
     */
    KeyboardUtil.attach(this, mPanelLayout);

    /**
     * 这个Util主要是协助处理一些面板与键盘相关的事件。
     * 这个方法主要是对一些相关事件进行注册，如切换面板与键盘等，具体参看源码，比较简单。
     * 里面还提供了一些已经处理了冲突的工具方法: 显示面板；显示键盘；键盘面板切换；隐藏键盘与面板；
     *
     * @param panelRoot 面板的布局。
     * @param switchPanelKeyboardBtn 用于触发切换面板与键盘的按钮。
     * @param focusView 键盘弹起时会给这个View focus，收回时这个View会失去focus，通常是发送的EditText。
     */
    KPSwitchConflictUtil.attach(mPanelLayout, mPlusIv, mSendEdt);

}

@Override
protected void onPause() {
  super.onPause();
  // 用于记录当前的键盘状态，在从后台回到当前页面的时候，键盘状态能够正确的恢复并且不会导致布局冲突。
  mPanelLayout.recordKeyboardStatus(getWindow());
}

...

// 如果需要处理返回收起面板的话
@Override
public boolean dispatchKeyEvent(KeyEvent event){
    if (event.getAction() == KeyEvent.ACTION_UP &&
            event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
        if (mPanelLayout.getVisibility() == View.VISIBLE) {
            KPSwitchConflictUtil.hidePanelAndKeyboard(mPanelLayout);
            return true;
        }
    }
    return super.dispatchKeyEvent(event);
}

基本原理

扩展阅读

Android Studio 提示与技巧（官方文档翻译）
Android中软键盘弹出时关于布局的问题 
android软键盘弹出引起的各种不适终极解决方案
介绍 Visual Studio 的 Android 模拟器
JavaScript 资源大全中文版

为您推荐

hadoop分布式集群搭建 
功能强大的验证码的Java类库：Patchca
CAS实现SSO（单点登录）
Struts2 json plugin实战2 
Webpack + React 开发之路

更多

Android
键盘
Android开发

Jacksgong / JKeyboardPanelSwitch

Star 2249Fork 401

项目描述：For resolve the layout conflict when keybord & panel are switching (Android键盘面板冲突 布局闪动处理方案) — 查看更多内容..

yangxi_001
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 软键盘显示和隐藏造成页面跳闪问题的解决方案
chuanao8829的博客
06-08 2681
一、分析问题 1.为什么会闪？ 首先图像切换主要用的无非就是ViewA.setVisibility(GONE) 和ViewB.setVisbility(VISIBLE)，如果不涉及到软键盘，正常状况下本就应该会闪，也就是说，只要有图像切换，必会闪，这是正常的。 2.为什么会跳？ ...
Android弹出键盘布局闪动原理和解决
weixin_34293141的博客
03-18 2508
2019独角兽企业重金招聘Python工程师标准>>> ...
Android-Android键盘面板冲突布局闪动处理方案
08-13
JKeyboardPanelSwitch是一款用于Android键盘面板冲突，布局闪动处理方案的软件
KeyboardPanelSwitchDemo:android keyboard键盘和panel面板切换时，屏幕闪烁解决方案
05-16
android keyboard键盘和panel面板切换时，屏幕闪烁解决方案 Android键盘操作总结 Android 键盘相关常见问题有： 限制输入框内字数，超过字数不让输入，并且提示 点击外部区域键盘自动收起 如何获取键盘高度 键盘与面板的切换冲突 下面将对上述问题各个击破。 1. 限制输入框内字数，超过字数不让输入，并且提示 etReply.setFilters(new InputFilter[]{new InputFilter() { @Override public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) { if (source.length() + dest.length() > COMME
Android键盘切换闪动原理及解决方案
Jayme
04-06 6966
Android键盘切换闪动原理及解决方案主要内容 键盘切换闪动原理 键盘切换闪动解决方案设置键盘softInputMode使用adjustPan，增加一个与键盘同高的支撑视图（不推荐） 设置键盘softInputMode使用adjustResize，在onMeasure时处理键盘事件 键盘切换闪动原理上图中有几个状态（这里键盘softInputMode为adjustResize，如果对键盘弹出方式还
JKeyboardPanelSwitch源码学习
litefish的专栏
07-21 5087
最近准备做个输入法表情语音合在一起的输入控件，看到了网上有JKeyboardPanelSwitch（地址），就拉下来学习了下。JKeyboardPanelSwitch可以保证在输入法键盘和其他键盘之间切换不抖动，效果非常好，而且解决了很多适配问题。 本文对此代码进行学习。 实现好之后，输入法键盘也会使用这个区域，实现了自定义键盘和输入法键盘公用一块区域，使得切换起来不抖动，输入条的位置不变化。
Android键盘面板冲突 布局闪动处理方案.zip
01-15
方案是为解决特定问题或达成特定目标而制定的一系列计划或步骤。它的作用是提供一种系统性的...总体而言，方案的作用在于提供一种有序、有计划的方法，以解决问题、实现目标，并在实施过程中最大化资源利用和风险管理。
Android键盘面板冲突 布局闪动处理方案（聊天界面键盘冲突）
05-13
在Android应用开发中，尤其是设计聊天界面时，经常会遇到键盘面板与布局的冲突问题，这主要体现在用户在输入框上点击触发软键盘弹出时，布局会发生闪烁或移动，导致用户体验不佳。这个问题通常被称为“键盘面板冲突...
Android 表情面板和软键盘切换时跳闪问题的解决方法
08-29
Android 表情面板和软键盘切换时跳闪问题的解决方法 Android 系统中，当用户需要输入文本信息时，通常会提供一个表情面板，以供用户选择和输入表情。但是在某些应用中，当用户想要切换到表情面板时，会出现跳闪...
Android 软键盘切换表情不会闪动
11-25
"Android 软键盘切换表情不会闪动"这个问题直指一个常见的用户体验问题，即当用户在EditText中切换到表情面板时，界面可能会出现闪烁或者布局跳动的现象。这通常是因为软键盘弹出和隐藏时改变了屏幕高度，导致布局...
解决Android软键盘和表情面板切换界面闪动问题
xh2009cn的专栏
05-12 8829
Android软键盘会压缩Activity窗口大小，在软键盘和表情面板之间切换的时候会造成界面跳动，影响体验，如下图： 造成这个原因和AndroidManifest.xml文件里面设置Activity的windowSoftInputMode属性有关： 当属性为adjustResize的时候，软键盘弹出时会挤压Activity窗口大小，这样可以保证输入法不会覆盖到输入框；
H5软键盘弹出屏幕闪动问题
qq_43351090的博客
07-16 1109
H5软键盘弹出屏幕闪动问题简介代码如下 简介 当浏览器被重置大小，调用window.onresize方法设置body和body的css内容高度一致。 代码如下 在App.vue中写入如下内容即可。 mounted () { window.onresize = ()=>{ return(()=>{ document.body.style.height = document.body.clientHeight; })() } } ...
处理ios软键盘弹起和收起时页面滚动问题
weixin_47664795的博客
09-08 4390
处理ios软键盘弹起和收起时页面滚动问题
Android弹出软键盘时把布局顶上去的解决方法
热门推荐
xige1995的博客
04-13 1万+
无论使用哪种方法，都需要对布局进行合理的设计，以确保布局在软键盘弹出时能够适应屏幕，不会被遮挡或重叠。属性，可以告诉 Android 系统，布局已经适应了系统窗口，并且不需要被调整。属性：在 AndroidManifest.xml 文件中设置 Activity 的。属性，可以让布局成为一个可滚动的容器，从而避免布局被软键盘遮挡的问题。属性，可以在软键盘弹出时自动调整布局。选项会自动调整布局，使其适应软键盘的高度。属性：在布局的根视图中添加。
Android Dialog 弹出的时 页面闪一下的处理
afufufufu的博客
03-17 2180
【代码】Android Dialog 弹出的时 页面闪一下的处理。
一次软键盘引起的界面跳动
lidongxiu0714
03-08 1789
软键盘导致界面被顶起 在RelativeLayout布局中放置在顶部的View由于受到软键盘弹起的影响，会被顶到软键盘以上，体验非常不好，这时可以给Activity设置 android:windowSoftInputMode=“adjustPan|stateHidden”，就可以防止底部View被顶起。上面的问题应该是比较普遍的问题，解决方法网上说的也很多。但更多的时候我们遇到的是软键盘遮挡的问题...
FragmentDialog闪屏问题及解决
perfectnihil的博客
10-23 4146
1.view 之前是gone, 2 然后通过网络请求判断是否显示， 3 当显延迟示的时候，视图高度有变化，dialog的高度变大或者变小，就会跳动 这种状况不注意观察真的不太容易发现原因。
android native 跳转flutter 闪动
最新发布
02-03
Android native 跳转到Flutter页面时出现闪动的问题，可能是由于页面加载速度或切换动画引起的。在解决这个问题时，可以尝试以下几种方式。 使用Flutter提供的混合栈技术，将原生页面与Flutter页面进行无缝切换，避免闪动现象。 优化Flutter页面的加载速度，减少页面元素的复杂性和资源使用，同时通过预加载等技术提前加载Flutter页面，减少页面切换时的延迟，从而减少闪动现象。 调整页面切换的动画效果，可能当前使用的切换动画效果对页面加载速度不够友好，可以尝试使用其他更简洁的切换动画效果，或者禁用动画效果，从而减少闪动现象。 在Android native页面跳转到Flutter页面时，可以尝试使用原生页面的透明背景或者页面遮罩的方式，来避免页面切换时的闪动现象，让用户感知到更连贯的体验。 总之，在解决Android native跳转到Flutter页面出现闪动的问题时，可以通过优化Flutter页面的加载速度、调整页面切换动画效果、以及使用混合栈技术等方式，来减少闪动现象，提高用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值