iOS——配适深色模式

适配深色模式

苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了，就是适配深色模式。

首先，所有 UIKit 本身所提供的 UI 控件(例如 UIView，UILabel，UITextView等等) ，只要没有针对颜色等内容特殊设置过，都会自动适配深色模式，这部分是我们开发者不需要去关心的。

在适配深色模式的过程中，作为开发者，我们其实只要解决俩个问题：

1、如何判断当前的系统的颜色模式？

2、我们应该对哪些UI的内容适配深色模式？

如何去判断当前系统的颜色模式？

我们所熟悉的 UIView 、UIViewController 、UIScreen、UIWindow 都已经遵从了一个叫UITraitEnvironment的协议。

这些类都拥有一个叫做 traitCollection 的属性，traitCollection里面有一个userInterfaceStyle属性，而颜色模式就是存在 userInterfaceStyle 中。

我们就可以通过traitCollection的userInterfaceStyle来判断当前系统的颜色模式。

我们应该对哪些UI的内容适配深色模式？

适配深色模式，我们主要关心就是颜色，图片，模糊效果。因为这三个方面比较容易和颜色进行绑定。

颜色

在iOS13以后，UIKit给我们提供了很多的动态颜色，以system开头的都是动态颜色，当我们给 UI 控件设置了动态颜色以后。

UI 控件就会自动的根据当前是否是黑暗模式展现出来对应的颜色。比如这样写：

self.view.backgroundColor = [UIColor systemRedColor];

（滑动显示更多）

当然，系统提供的这些动态颜色肯定是无法满足我们的实际开发需求，因此在实际开发中，我们可以创建我们自定义的动态颜色。

在 iOS 13 中， UIKit 为 UIColor 所提供的 新 API 来创建我们自己的动态颜色。

UIColor *color = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {            //深色模式下的颜色            return [UIColor blueColor];        }else {            //浅色模式下的颜色            return [UIColor purpleColor];        }    }];    self.view.backgroundColor = color;

（滑动显示更多）

除了这个API，我们还可以通过Xcode11的一个新功能，给xcassets中的颜色设置深色和浅色俩种表现形式。

使用方法：

self.view.backgroundColor = [UIColor colorNamed:@"testColor"];

（滑动显示更多）

图片

如果你想在普通模式和深色模式下展示不同的照片，那也可以利用xcassets 中图片新增的 Apperance 属性，分别设置两种模式下所使用到的图片:

模糊效果

模糊效果也就是我们常说的毛玻璃效果。那么在iOS7之前一般使用UIToolBar来做。

在iOS8之后，苹果新增了一个类

UIVisualEffectView

来专门实现这种模糊效果。代码也很简单。

UIBlurEffect*effect = [UIBlurEffecteffectWithStyle:UIBlurEffectStyleSystemMaterial];UIVisualEffectView*effectView = [[UIVisualEffectViewalloc] initWithEffect:effect];    effectView.frame =self.view.bounds;    [self.view addSubview:effectView];

（滑动显示更多）

在iOS13之后，UIKit也为我们提供了四种动态模糊样式：

UIBlurEffectStyleSystemChromeMaterial这种样式是用来指定运行在 macOS 上的 iPad 应用的边框颜色的

所以想要模糊效果适配深色模式直接以上四种动态模糊样式就可以了。

h5界面适配深色模式

如果工程中有嵌套h5界面，那h5界面的内容可能也需要做深色模式的适配。

可以使用prefers-color-scheme来指定深色模式和浅色模式下的css样式。

如果我们希望某个单独的视图以一种固定的显示模式来显示的话，

我们可以通过setOverrideUserInterfaceStyle这个方法来设置视图的显示模式。

[self.view setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];

（滑动显示更多）

如果说我们希望某个界面以一种固定的的模式来显示的话，可以重写

overrideUserInterfaceStyle方法，返回一个固定的显示模式。

-(UIUserInterfaceStyle)overrideUserInterfaceStyle {    return UIUserInterfaceStyleDark;}

如果想让 App 都以一种固定的模式显示，只要在 Info.plist 文件中将 UIUserInterfaceStyle 设置为 Light 或 Dark 就可以了。