iOS DarkMode适配

iOS13中为我们带来了系统级别的暗黑模式。

而我们居然没能第一时间，系统全面的在我们项目中适配，实在是一大遗憾。

现在我们依然再等待相关UI标准的输出，但是在工程和代码层面，我们已经做好了准备。

下面，就让我们来熟悉一下怎么优雅又全面系统的适配DarkMode吧。

一、标准的制定

DarkMode的核心是颜色的制定。

我们需要将正常模式的颜色一一对应到DarkMode的颜色。

虽然核心是颜色，但是也牵扯到图片的转换，图片的本质也是色彩。

此部分工作，主要需要UI同学来制定。

一旦将我们的规则，或者标准制定完成，那么后续主要工作，主要精力依然在正常模式下。

通过转换规则，则可一一对应到暗黑模式下。

二、系统工程

UITraitCollection

在 iOS 13 中，我们可以通过 UITraitCollection 来判断当前系统的模式。UIView 和 UIViewController 、UIScreen、UIWindow 都已经遵从了UITraitEnvironment 这个协议，因此这些类都拥有一个叫做 traitCollection 的属性。

当DarkMode和正常模式来回切换的时候，会按照以下规则触发以下方法：

KDPfaQ.png

其中，核心的UIColor则会遵从以下方法：

[UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
                return lightColor;
            }else {
                return darkColor;
            }
        }];

而UIColor动态颜色block的调用有以下条件：

只有当UIColor对象赋值给相应的UIColor对象时，才会调用动态切换的block。

如：

UIColor *backColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
                return lightColor;
            }else {
                return darkColor;
            }
        }];
self.view.backgroundColor = backColor;

而，例如UIColor转换为CGColor，或者利用UIColor生成图片的方式，是无法通过UIColorDynamicProvider转换的。

对于系统配置来说，我们可以应用以下方法，来动态根据模式变化相关内容：

系统颜色 iOS13支持

在 iOS 13中，苹果引入了全新系统颜色，系统颜色是动态的，会根据当前系统是默认模式还是暗黑模式动态调整颜色。

苹果还提供了一组动态的灰度颜色。

KDP2qS.png

系统语义化颜色 iOS13支持

KDieJA.png

Assets 配置 iOS11支持

KDPWVg.png

通过Asset我们可以使用管理颜色，也可以管理图片，来达到动态切换。

三、我们的方案

根据系统的规则，并且结合我们的工程，我们需要进行以下的区分。

我们管理颜色全部使用代码来进行，尽量不使用Asset。

KDPcKf.png

我使用了以下三个类，来整体管理我们的UI效果。

YGUIMannger

@implementation YGUIManager
/// 目前是否是暗黑模式
+ (BOOL)isDarkMode {
    if (@available(iOS 13.0, *)) {
        return (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark);
    }
    return NO;
}

/// 会员金色渐变按钮
+ (UIButton *)vipGradientLayerBtn:(CGRect)frame {
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
    btn.frame = frame;
    [btn setTitleColor:RGB(0x784720) forState:UIControlStateNormal];
    btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    btn.layer.cornerRadius = CGRectGetHeight(frame)/2;

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = btn.bounds;
    gradient.startPoint = CGPointMake(0, 0.5);
    gradient.endPoint = CGPointMake(1, 0.5);
    gradient.colors = [NSArray arrayWithObjects:
                       (id)RGB(0xfcdeb4).CGColor,
                       (id)RGB(0xdaba87).CGColor, nil];
    gradient.cornerRadius = CGRectGetHeight(frame)/2;
    [btn.layer insertSublayer:gradient atIndex:0];
    return btn;
}

@end

此类主要用来书写统一控件，以及一些统一方法。

YGColor

@implementation YGColor
/// 适配暗黑模式得到颜色，项目中所有颜色必须通过此方法
+ (YGColor *)colorWithNormalColor:(UIColor *)normalColor darkColor:(UIColor *)darkColor {
    if (!normalColor) {
        normalColor = [UIColor whiteColor];
    }
    if (@available(iOS 13.0, *)) {
        if (!darkColor) {
            return (YGColor *)normalColor;
        }
        return (YGColor *)[UIColor colorWithDynamicProvider:^UIColor *_Nonnull (UITraitCollection *_Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                return darkColor;
            } else {
                return normalColor;
            }
        }];
    } else {
        return (YGColor *)normalColor;
    }
}

/// 适配暗黑模式下的渐变色
+ (YGColor *)colorWithGradientNormalColors:(NSArray *)gradientNormalColors gradientDarkColors:(NSArray *)gradientDarkColors {
    YGColor *color = [YGColor new];
    if (!IS_ARRAY(gradientNormalColors)) {
        gradientNormalColors = [NSArray arrayWithObject:[UIColor whiteColor]];
    }
    if (!IS_ARRAY(gradientDarkColors)) {
        gradientDarkColors = gradientNormalColors;
    }
    color.gradientNormalColors = gradientNormalColors;
    color.gradientDarkColors = gradientDarkColors;
    return color;
}

