Swift：暗黑模式iOS 13以上支持是否跟随系统和iOS13

2021-07-19 本文已影响0人 IIronMan

暗黑模式

JKSwiftExtension 中JKDarkModeUtil 和 JKThemeProvider 有源码

目录：
- 1、暗黑模式介绍
- 2、暗黑模式的关闭和打开
- 3、iOS 13 暗黑模式的适配 (重点看)
- 4、iOS 13 以下主题的适配：浅色和深色 (重点看)
- 5、一次适配不完的问题

一、暗黑模式的介绍

1.1、暗黑模式的简介
从 iOS 13.0 版本开始，用户可以选择采用系统范围内的浅色或深色外观。深色外观（称为暗黑模式DarkMode）实现了许多应用程序已经采用的界面样式。用户可以选择自己喜欢的美学，也可以选择根据环境照明条件或特定时间表来切换其界面。

所有应用程序都应该支持浅色和深色界面样式，但在某些地方的特定外观可能会表现更好。例如，您可能总是为印刷内容采用轻巧的外观。
在更改代码之前，请打开黑暗模式，看看应用程序的反应。系统为您做了很多工作，如果您的应用程序使用标准视图和控件，您可能不需要进行许多更改。标准视图和控件会自动更新其外观，以匹配当前界面样式。如果您已经使用颜色和图像资产，您可以在不更改代码的情况下添加深色变体。
1.2、UITraitCollection介绍
在 iOS 13 中，我们可以通过 UITraitCollection 来判断当前系统的模式。UIView 和 UIViewController 、UIScreen、UIWindow 都已经遵从了UITraitEnvironment 这个协议，因此这些类都拥有一个叫做 traitCollection 的属性，在这些类中，我们可以这样去判断当前 App 的颜色模式：
```
let isDark = self.traitCollection.userInterfaceStyle == .dark
```
1.3、模拟器暗黑模式切换的快捷键：command+shift+A

二、暗黑模式的关闭和打开

2.1、自己的app还没有适配暗黑模式又担心用户使用暗黑模式的时候界面不好看：关闭暗黑模式
- 方式一：暂时全局关闭暗黑模式：
  在 Info.plist 文件中，添加 key 为 User Interface Style，类型为 String，value 设置为 Light 即可
  
  Info.plist关闭暗黑模式
- 方式二：使用代码的方式
  强制关闭暗黑模式
```
if(@available(iOS 13.0,*)){
   UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = .light
}
```
2.2、单个页面关闭暗黑模式
```
self.overrideUserInterfaceStyle = .light
```
提示：设置此属性会影响当前 view/viewController/window 以及它下面的任何内容
如果你希望一个子视图监听系统的模式，请将 overrideUserInterfaceStyle 属性设置为unspecified
```
self.overrideUserInterfaceStyle = .unspecified
```

三、iOS 13 暗黑模式的适配

3.1、iOS 13的暗黑模式我们主要分为：跟随系统模式和自定义模式
- 跟随系统，需要设置：
```
UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = .unspecified
```
- 不跟随系统
  浅色：UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = .light
  深色：UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = .dark

3.2、iOS 13的暗黑模式适配代码在：JKDarkModeUtil 里面，默认是 跟随系统模式，主要代码如下

import UIKit

public class JKDarkModeUtil {
  
    /// 跟随系统的key
    private static let JKDarkToSystem = "JKDarkToSystem"
    /// 是否浅色模式的key
    private static let JKLightDark = "JKLightDark"
    /// 是否浅色
    public static var isLight: Bool {
        if let value = UserDefaults.jk.userDefaultsGetValue(key: JKLightDark) as? Bool {
            return value
        }
        return true
    }
    /// 是否跟随系统
    public static var isFloorSystem: Bool {
        if #available(iOS 13, *) {
            if let value = UserDefaults.jk.userDefaultsGetValue(key: JKDarkToSystem) as? Bool {
                return value
            }
            return true
        }
        return false
    }
}

// MARK:- 方法的调用
extension JKDarkModeUtil: JKThemeable {
    public func apply() {}
}

public extension JKDarkModeUtil {
  
