ios 兼容放大模式



In iOS, people can now choose to adopt a dark system-wide appearance called Dark Mode. In Dark Mode, the system uses a darker color palette for all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker backgrounds.

在iOS中,人们现在可以选择采用深色系统范围的外观,称为深色模式。 在“暗模式”下,系统对所有屏幕,视图,菜单和控件使用较暗的调色板,并且使用更多的活力使前景内容在较暗的背景下脱颖而出。

At WWDC 2019, Apple announced that Dark Mode would be supported on iOS 13 and later only. There are some significant changes to UIKit in order to support this — many of them are detailed in the talk Implementing Dark Mode on iOS which I’d highly recommend watching.

在WWDC 2019上,苹果宣布黑暗模式仅在iOS 13和更高版本上受支持。 为了支持此功能,UIKit进行了一些重大更改-我强烈建议您观看iOS上的“实施深色模式”中详细介绍了其中的许多内容。

Now the question is how do we configure colors for light and dark mode? Well, we can use the color asset catalog for that. Colors for Dark and Light mode can be added into the catalog.

现在的问题是,我们如何为明暗模式配置颜色? 好吧,我们可以使用颜色资产目录。 可以将深色和浅色模式的颜色添加到目录中。

(Color Asset Catalog)




The color asset catalog can only add colors for Dark and Light mode. But what if we want to add more colors for multiple themes? Imagine an app that changes the appearance based on whether it’s paid paid or free app.

颜色资产目录只能为深色和浅色模式添加颜色。 但是,如果我们想为多个主题添加更多颜色该怎么办? 想象一个应用程序根据付费应用程序还是免费应用程序改变外观。

(What’s the solution?)

A workable solution is to check whether the app is running on iOS 13, then check selected theme and set the color accordingly. This means we’ll probably be doing a lot of things like using Swift’s available syntax #available(iOS 13, *). But it requires a lot of repetitive code and unnecessary changes.

可行的解决方案是检查应用程序是否在iOS 13上运行,然后检查所选主题并相应设置颜色。 这意味着我们可能会做很多事情,例如使用Swift的可用语法#available(iOS 13, *) 。 但这需要大量重复的代码和不必要的更改。

Also iOS 10 doesn’t support the color asset catalog. UIColor(named: “”) is supported from iOS 11 and later only. What if the app is running on iOS 10? There must be a better way to do this, right?

同样,iOS 10不支持颜色资产目录。 仅iOS 11和更高版本支持UIColor(named: “”) 。 如果该应用程序在iOS 10上运行怎么办? 必须有更好的方法来执行此操作,对吗?

A better solution would be to create our own custom UIColor wrapper supporting colors for different themes. While making these wrappers, we have to make sure that the syntax remains the same as Apple API’s for UIColor (e.g. calling UIColor.black).

更好的解决方案是创建我们自己的自定义UIColor包装器,以支持不同主题的颜色。 在进行这些包装时,我们必须确保语法与UIColor.black UIColor (例如,调用UIColor.black )。

(Let’s code)

Create a struct Theme consisting of variables for every theme supported by the app.

创建一个结构Theme ,该主题由应用支持的每个主题的变量组成。


Our Theme propertyWrapper is ready. Now let’s list all the colors which will be used in the app. We will create an extension of UIColor and create color variables with the Theme attribute.

我们的主题propertyWrapper已准备就绪。 现在,让我们列出将在应用程序中使用的所有颜色。 我们将创建UIColor的扩展,并使用Theme属性创建颜色变量。


That’s it. We will set the color using the same syntax UIColor.background and the color will be changed according the theme set.

而已。 我们将使用相同的语法UIColor.background设置颜色,并且颜色将根据主题集进行更改。

The above implementation works fine for the devices running iOS 13 and later. What about the devices running on iOS 12 and before?

上面的实现对于运行iOS 13及更高版本的设备运行良好。 在iOS 12及更高版本上运行的设备如何?

(What about Older versions?)

To support devices running on older versions of iOS, we will create a protocol ThemeProtocol.

为了支持在旧版iOS上运行的设备,我们将创建协议ThemeProtocol


The ThemeProtocol protocol has the default implementation of addThemeChangeObserver().

ThemeProtocol协议具有addThemeChangeObserver()的默认实现。


Now we just have to conform the ViewController to the ThemeProtocol and call addThemeChangeObserver in viewDidLoad and implement configureThemeColors, where we will configure all our UI elements color.

现在,我们只需addThemeChangeObserver ViewController符合ThemeProtocol并在viewDidLoad调用addThemeChangeObserver并实现configureThemeColors ,即可在其中配置所有UI元素颜色。


That’s all. Now whenever the theme is changed, we just have to fire the ThemeDidChangeNotification notification and the color of the UI elements will be changed accordingly, even for the devices running on iOS version 12 and below.

就这样。 现在,无论何时更改主题,我们ThemeDidChangeNotification需要触发ThemeDidChangeNotification通知即可更改UI元素的颜色,即使在运行iOS 12及更低版本的设备上也是如此。


(Conclusion)

Dark Mode was one of the most anticipated feature for iOS users in 2019. It adds a darker theme to the iPhone and allows you to do the same for your apps. In this article we’ve explored how to make our app look great by implementing Dark Mode that works on all iOS versions including iOS 12 and below.

暗模式是2019年iOS用户最期待的功能之一。它为iPhone添加了更暗的主题,并允许您对应用执行相同的操作。 在本文中,我们探讨了如何通过实现可在所有iOS版本(包括iOS 12及更低版本)上使用的深色模式来使我们的应用看起来更好。

Hopefully this makes your app’s transition to dark mode easier!

希望这可以使您的应用更轻松地过渡到黑暗模式!


翻译自: https://medium.com/swlh/backward-compatible-dark-mode-on-ios-4e9f057ed52e

ios 兼容放大模式