iOS 實(shí)現(xiàn)app黑白模式

1問題思考

2020的是被疫情覆蓋的一年,在國(guó)內(nèi)疫情得到控制之后,全國(guó)在4.4日舉行了疫情哀悼紀(jì)念,而互聯(lián)網(wǎng)的產(chǎn)物在那天也做出了很多默契的配合,比如說很多網(wǎng)站暫停運(yùn)營(yíng)一天,很多app網(wǎng)頁的UI變成了黑白模式,那天我刷了一整天的手機(jī)看到的畫面全是黑白的,第二天又調(diào)整為正常了.作為一個(gè)iOS開發(fā),我思考如何才能更好的達(dá)到這種黑白與彩色之前的切換,想了以下幾種思路:

  • 1.iOS內(nèi)置黑白開關(guān)
  • 2.動(dòng)態(tài)配置,文字顏色和圖片在當(dāng)天通過服務(wù)端下發(fā),修改成黑白色,這需要比較大的工作量
  • 3.UIColor相關(guān)方法捕獲,圖片濾鏡

通過查詢資料,未找到方式1相關(guān)的api,iOS設(shè)備自身有個(gè)功能叫顏色反轉(zhuǎn),有興趣的可以去打開該功能看看,我在想這其實(shí)和實(shí)現(xiàn)黑白模式的原理是一樣的,但是蘋果未開放相關(guān)api

方式2看起來可行,我覺得一些app等在那天就是采用了這樣的方式來實(shí)現(xiàn)的黑白化,因?yàn)閍pp里的內(nèi)容不是說有的都改成了黑白,只有部分圖片或者頁面改成了黑白模式,但是工作量有點(diǎn)太大了,而且不夠靈活

方式3我認(rèn)為是比較可靠可行的,于是我按照方式3的思路實(shí)現(xiàn)了UIColor及圖片的黑白化

2功能實(shí)現(xiàn)

首先貼上一張沒有開啟黑白化的page原圖,可以看到圖片,color都是正常的


image.png

2.1UIColor黑白化

UIColor方法捕捉

#import "UIColor+Common.h"
#import <YLT_BaseLib/NSObject+YLT_Extension.h>
#import <Aspects.h>

//是否黑白化,1表示開啟
#define monochromatic 1

@implementation UIColor (Common)

+ (void)load {
    //關(guān)鍵方法交換
    [UIColor ylt_swizzleClassMethod:@selector(gl_colorWithRed:green:blue:alpha:) withMethod:@selector(colorWithRed:green:blue:alpha:)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_blackColor) withMethod:@selector(blackColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_darkGrayColor) withMethod:@selector(darkGrayColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_lightGrayColor) withMethod:@selector(lightGrayColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_whiteColor) withMethod:@selector(whiteColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_grayColor) withMethod:@selector(grayColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_redColor) withMethod:@selector(redColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_greenColor) withMethod:@selector(greenColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_blueColor) withMethod:@selector(blueColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_cyanColor) withMethod:@selector(cyanColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_yellowColor) withMethod:@selector(yellowColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_magentaColor) withMethod:@selector(magentaColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_orangeColor) withMethod:@selector(orangeColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_purpleColor) withMethod:@selector(purpleColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_brownColor) withMethod:@selector(brownColor)];
    [UIColor ylt_swizzleClassMethod:@selector(gl_colorWithWhite:alpha:) withMethod:@selector(colorWithWhite:alpha:)];
    Class cls = NSClassFromString(@"UIDynamicSystemColor");
    [cls ylt_swizzleInstanceMethod:NSSelectorFromString(@"initWithName:colorsByThemeKey:") withMethod:@selector(gl_initWithName:colorsByThemeKey:)];
}

- (id)gl_initWithName:(id)name colorsByThemeKey:(id)key {
//    NSLog(@"name=%@  key =%@ ",name,key);
    if (monochromatic == 1) {
        if ([name isEqualToString:@"systemBlueColor"]) {
//                [UIColor systemBlueColor];
            return [UIColor blueColor];
        }
    }
   return [self gl_initWithName:name colorsByThemeKey:key];
}

+ (UIColor *)gl_colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha {
    //如果是單色模式(黑白模式),則平均r攻冷、g喘沿、b值
    if (monochromatic == 1) {
        //r,g,b權(quán)重調(diào)整,防止出現(xiàn),1 0 0 涡戳、0 1 0,0 0 1同樣的結(jié)果
        //0.2126,0.7152冶共,0.0722 這三個(gè)是根據(jù)人眼對(duì)r,g,b三個(gè)顏色面感的強(qiáng)弱算出來的
        CGFloat brightness = (red * 0.2126 + 0.7152 * green + 0.0722 * blue);
//        CGFloat brightness = (red + green + blue) / 3.f;
        return [self gl_colorWithRed:brightness green:brightness blue:brightness alpha:alpha];
    }
    return [self gl_colorWithRed:red green:green blue:blue alpha:alpha];
}

