iOS 实现app黑白模式

1问题思考

2020的是被疫情覆盖的一年,在国内疫情得到控制之后,全国在4.4日举行了疫情哀悼纪念,而互联网的产物在那天也做出了很多默契的配合,比如说很多网站暂停运营一天,很多app网页的UI变成了黑白模式,那天我刷了一整天的手机看到的画面全是黑白的,第二天又调整为正常了.作为一个iOS开发,我思考如何才能更好的达到这种黑白与彩色之前的切换,想了以下几种思路:

  • 1.iOS内置黑白开关
  • 2.动态配置,文字颜色和图片在当天通过服务端下发,修改成黑白色,这需要比较大的工作量
  • 3.UIColor相关方法捕获,图片滤镜

通过查询资料,未找到方式1相关的api,iOS设备自身有个功能叫颜色反转,有兴趣的可以去打开该功能看看,我在想这其实和实现黑白模式的原理是一样的,但是苹果未开放相关api

方式2看起来可行,我觉得一些app等在那天就是采用了这样的方式来实现的黑白化,因为app里的内容不是说有的都改成了黑白,只有部分图片或者页面改成了黑白模式,但是工作量有点太大了,而且不够灵活

方式3我认为是比较可靠可行的,于是我按照方式3的思路实现了UIColor及图片的黑白化

2功能实现

首先贴上一张没有开启黑白化的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 {
    //关键方法交换
    [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权重调整,防止出现,1 0 0 、0 1 0,0 0 1同样的结果
        //0.2126,0.7152,0.0722 这三个是根据人眼对r,g,b三个颜色面感的强弱算出来的
        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 导航栏的返回文字颜色的Class类型是属于UIDynamicSystemColor,其也属于UIColor的子类
    image.png

    捕获该类的实力方法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];
}

在该方法中我们可以捕获到系统预设的systemColor,如果想知道到底有哪些systemColor,可以通过[UIColor systemBlueColor];点击前往分类@interface UIColor (UIColorSystemColors)中,这里系统提供了许多预设的systemColor,这些方法与initWithName:colorsByThemeKey:中的name一致,所以我们拦截了所有的systemBlueColor方法,直接采用BlueColor返回,而BlueColor我们在前面也做过了拦截处理,这样就达到了统一处理,如果还有其他name类型的systemColor,可以采取同样的处理方式,或者我们可以将需要捕获的systemColor的name通过服务端下发,同时下发对应的r、g、b、a值,然后调用[UIColor colorWithRed:r green:g blue:b alpha:a]这样更加灵活

另外 有人指出该hook方法在xcode 11.6会造成crash,我在升级后也尝试了果然这样,可能系统对于gl_initWithName:colorsByThemeKey:有比较特殊的处理,通过捕获UIDynamicSystemColor其属性(结果没有)和方法,暂时没有排查到原因,所以放弃hook 该私有方法,我们可以hook [UIColor systemBlueColor]方法,来替换系统的蓝色,比如默认的导航栏返回按钮颜色

  • 颜色2 和 颜色3都是通过自己去设置的颜色,自定义颜色方法比较有限,我总结并捕获了所有的Color类方法,即使有些第三方库识别16进制,但是最终调用的还是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权重调整,防止出现,1 0 0 、0 1 0,0 0 1同样的结果
        //0.2126,0.7152,0.0722 这三个是根据人眼对r,g,b三个颜色面感的强弱算出来的
        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里的图片控件都会采用UIImageView,这里我只是正对UIImageView进行了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滤镜实现,我们看下黑白单色两种滤镜

image.png

image.png

效果差不多,但是在图片色彩丰富的图片上,个人认为Mono会比Noir效果好看点

至此,我们可以通过服务器来灵活配置关键参数monochromatic,开启或者关闭黑白化功能,实现app基本全面黑白化
demo参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242