美文网首页
iOS 暗黑模式适配

iOS 暗黑模式适配

作者: Just_go | 来源:发表于2021-07-02 16:49 被阅读0次
    1. 激活暗黑模式

    在view或者controller中 overrideUserInterfaceStyle = .dark print(traitCollection.userInterfaceStyle) // dark

    但是显然这样要适配的地方太多, 考虑到overrideUserInterfaceStyle这个属性的的影响关系链路为 UIScreen - UIWindow - UIController - UIPresentController - UIView 所以在xcode11后 // 不包括iPadOS

    let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
    scene?.window?.overrideUserInterfaceStyle = .dark
    复制代码
    
    1. 如何响应暗黑模式

    在Macos下可以切换暗黑模式后, 系统会自动刷新NSView的 updateLayer() 方法, 在UIView下则没有与之对应的方法, 但我们可以通过KVO监听的方式, 比如我们在个人设置里切换了模式, 那么就需要通知各个首页重新绘制必要的部分

    // Use a property to keep a reference to the key-value observation object.
    var observation: NSKeyValueObservation?
    
    func applicationDidFinishLaunching(_ aNotification: Notification) {
      observation = NSApp.observe(\.effectiveAppearance) { (app, _) in
        app.effectiveAppearance.performAsCurrentDrawingAppearance {
          // Invoke your non-view code that needs to be aware of the
          // change in appearance.
        }
      }
    }
    复制代码
    
    1. 颜色适配

    iOS 13 之前 UIColor 只能表示一种颜色,从 iOS 13 开始 UIColor 是一个动态的颜色,它可以在 LightMode 和 DarkMode 拥有不同的颜色。 如何自己创建一个动态的 UIColor 上面我们说到系统提供了一些动态的颜色供我们使用,但是在正常开发中,系统提供的颜色肯定是不够用的,所以我们要自己创建动态颜色。 iOS 13 下 UIColor 增加了一个初始化方法,我们可以用这个初始化方法来创建动态颜色。 @available(iOS 13.0, *) public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

    这个方法要求传一个闭包进去,当系统从 LightMode 和 DarkMode 之间切换的时候就会触发这个回调。 这个闭包返回一个 UITraitCollection 类,我们要用这个类的 userInterfaceStyle 属性。 userInterfaceStyle是一个枚举,声明如下

    @available(iOS 12.0, *)
    public enum UIUserInterfaceStyle : Int {
        case unspecified
        case light
        case dark
    }
    复制代码
    

    这个枚举会告诉我们当前是 LightMode or DarkMode 使用如下:

    let backgroundColor = UIColor { (trainCollection) -> UIColor in 
        if trainCollection.userInterfaceStyle == .dark { 
            return UIColor.black 
        } else { 
            return UIColor.white 
        } 
    }
    复制代码
    
    1. 图片适配

    打开 Assets.xcassets 把图片拖拽进去,我们可以看到这样的页面

    image.png

    然后我们在右侧工具栏中点击最后一栏,点击 Appearances 选择 Any, Dark,如图所示

    image.png 我们把 DarkMode 的图片拖进去,如图所示 image.png

    当然我们也可以使用代码方式:

    // Image for light mode.
    let lightImage: UIImage!
    
    // Image for dark mode.
    let darkImage: UIImage!
    
    lightImage?.imageAsset?.register(darkImage, with: .init(userInterfaceStyle: .dark)) 
    复制代码
    

    这样lightImage就具备动态性了, 但这样的话每个图片都要改, 代码侵入性强, 代价大

    4.其他 Status Bar 之前 Status Bar 有两种状态,default 和 lightContent 现在 Status Bar 有三种状态,default, darkContent 和 lightContent 现在的 darkContent 对应之前的 default,现在的 default 会根据情况自动选择 darkContent 和 lightContent 菊花 具体适配

    参考文档:
    https://developer.apple.com/documentation/uikit/appearance_customization/supporting_dark_mode_in_your_interface

    相关文章

      网友评论

          本文标题:iOS 暗黑模式适配

          本文链接:https://www.haomeiwen.com/subject/yyfyultx.html