Android 如何實現灰白化換皮膚效果？

原因

清明期間不少客戶端都上了灰白皮膚的效果，那我們客戶端究竟如何實現黑白皮膚效果呢？本篇文章分享一種方式，讓大家在客戶端快速的進行黑白化換膚。

效果

彩色效果

灰白化後效果

需要基礎知識

有些知識不在文章當中闡述，不知道的同學可以自行Google，百度後再看。

如下：kotlin，Activity 的生命週期，viewBinding。

View 如何變灰白化？

1、碰到這種情況，肯定我們要自定義View將他畫出來了。然後我們操作Paint畫就行了。

2、那我們如何自定義View畫呢？有個類叫ColorMatrix，我們將他setSaturation(0f)，用獲得的對象再給ColorMatrixColorFilter，對Paint當中的colorFilter進行賦值就可以了。最後用這個Paint畫就可以了。實現代碼如下：

private val paint = Paint().apply {
       ColorMatrix().apply {
            setSaturation(0f)
        }.let {
           colorFilter = ColorMatrixColorFilter(it)
       }
}

Activity 如何變爲灰白皮膚的呢？

如上操作後，我們已經知道了自定義View進行灰白化？

那我們怎麼對一個Acitivity 進行灰白化呢？

不可能每一個View都去自定義View？

其實一個Activity的產出是有層級的View Three。不知道的同學可以打開Android Studio -> Tools -> Layout Inspector。如下

經過分析，我們寫的佈局是在ContentFrameLayout下面，因此只要我們替換了ContentFrameLayout，根據View的繪製原理，我們就可以對該佈局下的所有View的Paint進行修改了。

那我們如何替換ContentFrameLayout，請回到 Activity 的生命週期，有個方法叫 onCreateView。代碼如下，我們把ContentFrameLayout替換成我們的GrayWhiteSkinFrameLayout。

那我們GrayWhiteSkinFrameLayout類裏做了什麼呢？代碼如下

app 如何全部變爲灰白皮膚的呢？

實現父類的BaseActivity，子類繼承就可以了，具體如下。

##Flutter 如何變灰白皮膚的呢？
道理都是一樣的，Flutter也是有層級的。我們只需要在最外層的Widget的Build 複寫如下代碼就好了。

@override
Widget build(BuildContext context) {
  return ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
      child: Scaffold(
        appBar: _appBar,
        body: IndexedStack(
          index: _currIndex,
          children: <Widget>[HomeItemPage(), WidgetPage(), MyPage()],
        ),
        backgroundColor: Theme.of(context).backgroundColor,
        bottomNavigationBar: _buildBottomNavigationBar(context),
      ));
}

demo 地址，歡迎點star：https://github.com/YuriyPikachu/GrayWhiteSkinApp

瞭解更多，歡迎關注：

• 博客：https://YuriyPikachu.github.io
• github：https://github.com/YuriyPikachu
• QQ技術交流羣：389274438
• csdn：https://blog.csdn.net/pjingying
• 知乎：YuriyPikachu
• 簡書：YuriyPikachu
• 郵箱：[email protected]
• 頭條：Android開發加油站
• 公衆號：Android開發加油站