iOS暗黑模式适配

3,853 阅读2分钟

iOS暗黑模式适配一

前言

苹果在iOS13就推出了暗黑模式,目前系统版本都iOS15以上了,一直没去做一个简单的了解,项目中也没有任何适配的想法,以下是自己对暗黑模式的适配做一个简单了解的过程。

系统的主题有苹果自身提供的API,还是很容易就完成暗黑模式的适配。

1.Assets里面图片的适配:

选中图片,右侧Appearances默认选项是None,如果适配暗黑模式,选择Any, Dark模式,可以添加暗黑模式主题下的背景图片.

image.png

图片的调用方式依然不变,会自动适配系统主题。

/// UIButton
[self.navigationView.navigationBackButton setImage:[UIImage imageNamed:@"navBackBtnBlack"] forState:UIControlStateNormal];

/// UIImageView
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"navBackBtnBlack"];
2. 背景图片的适配

苹果在iOS13后提供了获取系统主题状态的方法。

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

我们可以写个颜色分类或者写个单例去管理颜色的状态。

eg:

/// UIColor (Dark)分类管理
/// 导航栏背景色
+ (UIColor *)navigationBackgroundColor {
    if (@available(iOS 13.0, *)) {
        return [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                return [UIColor blackColor];
            } else {
                return [UIColor whiteColor];
            }
        }];
    }
    return [UIColor whiteColor];
}

在项目中我们通过调用

/// 笔者这是隐藏了系统导航栏,自定义了导航栏View,因此可以直接设置导航View的背景颜色。
self.navigationBackView.backgroundColor = [UIColor navigationBackgroundColor];

在设置切换了主题之后,项目内的背景颜色和图片均会改变.

总结

以上即可适配iOS13以上的暗黑模式了。但是这样配置,项目的主题色是和系统所关联的,无法自己在应用中去设置亮色或者深色模式。因此,一般我们会在设置中增加颜色主题配置选项。

iOS暗黑模式适配二

前言

项目中不同主题的切换,刚开始的适配方案选择,是自己通过颜色分类,然后本地控制去管理,发现这样既耗时代码又非常乱,借鉴GitHub上的项目方案,找到了LEE大佬的项目。

项目内主题切换

借助LEE的实现方式,项目内切换背景色、导航栏。都是非常方便的。

eg:

1. 在项目内处理控制器背景色、状态栏管理切换

image.png

2. 处理导航栏背景色切换,因为笔者的导航栏是隐藏系统导航,自定义了导航栏View,因此切换非常方便

导航栏背景View image.png

导航栏按钮

image.png

3. iOS15以上及以下 UITabBar的背景色管理

image.png

image.png

4. 设置里面去管理主题

image.png

跟随系统的时候,判断系统的主题是亮色还是深色,然后去设置对应的.lee主题模式 image.png

总结

项目里面代码主要就一个UITableview,有兴趣查看的可以去了解一下,demo地址

主题切换代码实现方式是LEE大佬的实现 GitHub