+ (UIColor *)gl_colorWithWhite:(CGFloat)white alpha:(CGFloat)alpha {
    return [self colorWithRed:white green:white blue:white alpha:1];
}

+ (UIColor *)gl_blackColor {
    return [self colorWithWhite:0 alpha:1];
}

+ (UIColor *)gl_darkGrayColor {
    return [self colorWithWhite:0.333 alpha:1];
}

+ (UIColor *)gl_lightGrayColor {
    return [self colorWithWhite:0.667 alpha:1];
}

+ (UIColor *)gl_whiteColor {
    return [self colorWithWhite:1 alpha:1];
}

+ (UIColor *)gl_grayColor {
    return [self colorWithWhite:0.5 alpha:1];
}

+ (UIColor *)gl_redColor {
    return [self colorWithRed:1 green:0 blue:0 alpha:1];
}

+ (UIColor *)gl_greenColor {
    return [self colorWithRed:0 green:1 blue:0 alpha:1];
}
+ (UIColor *)gl_blueColor {
    return [self colorWithRed:0 green:0 blue:1 alpha:1];
}
+ (UIColor *)gl_cyanColor {
    return [self colorWithRed:0 green:1 blue:1 alpha:1];
}
+ (UIColor *)gl_yellowColor {
    return [self colorWithRed:1 green:1 blue:0 alpha:1];
}
+ (UIColor *)gl_magentaColor {
    return [self colorWithRed:1 green:0 blue:1 alpha:1];
}
+ (UIColor *)gl_orangeColor {
    return [self colorWithRed:1 green:0.5 blue:0 alpha:1];
}
+ (UIColor *)gl_purpleColor {
    return [self colorWithRed:0.5 green:0 blue:0.5 alpha:1];
}
+ (UIColor *)gl_brownColor {
    return [self colorWithRed:0.6 green:0.4 blue:0.2 alpha:1];
}

@end


我們注意以下這3處的顏色變化

image.png

  • 顏色1 導(dǎo)航欄的返回文字顏色的Class類型是屬于UIDynamicSystemColor,其也屬于UIColor的子類
    image.png

    捕獲該類的實(shí)力方法initWithName:colorsByThemeKey:
[cls ylt_swizzleInstanceMethod:NSSelectorFromString(@"initWithName:colorsByThemeKey:") withMethod:@selector(gl_initWithName:colorsByThemeKey:)];

- (id)gl_initWithName:(id)name colorsByThemeKey:(id)key {
    NSLog(@"name=%@  key =%@ ",name,key);
    if (monochromatic == 1) {
        if ([name isEqualToString:@"systemBlueColor"]) {
            //    [UIColor systemBlueColor];
            return [UIColor blueColor];
        }
    }
   return [self gl_initWithName:name colorsByThemeKey:key];
}

在該方法中我們可以捕獲到系統(tǒng)預(yù)設(shè)的systemColor,如果想知道到底有哪些systemColor,可以通過[UIColor systemBlueColor];點(diǎn)擊前往分類@interface UIColor (UIColorSystemColors)中,這里系統(tǒng)提供了許多預(yù)設(shè)的systemColor,這些方法與initWithName:colorsByThemeKey:中的name一致,所以我們攔截了所有的systemBlueColor方法,直接采用BlueColor返回,而BlueColor我們?cè)谇懊嬉沧鲞^了攔截處理,這樣就達(dá)到了統(tǒng)一處理,如果還有其他name類型的systemColor,可以采取同樣的處理方式,或者我們可以將需要捕獲的systemColor的name通過服務(wù)端下發(fā),同時(shí)下發(fā)對(duì)應(yīng)的r、g责球、b滤馍、a值,然后調(diào)用[UIColor colorWithRed:r green:g blue:b alpha:a]這樣更加靈活

另外 有人指出該hook方法在xcode 11.6會(huì)造成crash,我在升級(jí)后也嘗試了果然這樣配乓,可能系統(tǒng)對(duì)于gl_initWithName:colorsByThemeKey:有比較特殊的處理仿滔,通過捕獲UIDynamicSystemColor其屬性(結(jié)果沒有)和方法,暫時(shí)沒有排查到原因犹芹,所以放棄hook 該私有方法崎页,我們可以hook [UIColor systemBlueColor]方法,來替換系統(tǒng)的藍(lán)色羽莺,比如默認(rèn)的導(dǎo)航欄返回按鈕顏色

  • 顏色2 和 顏色3都是通過自己去設(shè)置的顏色,自定義顏色方法比較有限,我總結(jié)并捕獲了所有的Color類方法,即使有些第三方庫(kù)識(shí)別16進(jìn)制,但是最終調(diào)用的還是colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha,
    最終我們把所有顏色的攔截都流入到了下面swizzle method方法中