    // MARK: 初始化的调用
    /// 默认设置
    static func defaultDark() {
        if #available(iOS 13.0, *) {
            // 默认跟随系统暗黑模式开启监听
            if (JKDarkModeUtil.isFloorSystem) {
                JKDarkModeUtil.setDarkModeFollowSystem(isFollowSystem: true)
            } else {
                UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = JKDarkModeUtil.isLight ? .light : .dark
            }
        }
    }
  
    // MARK: 设置系统是否跟随
    static func setDarkModeFollowSystem(isFollowSystem: Bool) {
        if #available(iOS 13.0, *) {
            // 1.1、设置是否跟随系统
            UserDefaults.jk.userDefaultsSetValue(value: isFollowSystem, key: JKDarkToSystem)
            let result = UITraitCollection.current.userInterfaceStyle == .light ? true : false
            UserDefaults.jk.userDefaultsSetValue(value: result, key: JKLightDark)
            // 1.2、设置模式的保存
            if isFollowSystem {
                UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = .unspecified
            } else {
                UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = UITraitCollection.current.userInterfaceStyle
            }
        }
    }
  
    // MARK: 设置：浅色 / 深色
    static func setDarkModeCustom(isLight: Bool) {
        if #available(iOS 13.0, *) {
            // 1.1、只要设置了模式：就是黑或者白
            UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.overrideUserInterfaceStyle = isLight ? .light : .dark
            // 1.2、设置跟随系统：否
            UserDefaults.jk.userDefaultsSetValue(value: false, key: JKDarkToSystem)
            UserDefaults.jk.userDefaultsSetValue(value: isLight, key: JKLightDark)
        } else {
            // 模式存储
            UserDefaults.jk.userDefaultsSetValue(value: isLight, key: JKLightDark)
            // 通知模式更新
            LegacyThemeProvider.shared.updateTheme()
        }
    }
}

// MARK:- 动态颜色的使用
public extension JKDarkModeUtil {
    static func colorLightDark(light: UIColor, dark: UIColor) -> UIColor {
        if #available(iOS 13.0, *) {
            return UIColor { (traitCollection) -> UIColor in
                if JKDarkModeUtil.isFloorSystem {
                    if traitCollection.userInterfaceStyle == .light {
                        return light
                    } else {
                        return dark
                    }
                } else {
                    return JKDarkModeUtil.isLight ? light : dark
                }
            }
        } else {
            // iOS 13 以下主题色的使用
            if JKDarkModeUtil.isLight {
                return light
            }
            return dark
        }
    }
}

// MARK:- 动态图片的使用
public extension JKDarkModeUtil {

    // MARK: 深色图片和浅色图片切换 （深色模式适配）
    /// 深色图片和浅色图片切换 （深色模式适配）
    /// - Parameters:
    ///   - light: 浅色图片
    ///   - dark: 深色图片
    /// - Returns: 最终图片
    static func image(light: UIImage?, dark: UIImage?) -> UIImage? {
        if #available(iOS 13.0, *) {
            guard let weakLight = light, let weakDark = dark, let config = weakLight.configuration else { return light }
            let lightImage = weakLight.withConfiguration(config.withTraitCollection(UITraitCollection.init(userInterfaceStyle: UIUserInterfaceStyle.light)))
            lightImage.imageAsset?.register(weakDark, with: config.withTraitCollection(UITraitCollection(userInterfaceStyle: UIUserInterfaceStyle.dark)))
            return lightImage.imageAsset?.image(with: UITraitCollection.current) ?? light
        } else {
            // iOS 13 以下主题色的使用
            if JKDarkModeUtil.isLight {
                return light
            }
            return dark
        }
    }
}

3.3、UIColor 颜色的使用方式

JKDarkModeUtil.colorLightDark(light: UIColor.yellow, dark: UIColor.green)

提示：建议自定义业务色，如下

// MARK:- 业务颜色的使用
extension UIColor {
    /// 背景色
    private(set) static var cA1 = JKDarkModeUtil.colorLightDark(light: UIColor.yellow, dark: UIColor.green)
}

