我司Android App遇到的一个历史换肤问题

一时失言乱红尘 2022-11-19 11:29 186阅读 0赞

# 前言 #

我司`App`时常有人反映首页`ui`颜色和不协调，这个问题持续了很多个月，鄙人也找了很多资料一直百思不得其姐，直到某一天产品同学稳定复现了类似的问题。惨烈状况如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70]  
产品同学反馈打开某一网页再返回首页次问题必现。

我们的网页界面比较简单如下：

<?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:app="http://schemas.android.com/apk/res-auto">
    
      <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_main_content">
    
        <WebView
          android:id="@+id/webView"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/v_divider"
          android:visibility="invisible"
          android:background="@color/color_main_content" />
      </androidx.constraintlayout.widget.ConstraintLayout>
    </layout>

毫无亮点，应该不是问题的所在，查看逻辑代码：

fun init(){
        
     binding.webView.setBackgroundColor(0)
     binding.webView.background.alpha = 0
    }

然后同事注释`binding.webView.background.alpha = 0`发现问题解决。  
然后我们百思不得其解，这是两个不相关的界面为何影响到首页？于是乎看了主页的布局，根本没有设置背景色，背景色依赖于主题。

于是我测试了下改为绿色

发现主页背景色完全不受主题影响。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 1]  
继续翻阅代码原来是在decorView设置了背景色（当然笔者并不支持这种做法）：

override fun onCreate(savedInstanceState: Bundle?) {
        
        window.decorView.background = ContextCompat.getDrawable(this, R.drawable.stock_detail_screen)
    }

网页Webview设置背景色有神马关联？两个毫不相关概念，持续了几个小时也没发现结果，不过倒是发现下面的更叫邪乎奇迹的事情

fun init(){
        
     //加上一句也可以解决ColorDrawable(Color.TRANSPARENT)
     binding.webView.background = ColorDrawable(Color.TRANSPARENT)
     binding.webView.setBackgroundColor(0)
     binding.webView.background.alpha = 0
    }

更加云里雾里，难道我只能解决问题，不能找到根本问题？同事说Webview的没有源码，根本没有跟源码调试，这种黑箱测试很麻烦。  
于是想着我去下载内核`Webview`的`Apk`逆向看看他们设置背景色的时候做了什么。于是查看必现的问题的手机`Webview`内核版本.  
发现哭笑不得，华为使用自研的？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 2]  
于是从手机提取出apk文件。  
![在这里插入图片描述][20210116215043573.png]  
开始瞻仰大中华第一的手机厂技术：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 3]  
看来是用了chromium内核，看下`WebViewChromium`,直接看门面类把`WebViewChromium.java`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 5]

大致看了下，好像跟View的背景色没有关系，但是在里面还是引用了`android.webkit.WebView`,在里面又翻了下没找到这个类，这个类也不能混淆，所以应该不在这里，最后发现找错地方了。

最后在google仓库找到：  
`https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/webkit/WebView.java`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 6]  
继续跟下去= =我草，设置背景色和普通的view是一样的。所以差点气死浪费时间了。

最终放弃吃饭了。。。然后回头想想了是不是改了`web`的背景`Drawable`和主界面的`Drawble`是同一对象，所以改变引起联动。

override fun onCreate(savedInstanceState: Bundle?) {
        
        window.decorView.background = ContextCompat.getDrawable(this, R.drawable.stock_detail_screen)
        Timber.e("main background ${
          window.decorView.background}")
    }

fun init(){
        
        binding.webView.setBackgroundColor(0)
        binding.webView.background.alpha = 0
        Timber.e("webview background ${
          binding.webView.background} ")
    }

结果：  
当然不是同一个对象。。。

main background android.graphics.drawable.LayerDrawable@b4b616f
    webview background android.graphics.drawable.ColorDrawable@ccfd80e

瞬间找不到方向。于是大胆的猜测主页面的背景色是不是还在，只是也跟着透明度变化了

override fun onResume() {
        
        super.onResume()
        Timber.d("main background alpha ${
          window.decorView.background.alpha}")
    }

fun init(){
        
    	binding.webView.setBackgroundColor(0)
        binding.webView.background.alpha = 255 / 2
        Timber.e("webview background ${
          binding.webView.background} ")
        Timber.e("webview background alpha ${
          binding.webView.background.alpha} ")
    }

结果发现果然主页面的背景色其实还在，只是透明度跟着变化了。

//未改变透明的主界面信息
    background: android.graphics.drawable.LayerDrawable@a628434 alph 255
    //改变后
    webview background alpha 126 
     background: android.graphics.drawable.LayerDrawable@a628434 alph 126

