iOS-适配深色模式

深色模式由来

在iOS13之后,苹果推出了手机深色模式,类似主题一样的存在,用户可以切换深色和浅色两种模式,对用户来说体验是爽了,但给我们开发者又带来了工作量,就是APP需要适配两种模式切换,那么接下来我们谈谈怎么适配两种模式呢。
首先,所有 UIKit 本身所提供的 UI 控件(例如 UIView,UILabel,UITextView等等) ,只要没有针对颜色等内容特殊设置过,都会自动适配深色模式,这部分是我们开发者不需要去关心的。
在适配深色模式的过程中,作为开发者,我们其实只要解决两个问题
1、如何判断当前的系统的颜色模式?
2、我们应该对哪些UI的内容适配深色模式?

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

我们所熟悉的 UIView 、UIViewController 、UIScreen、UIWindow 都已经遵从了一个叫UITraitEnvironment的协议。
这些类都拥有一个叫做 traitCollection 的属性,traitCollection里面有一个userInterfaceStyle属性,而颜色模式就是存在 userInterfaceStyle 中。
我们就可以通过traitCollection的userInterfaceStyle来判断当前系统的颜色模式。
复制代码

image.png

我们应该对哪些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中的颜色设置深色和浅色俩种表现形式。\

image.png
使用方法:
self.view.backgroundColor = [UIColor colorNamed:@"testColor"];

图片

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

image.png

模糊效果

模糊效果也就是我们常说的毛玻璃效果。那么在iOS7之前一般使用UIToolBar来做。
在iOS8之后,苹果新增了一个类
UIVisualEffectView
来专门实现这种模糊效果。代码也很简单。

复制代码

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

image.png
UIBlurEffectStyleSystemChromeMaterial这种样式是用来指定运行在 macOS 上的 iPad 应用的边框颜色的
所以想要模糊效果适配深色模式直接以上四种动态模糊样式就可以了.

h5界面适配深色模式

如果工程中有嵌套h5界面,那h5界面的内容可能也需要做深色模式的适配。
可以使用prefers-color-scheme来指定深色模式和浅色模式下的css样式。

image.png
如果我们希望某个单独的视图以一种固定的显示模式来显示的话,
我们可以通过setOverrideUserInterfaceStyle这个方法来设置视图的显示模式。
[self.view setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];
如果说我们希望某个界面以一种固定的的模式来显示的话,可以在BaseViewController初始化这个style,也可以在子类中重写overrideUserInterfaceStyle方法,返回一个固定的显示模式。
-(UIUserInterfaceStyle)overrideUserInterfaceStyle { return UIUserInterfaceStyleDark; }
如果想让 App 都以一种固定的模式显示,只要在 Info.plist 文件中将 UIUserInterfaceStyle 设置为 LightDark 就可以了。
以上内容都是通过逻辑iOS技术号进行转载和学习。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享