IOS13 适配暗黑模式

tiantian_cool
2,310 阅读5分钟
  • 要求
  • Apple的几种模式
  • 暗黑模式不是唯一的新模式
  • 强制不支持暗黑模式
  • 开始适配
  • 深入了解
  • 提示
  • 结论

如果您的应用在iOS 13启动时尚未通过深色模式支持进行更新，则无论iOS系统设置如何，该应用都会始终显示其默认外观。

如果您的用户启用了暗模式，而您的应用尚不支持它，则您的应用将使用该明亮的默认界面闪烁您的用户！

🙈

用苹果的话说：“

您真的不想成为那种被困在黑暗中的光亮外观

”。

要求

  • 必须在IOS 13设备

  • 已经使用Xcode 11构建和发布

Apple的几种模式

  • Light

  • Dark

  • Any

强制不支持暗黑模式

info.plist 中 增加 Appearance  value设置成light

开始适配

颜色 （动态）系统颜色 在iOS 13和Xcode 11中，苹果正在引入系统颜色：

Until iOS 12, UIColor has offered us a few simple colors like .red, .yellow etcetera: you don’t want to use these colors any longer. These colors are static, which means that their tint never changes.

默认界面中的系统颜色。底部：深色模式下的系统颜色

从左到右：.systemBlue，.systemGray，.systemGreen，.systemIndigo，.systemOrange，.systemPink，.systemPurple，.systemRed，.systemTeal，.systemYellow。

从上图中可以看出，与旧的静态颜色相反，系统颜色是动态的：它们的色调将适应当前的系统界面。

但这些并不是唯一的新颜色！我们还有各种灰度颜色，其中深色和浅色的外观差异更加明显：

顶部：默认界面中的系统颜色灰度。底部：深色模式下的系统颜色灰度。

从左到右：.systemGray，.systemGray2，.systemGray3，.systemGray4，.systemGray5，.systemGray6。

所有动态系统颜色都配有高对比度的特殊色调。#a11y

通过使用这些动态颜色（例如UIColor.systemBlue而不是UIColor.blue），您的界面将自动为当前系统首选项选择正确的色调，无需进一步工作！�

（动态）语义颜色

Xcode 10及更早版本提供了两种颜色，分别名为.lightText和.darkText。
这些现在被处理了，因为它们是静态的，不会适应任何接口。相反，从Xcode 11开始，我们推出了一套全新的语义颜色，如UIColor.label、UIColor.placeholderText、UIColor.systemBackground等。

这些颜色名称不是描述阴影，而是基于它们的预期用途：大多数时候，您想使用这些颜色，因为它们与系统颜色一样，是动态的。

最重要的是，语义颜色确保您的应用程序的外观与系统其他部分相似。通过使用这些，您的应用程序将感觉原生，这始终是用户的最佳体验。

您使用这些动态颜色越多，您就越快正确适应黑暗模式。

深入了解

（动态）自定义颜色：资产目录

这应该永远是你最后的选择。

对于您和设计团队来说，这是唯一需要大量工作、尝试和错误的选项：
让苹果为你做工作，他们从超级有才华的团队那里投入了令人难以置信的时间，信任和使用他们的工作，你的应用程序就会没事的。

免责声明被排除在外，您如何定义和使用自己的动态颜色？
从iOS 11和Xcode 9开始，我们可以在资产目录中添加颜色。

现在，您还可以为其中的每种颜色定义一个深色变体：
to do so, select a color in your assets catalog, open the Attribute Inspector (shortcut: ⌘⌥4), and set its appearance from None to Any, Dark:

我们自己的动态颜色！

此时，将出现一个新的深色外观颜色盒：恭喜你！您刚刚创建了第一个动态颜色！将每个变体设置为适当的色调，您就该走了。

别忘了启用高对比度：

同色的四种变体

Again, I strongly suggest to use System and Semantic Colors as much as possible: in case of a button for example, using custom colors means defining one color for each button state: .normal, .highlighted, .focused, .selected, and .disabled.

这意味着要求每个状态和每个外观的颜色都不同。如果你做数学，一个按钮现在需要（5个州*4个外观=）20，t-w-e-n-t-y，不同的色调！�

如果您仍然想走这条路线，请提醒：
对于按下按钮的颜色，使用默认颜色的深色版本不再有效，因为效果适用于浅色界面，但深色界面需要浅色。👍

（动态）代码中的自定义颜色 �

如果您仍然针对iOS 10（不支持资产目录中的颜色声明）或不想或不能使用上述选项，那么最后一个可用的选项是在代码中定义颜色：

let dynamicColor = UIColor { (traitCollection: UITraitCollection) -> UIColor in
    switch traitCollection.userInterfaceStyle {
    case
      .unspecified,
      .light: return .white
    case .dark: return .black
    }
}

图像

几乎每个应用程序都会在用户界面中显示图像和/或符号。除非这些图像显示用户内容（如个人资料图片），否则每种模式只有一个图像变体是非常好的设计。

Alternatively, you can fetch any of them by using the new api UIImage(systemName:):

UIImage(systemName: "star.fill")



let glyphImage = UIImage(named: "myGlyph")
let glyphImageView = UIImageView(image: glyphImage)
glyphImageView.tintColor = .systemYellow

其他图像

For all other kind of images that are not template images or symbols such as photos and more, we can follow the same steps as for custom colors: set their appearance to Any, Dark in the assets catalog and drop a new variant for each appearance.

avatar
文章
阅读
粉丝