于是干脆看下`ColorDrawble`的`setAlpha`，最后的方案如果这都找不到那就算了，反正都快一年的问题了。

//ColorDrawble
    @Override
        public void setAlpha(int alpha) {
        
            alpha += alpha >> 7;   // make it 0..256
            final int baseAlpha = mColorState.mBaseColor >>> 24;
            final int useAlpha = baseAlpha * alpha >> 8;
            final int useColor = (mColorState.mBaseColor << 8 >>> 8) | (useAlpha << 24);
            if (mColorState.mUseColor != useColor) {
        
                mColorState.mUseColor = useColor;
                invalidateSelf();
            }
        }

看着`invalidateSelf()`看着很可疑，于是跟着看了一个小时，后来发现无果毛线都没有关系。

`mColorState`简单看了下，注释都没有

final static class ColorState extends ConstantState {
        
     }

最后看了下眼父类

/**
         * This abstract class is used by {@link Drawable}s to store shared constant state and data
         * between Drawables. {@link BitmapDrawable}s created from the same resource will for instance
         * share a unique bitmap stored in their ConstantState.
         *
         * <p>
         * {@link #newDrawable(Resources)} can be used as a factory to create new Drawable instances
         * from this ConstantState.
         * </p>
         *
         * Use {@link Drawable#getConstantState()} to retrieve the ConstantState of a Drawable. Calling
         * {@link Drawable#mutate()} on a Drawable should typically create a new ConstantState for that
         * Drawable.
         */
        public static abstract class ConstantState {
        
        }

我在注释看到这个类会被同一资源的Drawble共享状态，调用`mutable`即可禁止共享状态。我好像明白了什么东西于是乎断点看了这两个`Drawble`的`ConstantState`对象(一个WebView的背景色和主页面decorview的背景色)。

最后发现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 8]

状态类是用一个对象，所以解决方案按照注释所说即可。

fun init(){
        
    	//不共享状态
       binding.webView.background.mutate()
        binding.webView.setBackgroundColor(0)
        binding.webView.background.alpha = 255 / 2
        
    }

最后看下mutate方法

//ColorDrawable.java
    
     public Drawable mutate() {
        
            if (!mMutated && super.mutate() == this) {
        
            	//构建一个新对象即可
                mColorState = new ColorState(mColorState);
                mMutated = true;
            }
            return this;
        }

## 小Demo ##

这个Demo可以客观的反映了我司遇到的问题

<?xml version="1.0" encoding="utf-8"?>
    <androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:orientation="vertical"
        >
     
      <TextView
          android:background="@color/color_yellow_for_test"
          android:text="占位"
          android:gravity="center"
          android:id="@+id/tv"
          android:layout_width="match_parent"
          android:layout_height="40dp"
          />
      <Button
          android:layout_width="match_parent"
          android:text="改变自身的背景色"
          android:id="@+id/btn"
          android:layout_height="wrap_content"
          />
    
    </androidx.appcompat.widget.LinearLayoutCompat>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 9]

class MainActivity : AppCompatActivity() {
        
        private val TAG = "MainActivity"
        override fun onCreate(savedInstanceState: Bundle?) {
        
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            val btn = findViewById<Button>(R.id.btn)
            val tv = findViewById<TextView>(R.id.tv)
    
            //点击改变共享状态的view视图背景drawable
            btn.setOnClickListener {
        
                val drawable = resources.getDrawable(R.color.color_yellow_for_test)
                drawable.alpha = 0
                tv.invalidate()
    
            }
    
        }
    }

点击后改变一个不相关的`Drwable`却改变的另一个视图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70]: /images/20221119/8fe0d409c9684d189ed178e3143afcb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 1]: /images/20221119/a0e34b14655a4a30931c4247d3c1fcc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 2]: /images/20221119/5f7088082e294279867a892ccf270271.png
[20210116215043573.png]: /images/20221119/d20b3f7964274c62b6c7d1d1c0a24e28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 3]: /images/20221119/6d25fefeb8de48beb85827b7dbdd5c28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 4]: /images/20221119/df168871a5a34904a3f144878d1ac1f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 5]: /images/20221119/24d8b1b7e2494a28915d8e509c7f70fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 6]: /images/20221119/280ceb037a9a4014b4c7679cf81c1431.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 7]: /images/20221119/003ba6022c9d428f9deaf756d3035c50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 8]: /images/20221119/1566335728ac4d2e87bddf8eceaa2233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 9]: /images/20221119/c5464d0e3a414dba804cb30bf484ee64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 10]: /images/20221119/184d64a700bb435ebcf4298c58f424a6.png