移动测试基础界面背景被输入法压缩解决方案分享

Heyniu · 2016年10月28日 · 最后由 Heyniu 回复于 2016年10月31日 · 2274 次阅读

本帖已被设为精华帖！

聊天背景被压缩问题

实际现象： 详见 >> bg01
技术反馈： 暂时无法解决，如需要解决得改变现有聊天界面框架
产品回应： 产品不能接受此方案，此问题需优化好

着手排查：

问题发生在P2PChatActivityV2
尝试在AndroidManifest.xml添加android:windowSoftInputMode="adjustPan"
效果详见 >> bg02
bg02 效果不行，会导致页面出现更大的问题
尝试寻找背景图 id，查看源码

<ImageView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/bg_chat"/>

嵌套ScrollView后代码如下

<ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="@drawable/bg_chat"/>
</ScrollView>

效果详见 >> bg03/bg04
解决的问题 >> 弹起键盘时背景图被压缩
存在的问题 >> 键盘收起时背景显示不全，产品不能接受
再次尝试把背景图居中后，代码如下

<ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="center_vertical"
          android:background="@drawable/bg_chat"/>
</ScrollView>

效果详见 >> bg05
再次尝试产品还是不能接受，背景图上下边距太窄
最后尝试把背景图原比例缩小为原来的 90%，效果详见 >> bg06
问题得到最大改善，此时向技术反馈我的研究成果

技术方案：

技术查看微信布局得知微信采用FrameLayout实现
布局代码

<FrameLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
          android:id="@+id/imgv_background"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="@drawable/bg_chat"/>
</FrameLayout>

主要代码（更新背景图高度）

view.getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener);
ViewTreeObserver.OnGlobalLayoutListener onGlobalLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            new Handler().post(new Runnable() {
                public void run() {
                    if(!isGetBgHeight){
                        isGetBgHeight = true;
                        int height = rlyt_chat.getHeight();
                        imgv_background.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,height));
                    }
                }
            });
        }
};

效果详见 >> bg07/bg08

流程回顾：发现此 Bug >> 提交 Bug >> 技术反映暂不修复 >> 产品也发现此 Bug >> 产品反馈 >> 测试回复暂不处理 >> 产品不能接受 >> 着手排查问题 >> 问题得到最大改善 >> 技术眼前一亮（你是怎么做到的）>> 推进技术再次修复 >> 技术查看相关资料（微信/ScrollView 源码）>> 尝试修复 >> 修复成功 >> 测试通过 >> 产品满意 >> Over
经验分享：
- 开发 >> 遇到问题不要怕麻烦，问题肯定有攻克的那一刻
- 测试 >> 不轻易相信技术的说辞，可以尝试去排查问题/解决问题
个人见解：
- 产生问题原理：
  - 背景图不具备滑动属性，所以键盘顶上来时背景图被压缩
  - 虽然ImageView具备android:scrollbars=xxx属性，但是不配合ScrollView使用，还是被压缩了
  - 修复方向：向ScrollView方向探索
- 修复问题原理：
  - 查看源码发现ScrollView继承自FrameLayout布局
```
public class ScrollView extends FrameLayout
```
  - FrameLayout布局属于层级关系，适合背景图场景，且查看微信布局，皆是该布局
  - 当键盘顶上来时获取与FrameLayout布局同宽高的布局可见高度（或其本身高度，这里没给帧布局加 id，所以获取其同级宽高布局的高度），更新背景图的现有高度，从而达到不被压缩的效果
  - 当键盘隐藏时，同样获取布局可见高度，更新背景图高度，从而达到整张背景图显现出来的效果
相关截图：