原因
清明期間不少客戶端都上了灰白皮膚的效果,那我們客戶端究竟如何實現黑白皮膚效果呢?本篇文章分享一種方式,讓大家在客戶端快速的進行黑白化換膚。
效果
彩色效果
灰白化後效果
需要基礎知識
有些知識不在文章當中闡述,不知道的同學可以自行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開發加油站