@end

此类，主要用来管理项目中所有的颜色。

目前主要有两个方法，一个单色，一个渐变色。

而，在此基础上，定义了两个Define，方便调用：

#define kYGAllColor(nColor,dColor) [YGColor colorWithNormalColor:nColor darkColor:dColor]

#define kYGAllGradientColor(nColors,dColors) [YGColor colorWithGradientNormalColors:nColors gradientDarkColors:dColors]

通过YGColor，可以创建项目中使用的所有动态色彩。

Category

@implementation UIView (YGUIManager)
+ (void)load {
    if (@available(iOS 13.0, *)) {
        static dispatch_once_t onceToken;
        dispatch_once(&onceToken, ^{
            Method presentM = class_getInstanceMethod(self.class, @selector(traitCollectionDidChange:));
            Method presentSwizzlingM = class_getInstanceMethod(self.class, @selector(dy_traitCollectionDidChange:));

            method_exchangeImplementations(presentM, presentSwizzlingM);
        });
    }
}

- (void)dy_traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    if (self.didChangeTraitCollection) {
        self.didChangeTraitCollection(self.traitCollection);
    }
    [self dy_traitCollectionDidChange:previousTraitCollection];
}

- (void)setDidChangeTraitCollection:(void (^)(UITraitCollection *))didChangeTraitCollection {
    objc_setAssociatedObject(self, @"YGViewDidChangeTraitCollection", didChangeTraitCollection, OBJC_ASSOCIATION_COPY_NONATOMIC);
}

- (void (^)(UITraitCollection *))didChangeTraitCollection {
    return objc_getAssociatedObject(self, @"YGViewDidChangeTraitCollection");
}

/// 适配暗黑模式layer的back颜色，项目中必须通过此方法
- (void)setLayerBackColor:(YGColor *)color {
    @yg_weakify(self);
    [self setLayerColor:color changeColor:^(CGColorRef layerColor) {
        @yg_strongify(self);
        self.layer.backgroundColor = layerColor;
    }];
}

/// 适配暗黑模式layer的Border颜色，项目中必须通过此方法
- (void)setLayerBorderColor:(YGColor *)color {
    @yg_weakify(self);
    [self setLayerColor:color changeColor:^(CGColorRef layerColor) {
        @yg_strongify(self);
        self.layer.borderColor = layerColor;
    }];
}

/// 适配暗黑模式layer的shadow颜色，项目中必须通过此方法
- (void)setLayerShadowColor:(YGColor *)color {
    @yg_weakify(self);
    [self setLayerColor:color changeColor:^(CGColorRef layerColor) {
        @yg_strongify(self);
        self.layer.shadowColor = layerColor;
    }];
}

/// color一定是包含暗黑模式的color
- (void)setLayerColor:(YGColor *)color changeColor:(void (^)(CGColorRef layerColor))changeColor {
    if (@available(iOS 13.0, *)) {
        if (changeColor) {
            changeColor([color resolvedColorWithTraitCollection:self.traitCollection].CGColor);
        }
        self.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            if (changeColor) {
                changeColor([color resolvedColorWithTraitCollection:traitCollection].CGColor);
            }
        };
    } else {
        // Fallback on earlier versions
        if (changeColor) {
            changeColor(color.CGColor);
        }
    }
}

/// color一定是包含暗黑模式的color
- (void)setGradientColor:(CAGradientLayer *)layer color:(YGColor *)color {
    if (@available(iOS 13.0, *)) {
        if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            layer.colors = color.gradientDarkColors;
        } else {
            layer.colors = color.gradientNormalColors;
        }
        self.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                layer.colors = color.gradientDarkColors;
            } else {
                layer.colors = color.gradientNormalColors;
            }
        };
    } else {
        layer.colors = color.gradientNormalColors;
    }
}

@end

@implementation UIImageView (YGUIManager)
/// 适配暗黑模式 使用路径生成的image
- (void)setImageWithNormalImagePath:(NSString *)normalImagePath darkImagePath:(NSString *)darkImagePath {
    if (!normalImagePath
        || [normalImagePath isEqualToString:@""]) {
        return;
    }
    UIImage *normalImage = [UIImage imageWithContentsOfFile:normalImagePath];
    if (@available(iOS 13.0, *)) {
        if (!darkImagePath
            || [darkImagePath isEqualToString:@""]) {
            darkImagePath = normalImagePath;
        }
        UIImage *darkImage = [UIImage imageWithContentsOfFile:darkImagePath];
        if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            self.image = darkImage;
        } else {
            self.image = normalImage;
        }

        // UIImageView不会走traitCollectionDidChange
        UIView *superView = self.superview;
        if ([superView isKindOfClass:[UIImageView class]]) {
            superView = superView.superview;
        }
        @yg_weakify(self);
        superView.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            @yg_strongify(self);
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                self.image = darkImage;
            } else {
                self.image = normalImage;
            }
        };
    } else {
        self.image = normalImage;
    }
}

