Android App 的“黑白化”，有一行代码实现的方案吗？

前言

清明节是中国传统的节日。去年的这一天，不少 网站、App 都通过黑白化，表达了深切的哀悼。

当然，在这里我们只谈技术——Android App 黑白化实现探索。

今天和大家分享的是鸿洋大佬的实现方案。

原文地址：鸿洋

掌握了这个方法，清明节换个黑白，国庆节换个大红……翻身产品经理，紧跟党的领导，实现中国梦都不在话下！

正文

在当天，鸿洋也给 wanandroid.com上线了黑白化效果:

大家可能做 app 比较多，网页端全站实现这一的效果，只需要一句话：

html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

只要给 html 加一句css 样式就可以了，你可以理解为给整个页面添加了一个灰度效果。

就完成了，真的很方便。

回头看 app，大家都觉得开发起来比较麻烦，大家普遍的思路就是：

• 换肤；

• 展现 server 下发的图片，还需要单独做灰度处理；

这么看起来工作量还是很大的。

后来我就在思考，既然 web 端可以这么给整个页面加一个灰度的效果，我们 app 应该也可以呀？

那我们如何给app页面加一个灰度效果呢？

我们的 app 页面正常情况下，其实也是 Canvas 绘制出来的对吧？

Canvas 对应的相关 API 肯定也是支持灰度的。

那么是不是我们在控件绘制的时候，比如 draw 之前设置个灰度效果就可以呢？

好像发现了什么玄机。

1尝试给 ImageView 上个灰度效果

那么我们首先通过 ImageView 来验证一下灰度效果的可行性。

我们编写个自定义的 ImageView，叫做：GrayImageView

布局文件是这样的：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".TestActivity">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/logo">

    </ImageView>

    <com.imooc.imooc_wechat_app.view.GrayImageView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/logo" />

</LinearLayout>

很简单，我们放了一个 ImageView 用来做对比。

看下 GrayImageView 的代码：

public class GrayImageView extends AppCompatImageView {
    private Paint mPaint = new Paint();

    public GrayImageView(Context context, AttributeSet attrs) {
        super(context, attrs);

        ColorMatrix cm = new ColorMatrix();
        cm.setSaturation(0);
        mPaint.setColorFilter(new ColorMatrixColorFilter(cm));
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.saveLayer(null, mPaint, Canvas.ALL_SAVE_FLAG);
        super.draw(canvas);
        canvas.restore();
    }

}

在分析代码之前，我们看下效果图：

很完美，我们成功把 wanandroid图标搞成了灰色。

看一眼代码，代码非常简单，我们复写了draw 方法，在该方法中给canvas 做了一下特殊处理。

什么特殊处理呢？其实就是设置了一个灰度效果。

在 App中，我们对于颜色的处理很多时候会采用颜色矩阵，是一个4*5的矩阵，原理是这样的：

[ a, b, c, d, e,
    f, g, h, i, j,
    k, l, m, n, o,
    p, q, r, s, t ] 

应用到一个具体的颜色[R, G, B, A]上&#x