使用：self.view.backgroundColor = .cA1

3.4、CGColor 适配，实现 traitCollectionDidChange 方法，适配颜色即可

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    // cgColor 颜色适配
    button.layer.borderColor = JKDarkModeUtil.colorLightDark(light: .green, dark: .brown).cgColor
}

提示: 完整的触发方法文档

3.5、暗黑模式图片的使用(选择：Any,Dark)

Assets中添加图片

暗黑模式图片的使用

代码适配图片

// MARK:- 动态图片的使用(网络图片一样)
public extension JKDarkModeUtil {

    // MARK: 深色图片和浅色图片切换 （深色模式适配）
    /// 深色图片和浅色图片切换 （深色模式适配）
    /// - Parameters:
    ///   - light: 浅色图片
    ///   - dark: 深色图片
    /// - Returns: 最终图片
    static func image(light: UIImage?, dark: UIImage?) -> UIImage? {
         if #available(iOS 13.0, *) {
            guard let weakLight = light, let weakDark = dark, let config = weakLight.configuration else { return light }
            let lightImage = weakLight.withConfiguration(config.withTraitCollection(UITraitCollection.init(userInterfaceStyle: UIUserInterfaceStyle.light)))
            lightImage.imageAsset?.register(weakDark, with: config.withTraitCollection(UITraitCollection(userInterfaceStyle: UIUserInterfaceStyle.dark)))
            return lightImage.imageAsset?.image(with: UITraitCollection.current) ?? light
         } else {
            // iOS 13 以下主题色的使用
            if JKDarkModeUtil.isLight {
               return light
            }
            return dark
         }
   }
}

提示：代码适配的时候需要在：traitCollectionDidChange 方法里面再次赋值，iOS 13 以上的建议直接再 Assets中添加图片
如果是 cell 里面的图直接使用方法加载图片，刷新一下视图即可

四、iOS 13 以下主题的适配：浅色和深色

4.1、iOS 13 以下我们采用的是监听模式来改变主题色，源码在 JKThemeProvider，使用步骤如下

1>、遵守协议 JKThemeable （遵守UITraitEnvironment协议的均可使用）

extension ViewController: JKThemeable {
    func apply() {
       self.view.backgroundColor = JKDarkModeUtil.colorLightDark(light: UIColor.yellow, dark: UIColor.green)
    }
}

2>、注册监听模式变化

 themeProvider.register(observer: self)

3>、模式变化通知

JKDarkModeUtil.setDarkModeCustom(isLight: true)

4.2、颜色的调用和图片模式的调用和iOS13一样

颜色调用

JKDarkModeUtil.colorLightDark(light: UIColor.yellow, dark: UIColor.green)

图片调用

JKDarkModeUtil.image(light: UIImage(named: "tabbar_profile"), dark: UIImage(named: "tabbar_profile_selected"))

4.3、主题变化后会走代理 apply()，在代理方法里面我们只需要重新调用颜色或者图片的方法即可

extension ViewController: JKThemeable {
    func apply() {
        self.view.backgroundColor = JKDarkModeUtil.colorLightDark(light: UIColor.yellow, dark: UIColor.green)
        darkImageView.image = JKDarkModeUtil.image(light: UIImage(named: "tabbar_profile"), dark: UIImage(named: "tabbar_profile_selected"))
    }
}

五、一次适配不完的问题

5.1、一次适配不完的问题，我们在使用JKDarkModeUtil 调用一些方法的时候，适配哪里就哪里使用即可，不使用的就按照之前的颜色以及图片调用即可
5.2、提示：在使用 JKDarkModeUtil 和 JKThemeProvider 的时候，需要在设置 window 的 rootViewController 后需要调用 JKDarkModeUtil.defaultDark()

Swift：暗黑模式iOS 13以上支持是否跟随系统和iOS13

一、暗黑模式的介绍

二、暗黑模式的关闭和打开

三、iOS 13 暗黑模式的适配

四、iOS 13 以下主题的适配：浅色和深色

五、一次适配不完的问题

如果能帮到您，请在 JKSwiftExtension 给个星星，谢谢

猜你喜欢

热点阅读