聊天背景被压缩问题

聊天背景被压缩问题

• 实际现象： 详见 >> 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，所以获取其同级宽高布局的高度），更新背景图的现有高度，从而达到不被压缩的效果
    • 当键盘隐藏时，同样获取布局可见高度，更新背景图高度，从而达到整张背景图显现出来的效果

• 相关截图：

bg01 >> 背景被压缩

bg02 >> 键盘弹起时背景图显示正常，但是标题栏及输入框有异常

bg03 >> 键盘弹起，背景图显示正常

bg04 >> 键盘收起，背景图显示不全

bg05 >> 键盘收起，背景图上下边距太窄

bg06 >> 键盘收起，背景图正常显示

bg07 >> 键盘弹起，背景图显示正常

bg08 >> 键盘收起，背景图显示正常