+ (UIColor *)gl_colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha {
    //如果是單色模式(黑白模式),則平均r实昨、g、b值
    if (monochromatic == 1) {
        //r,g,b權(quán)重調(diào)整,防止出現(xiàn),1 0 0 盐固、0 1 0,0 0 1同樣的結(jié)果
        //0.2126荒给,0.7152,0.0722 這三個(gè)是根據(jù)人眼對(duì)r,g,b三個(gè)顏色面感的強(qiáng)弱算出來的
        CGFloat brightness = (red * 0.2126 + 0.7152 * green + 0.0722 * blue);
//        CGFloat brightness = (red + green + blue) / 3.f;
        return [self gl_colorWithRed:brightness green:brightness blue:brightness alpha:alpha];
    }
    return [self gl_colorWithRed:red green:green blue:blue alpha:alpha];
}

2.2UIImage黑白化

通常情況下,我們的app里的圖片控件都會(huì)采用UIImageView,這里我只是正對(duì)UIImageView進(jìn)行了setImage的hook,如果有其他情況,需要自己處理,掌握了此黑白化的技巧,其他的處理方式也差不多

//是否黑白化,1表示開啟
#define monochromatic 1

@implementation UIImageView (Common)

+ (void)load {
    [UIImageView ylt_swizzleInstanceMethod:@selector(gl_setImage:) withMethod:@selector(setImage:)];
}

- (void)gl_setImage:(UIImage *)image {
    if (monochromatic == 1) {
        [self gl_setImage:[self gl_grayImage:image]];
    } else {
        [self gl_setImage:image];
    }
}

- (UIImage *)gl_grayImage:(UIImage *)image {
    //濾鏡處理
    //CIPhotoEffectNoir黑白
    //CIPhotoEffectMono單色
    NSString *filterName = @"CIPhotoEffectNoir";
    CIFilter *filter = [CIFilter filterWithName:filterName];
    CIImage *inputImage = [[CIImage alloc] initWithImage:image];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    CGImageRef cgImage = [self.filterContext createCGImage:filter.outputImage fromRect:[inputImage extent]];
    UIImage *resultImg = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
    return resultImg;
}

- (CIContext *)filterContext {
    CIContext *con = objc_getAssociatedObject(self, @selector(filterContext));
    if (!con) {
        con = [[CIContext alloc] initWithOptions:nil];
        self.filterContext = con;
    }
    return con;
}

- (void)setFilterContext:(CIContext *)filterContext {
    objc_setAssociatedObject(self, @selector(filterContext), filterContext, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

@end

圖片的黑白化,我采用的是CIFilter濾鏡實(shí)現(xiàn),我們看下黑白單色兩種濾鏡

image.png

image.png

效果差不多,但是在圖片色彩豐富的圖片上,個(gè)人認(rèn)為Mono會(huì)比Noir效果好看點(diǎn)

至此,我們可以通過服務(wù)器來靈活配置關(guān)鍵參數(shù)monochromatic,開啟或者關(guān)閉黑白化功能,實(shí)現(xiàn)app基本全面黑白化
demo參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末刁卜,一起剝皮案震驚了整個(gè)濱河市志电,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛔趴,老刑警劉巖挑辆,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異孝情,居然都是意外死亡鱼蝉,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門箫荡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來魁亦,“玉大人,你說我怎么就攤上這事羔挡〗嗄危” “怎么了间唉?”我有些...
    開封第一講書人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)利术。 經(jīng)常有香客問我呈野,道長(zhǎng),這世上最難降的妖魔是什么印叁? 我笑而不...
    開封第一講書人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任被冒,我火速辦了婚禮,結(jié)果婚禮上喉钢,老公的妹妹穿的比我還像新娘姆打。我一直安慰自己,他們只是感情好肠虽,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開白布幔戏。 她就那樣靜靜地躺著,像睡著了一般税课。 火紅的嫁衣襯著肌膚如雪闲延。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評(píng)論 1 310
  • 那天韩玩,我揣著相機(jī)與錄音垒玲,去河邊找鬼。 笑死找颓,一個(gè)胖子當(dāng)著我的面吹牛合愈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播击狮,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼佛析,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了彪蓬?” 一聲冷哼從身側(cè)響起寸莫,我...
    開封第一講書人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎档冬,沒想到半個(gè)月后膘茎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡酷誓,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年披坏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盐数。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刮萌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出娘扩,到底是詐尸還是另有隱情着茸,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布琐旁,位于F島的核電站涮阔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏灰殴。R本人自食惡果不足惜敬特,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牺陶。 院中可真熱鬧伟阔,春花似錦、人聲如沸掰伸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狮鸭。三九已至合搅,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間歧蕉,已是汗流浹背灾部。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留惯退,地道東北人赌髓。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像催跪,于是被迫代替她去往敵國(guó)和親锁蠕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359