/// 适配暗黑模式 使用颜色生成的image
- (void)setImageWithColor:(YGColor *)color {
    if (@available(iOS 13.0, *)) {
        self.image = [UIImage imageWithColor:[color resolvedColorWithTraitCollection:self.traitCollection]];
        // UIImageView不会走traitCollectionDidChange
        UIView *superView = self.superview;
        if ([superView isKindOfClass:[UIImageView class]]) {
            superView = superView.superview;
        }
        @yg_weakify(self);
        superView.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            @yg_strongify(self);
            self.image = [UIImage imageWithColor:[color resolvedColorWithTraitCollection:traitCollection]];
        };
    } else {
        self.image = [UIImage imageWithColor:color];
    }
}

@end

@implementation UIButton (YGUIManager)
/// 适配暗黑模式 使用路径生成的image
- (void)setImageWithNormalImagePath:(NSString *)normalImagePath darkImagePath:(NSString *)darkImagePath forState:(UIControlState)state {
    if (!normalImagePath
        || [normalImagePath isEqualToString:@""]) {
        return;
    }
    UIImage *normalImage = [UIImage imageWithContentsOfFile:normalImagePath];
    if (@available(iOS 13.0, *)) {
        if (!darkImagePath
            || [darkImagePath isEqualToString:@""]) {
            darkImagePath = normalImagePath;
        }
        UIImage *darkImage = [UIImage imageWithContentsOfFile:darkImagePath];
        if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            [self setImage:darkImage forState:state];
        } else {
            [self setImage:normalImage forState:state];
        }
        @yg_weakify(self);
        self.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            @yg_strongify(self);
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                [self setImage:darkImage forState:state];
            } else {
                [self setImage:normalImage forState:state];
            }
        };
    } else {
        [self setImage:normalImage forState:state];
    }
}

/// 适配暗黑模式 使用颜色生成的image
- (void)setImageWithColor:(YGColor *)color size:(CGSize)size forState:(UIControlState)state {
    if (@available(iOS 13.0, *)) {
        [self setImage:[UIImage imageWithColor:[color resolvedColorWithTraitCollection:self.traitCollection] size:size] forState:state];
        @yg_weakify(self);
        self.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            @yg_strongify(self);
            [self setImage:[UIImage imageWithColor:[color resolvedColorWithTraitCollection:traitCollection]] forState:state];
        };
    } else {
        [self setImage:[UIImage imageWithColor:color] forState:state];
    }
}

/// 适配暗黑模式 使用路径生成的image
- (void)setBackgroundImageWithNormalImagePath:(NSString *)normalImagePath darkImagePath:(NSString *)darkImagePath forState:(UIControlState)state {
    if (!normalImagePath
        || [normalImagePath isEqualToString:@""]) {
        return;
    }
    UIImage *normalImage = [UIImage imageWithContentsOfFile:normalImagePath];
    if (@available(iOS 13.0, *)) {
        if (!darkImagePath
            || [darkImagePath isEqualToString:@""]) {
            darkImagePath = normalImagePath;
        }
        UIImage *darkImage = [UIImage imageWithContentsOfFile:darkImagePath];
        if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            [self setBackgroundImage:darkImage forState:state];
        } else {
            [self setBackgroundImage:normalImage forState:state];
        }
        @yg_weakify(self);
        self.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            @yg_strongify(self);
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                [self setBackgroundImage:darkImage forState:state];
            } else {
                [self setBackgroundImage:normalImage forState:state];
            }
        };
    } else {
        [self setBackgroundImage:normalImage forState:state];
    }
}

/// 适配暗黑模式 使用颜色生成的image
- (void)setBackgroundImageWithColor:(YGColor *)color forState:(UIControlState)state {
    if (@available(iOS 13.0, *)) {
        [UIImage imageWithColor:[color resolvedColorWithTraitCollection:self.traitCollection] completion:^(UIImage *image) {
            [self setBackgroundImage:image forState:state];
        }];
        @yg_weakify(self);
        self.didChangeTraitCollection = ^(UITraitCollection *traitCollection) {
            @yg_strongify(self);
            [self setBackgroundImage:[UIImage imageWithColor:[color resolvedColorWithTraitCollection:traitCollection]] forState:state];
        };
    } else {
        [self setBackgroundImage:[UIImage imageWithColor:color] forState:state];
    }
}

@end

其中，我们使用了一个UIView的method swizzling，主要目的为将UIView切换DarkMode所调用的方法，转换为Block，方面外部调用。

主要处理，无法使用UIColor动态处理的情况。

而基于此方法，我们分别创建了：

  1. UIView
  2. UIImageView
  3. UIButton

的Category，用来处理无法跟随动态切换的情况。

而其中使用的Color，一定为YGColor，颜色永远通过YGColor管理。

否则，我们处理此种情况会非常麻烦，需要在每一个顶层View的traitCollectionDidChange来管理其subview的变换规则。

四、写在最后

相信通过以上方法，可以覆盖到我们APP中80%的情况，在标准一定的情况下，完全可以坐到代码规整并优雅的一键切换。

Let’s think!

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342