iOS适配深色DarkMode模式

JavaScript010

iOS适配深色DarkMode模式,第1张

Apple 为了适配深色模式对 UIKit 中的 UIColor 进行了重新定义,例如将 .red , .blue .yellow 定义为 .systemRed .systemBlue .systemYellow ,这些新定义的 System Colors 在深色和浅色模式下表现为不同的颜色,具体的色值可以见苹果的 官方文档 。

对于一些需要进行文字显示的控件 Apple 也做了深色模式的适配, Apple 新加了 Semantic Colors 颜色方案,使用 Semantic Colors 时不需要纠结具体的值,只需要在合适的场景使用,例如当控件是 Label 时,在没有自定义字体颜色时,可以使用 .label 类型的的 Semantic Colors ,在浅色模式下显示黑色字体,在深色模式下显示白色字体; Semantic Colors 包括 .label .separator .link .systemBackground .systemFill

对于系统适配的以上深色模式下的颜色可以使用 SemanticUI 这个App进行查看,该 App 给出了二种模式下的系统颜色的对比:

当然在实际开发中很多情况下我们都是需要自定义颜色的,有幸的是 Apple 也给出了相应的方案,那就是通过 UIColor.init(dynamicProvider: @escaping (UITraitCollection) ->UIColor) 这个方法进行创建自定义的 semantic color

自动 iOS11 开始,可以在 Asset Catalogs 保存自定义颜色,并支持 Interface Builder code 二种方式使用,自定义的 color 目前也支持深色模式。打开 Assets.xcassets ,店家左下角的 + 号按钮新增一个 Color Set ,在 Any Appearence (浅色模式)和 Dark Appearence (深色模式)分别添加一种颜色即可。

Border colors 在当主题模式发生改变时并不会自动的进行适配,所以需要手动的进行处理,可以通过 traitCollectionDidChange(_:) 这个方法在进行处理:

图片资源同样支持深色模式,需要使用 Assets.xcassets ,新建一个 Assets.xcassets 并在 Attributes inspector 点击 Appearances 选择 Any , Dark ,然后分别为 Any Appearances Dark Appearances 配置响应的图片。

为了适配深色模式,无限的增加图片资源最终会导致包的大小会增加很多,为了减少包的体积,在非必要添加图片的情况下有以下二种方案:

或者:

使用:

现在支持深色模式的 App 都会提供浅色和深色模式的选择,同时支持跟谁系统自动切换,当用户选择相应模式后需要用 Userdefaults 保存用户的选择。

当保存了用户选择后同时需要更新当前 App 的显示:

当采用 Xcode 11 新建项目时会默认开启深色模式的,当没时间或者暂不支持深色模式时可以禁用掉,简单的方法时在 Info.plist 中添加一个 UIUserInterfaceStyle = Light ,也支持为某个 View 或者 ViewController 单独设置相应的模式,但是这种设置不会影响模态弹出的 VC 的模式。

iOS10将会加入以往只在macOS出现的「DarkMode」暗黑模式,相信不少人都正在期待这个新功能,不过一直都只 有概念设计让大家幻想一下在iPhone上使用DarkMode会是怎样的。不过大家终于都不用再幻想了,因为近日有开发者在iOS10的测试版中,找到 了iOS10的黑暗模式。

苹果iOS10「暗黑模式」截图正式曝光!

苹果iOS10「暗黑模式」截图正式曝光!

在这个黑暗模式中,并非只是系统的画面反白,看上来就几乎是把界面重新配色一样,整体感觉相当型格,在时钟App中,把下面一列的图案配成橙色,相当特别。不过从开发者所放出的截图中,就只有系统界面以及时钟App界面,暂时无法得知在其他App中运行DarkMode时会是怎样,但相信其他App需要 经过优化设计后才能完美支持DarkMode。

苹果iOS10「暗黑模式」截图正式曝光!

同时开发者在控制中心内找到一个隐藏了的空白按钮,暂时无法得知这个将会是什么功能,但外界推测将会是移动网络的开关。

了解更多关于苹果的信息,请关注公众号

PC6果粉app∣一切与苹果有关