美文网首页iOS 开发继续加油iOS 成长之路Mac·iOS开发
iOS13 深色模式 (Dark Mode) 与浅色模式 (Li

iOS13 深色模式 (Dark Mode) 与浅色模式 (Li

作者: 腾飞tengfei | 来源:发表于2020-06-01 00:00 被阅读0次
iOS13

2019年6月4日凌晨，苹果在开发者大会上推出了新一代手机操作系统 iOS 13，主要更新了照片应用、滑动输入和更多动画表情，还有就是增加了”深色模式“，优化了音量的调节方式。

深色模式”终于来了“。

在所有关于 iOS13 的更新项目里，“深色模式”是网友讨论最多的。该模式可以根据日出日落时间自动开启，开启后，不只有壁纸，所有的系统元素都会变成暗色，起到在夜里降低屏幕亮度、保护用户眼睛的作用。

iOS13 Light 和 Dark

实际上，苹果用户很早就开始呼吁 iOS 加入这个深色模式。如今 iOS13 正式发布深色模式，媒体和网友评论的口吻都是“终于来了”，“迟到的深色模式”。

iOS13 Dark App

对于 iOS 程序猿们而言，如何适配 iOS13 系统的 Dark Mode 深色模式呢？我推荐从以下几个方面去做适配，推荐参考项目【QPlayer】。

运用系统 API

如何运用系统 API，请阅读这篇文章《iOS13 快速读懂 Dark Mode 深色模式 API》。

颜色相关的适配

  • 不同模式的适配主要涉及颜色和图片两个方面的适配。
  • 其中颜色适配，包括相关背景色和字体颜色。
  • 当系统模式切换的时候，我们不需要如何操作，系统会自动渲染页面，只需要做好不同模式的颜色和图片即可。

UIColor

  • iOS13 之前 UIColor 只能表示一种颜色，从 iOS13 开始 UIColor 是一个动态的颜色，在不同模式下可以分别代表不同的颜色。
  • 下面是 iOS13 系统提供的动态颜色种类，使用以下颜色值，在模式切换时，则不需要做特殊处理。
@interface UIColor (UIColorSystemColors)
#pragma mark System colors

@property (class, nonatomic, readonly) UIColor *systemRedColor          API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGreenColor        API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemBlueColor         API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemOrangeColor       API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemYellowColor       API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemPinkColor         API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemPurpleColor       API_AVAILABLE(ios(9.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemTealColor         API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemIndigoColor       API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 灰色种类, 在Light模式下, systemGray6Color更趋向于白色
@property (class, nonatomic, readonly) UIColor *systemGrayColor         API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGray2Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray3Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray4Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray5Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray6Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);

#pragma mark Foreground colors
@property (class, nonatomic, readonly) UIColor *labelColor              API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *secondaryLabelColor     API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor      API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor    API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 系统链接的前景色
@property (class, nonatomic, readonly) UIColor *linkColor               API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 占位文字的颜色
@property (class, nonatomic, readonly) UIColor *placeholderTextColor    API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 边框或者分割线的颜色
@property (class, nonatomic, readonly) UIColor *separatorColor          API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor    API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

#pragma mark Background colors
@property (class, nonatomic, readonly) UIColor *systemBackgroundColor                   API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor          API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor           API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor            API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor   API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor    API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);

#pragma mark Fill colors
@property (class, nonatomic, readonly) UIColor *systemFillColor                         API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemFillColor                API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor                 API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor               API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);

#pragma mark Other colors
// 这两个是非动态颜色值
@property(class, nonatomic, readonly) UIColor *lightTextColor API_UNAVAILABLE(tvos);    // for a dark background
@property(class, nonatomic, readonly) UIColor *darkTextColor API_UNAVAILABLE(tvos);     // for a light background

@property(class, nonatomic, readonly) UIColor *groupTableViewBackgroundColor API_DEPRECATED_WITH_REPLACEMENT("systemGroupedBackgroundColor", ios(2.0, 13.0), tvos(13.0, 13.0));
@property(class, nonatomic, readonly) UIColor *viewFlipsideBackgroundColor API_DEPRECATED("", ios(2.0, 7.0)) API_UNAVAILABLE(tvos);
@property(class, nonatomic, readonly) UIColor *scrollViewTexturedBackgroundColor API_DEPRECATED("", ios(3.2, 7.0)) API_UNAVAILABLE(tvos);
@property(class, nonatomic, readonly) UIColor *underPageBackgroundColor API_DEPRECATED("", ios(5.0, 7.0)) API_UNAVAILABLE(tvos);

@end
  • 上面系统提供的这些颜色种类，根本不能满足我们正常开发的需要，大部分的颜色值也都是自定义。
  • 系统也为我们提供了创建自定义颜色的方法。
@available(iOS 13.0, *)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

在 Objective-C 中

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
  • 上面的方法接受一个闭包 (block) 。
  • 当系统在 LightMode 和 DarkMode 之间相互切换时就会自动触发此回调。
  • 回调返回一个 UITraitCollection，可根据改对象判断是那种模式。
fileprivate func getColor() -> UIColor {
    return UIColor { (collection) -> UIColor in
        if (collection.userInterfaceStyle == .dark) {
            return UIColor.red
        }
        return UIColor.green
    }
}

除了上述两个方法之外，UIColor 还增加了一个实例方法。

// 通过当前 traitCollection 得到对应 UIColor
@available(iOS 13.0, *)
open func resolvedColor(with traitCollection: UITraitCollection) -> UIColor

CGColor

  • UIColor 只是设置背景色和文字颜色的类，可以动态的设置。
  • 可是如果是需要设置类似边框颜色等属性时，又该如何处理呢？
  • 设置上述边框属性，需要用到 CGColor 类，但是在 iOS13 中 CGColor 并不是动态颜色值，只能表示一种颜色。
  • 在监听模式改变的方法中traitCollectionDidChange，根据不同的模式进行处理。
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {

    super.traitCollectionDidChange(previousTraitCollection)
    
    // 每次模式改变的时候, 这里都会执行
    if (previousTraitCollection?.userInterfaceStyle == .dark) {
        redView.layer.borderColor = UIColor.red.cgColor
    } else {
        redView.layer.borderColor = UIColor.green.cgColor
    }
}

图片适配

  • 在 iOS 中，图片基本都是放在 Assets.xcassets 里面，所以图片的适配，我们就相对麻烦一些了。
  • 正常情况下都是下面这中处理方式。
Appearances None
  • 需要适配不同模式的情况下，需要两套不同的图片，并做如下设置。
  • 在设置 Appearances 时，我们选择 Any, Dark 就可以了 (只需要适配深色模式和非深色模式)。
Appearances Dark

适配相关

当前页面模式

  • 原项目中如果没有适配 Dark Mode，当你切换到 Dark Mode 后，你可能会发现有些部分页面的颜色自动适配了。
  • 未设置过背景颜色或者文字颜色的组件，在 Dark Mode 模式下，就是黑色的。
  • 这里我们就需要真对该单独 App 强制设置成 Light Mode 模式。
// 设置改属性, 只会影响当前的视图, 不会影响前面的 controller 和后续 present 的 controller
@available(iOS 13.0, *)
open var overrideUserInterfaceStyle: UIUserInterfaceStyle

// 使用示例
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    
    // 每次模式改变的时候, 这里都会执行
    if (previousTraitCollection?.userInterfaceStyle == .dark) {
        // 在Dark模式下, 强制改成Light模式
        overrideUserInterfaceStyle = .light
    }
}

强制项目的显示模式

  • 上面这种方式只能针对某一个页面修改，如果需要对整个项目禁用 Dark 模式。
  • 可以通过修改 window 的 overrideUserInterfaceStyle 属性。
  • 在 Xcode11 创建的项目中，window 从 AppDelegate 移到 SceneDelegate 中，添加下面这段代码，就会做到全局修改显示模式。
let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
scene?.window?.overrideUserInterfaceStyle = .light

在之前的项目中，可以在 AppDelegate 设置如下代码：

window.overrideUserInterfaceStyle = .light

我创建的项目，上述代码的确会强制改变当前的模式，但是状态栏的显示不会被修改。

终极方案

  • 需要在 info.plist 文件中添加 User Interface Style 配置，并设置为 Light。
<key>UIUserInterfaceStyle</key>
<string>Light</string>

问题又来了，即使做了上面的修改，在 React Native 中，状态栏的依然是根据不同的模式显示不同的颜色，该如何处理？

Status Bar 更新

在 iOS13 中苹果对于 Status Bar 也做了部分修改，在 iOS13 之前

public enum UIStatusBarStyle : Int {
    case `default` // 默认文字黑色

    @available(iOS 7.0, *)
    case lightContent // 文字白色
}

从 iOS13 开始 UIStatusBarStyle 一共有三种状态

public enum UIStatusBarStyle : Int {
    case `default` // 自动选择黑色或白色

    @available(iOS 7.0, *)
    case lightContent // 文字白色
    
    @available(iOS 13.0, *)
    case darkContent // 文字黑色
}

在 React Native 的代码中，设置状态栏的颜色为黑色，代码如下：

<StatusBar barStyle={'dark-content'} />
  • 上面这段代码在 iOS13 系统的手机中是无效的。
  • 虽然上面的代码中设置了 dark-content 模式，但是在 iOS 原生代码中 dark-content 实际是 `UIStatusBarStyleDefault。
  • 在文件 RCTStatusBarManager.m 中
RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
  @"default": @(UIStatusBarStyleDefault),
  @"light-content": @(UIStatusBarStyleLightContent),
  @"dark-content": @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);

修改上面代码即可

@"dark-content": @(@available(iOS 13.0, *) ? UIStatusBarStyleDarkContent : UIStatusBarStyleDefault),

iOS13 其他更新

Apple 登录

Sign In with Apple will be available for beta testing this summer. It will be required as an option for users in apps that support third-party sign-in when it is commercially available later this year.

  • 如果 APP 支持三方登陆 (Facbook、Google、微信、QQ、支付宝等)，就必须支持 Apple 登陆，且要放置前边。
  • 至于 Apple 登录按钮的样式，建议支持使用 Apple 提供的按钮样式，已经适配各类设备，可参考【Sign In with Apple】

LaunchImage

即将被废弃的 LaunchImage。

  • 从 iOS 8 的时候，苹果就引入了 LaunchScreen，我们可以设置 LaunchScreen 来作为启动页。
  • 现在你还可以使用 LaunchImage 来设置启动图，但是随着苹果设备尺寸越来越多，适配显然相对麻烦一些。
  • 使用 LaunchScreen 的话，情况会变的很简单，LaunchScreen是支持 AutoLayout 和 SizeClass 的，所以适配各种屏幕都不在话下。
  • ⚠️从2020年4月开始，所有 App 将必须提供 LaunchScreen，而 LaunchImage 即将退出历史舞台。

UIWebView

'UIWebView' was deprecated in iOS 12.0: No longer supported; please adopt WKWebView.

从 iOS 13 开始也不再支持 UIWebView 控件了，请尽快采用 WKWebView。

@available(iOS, introduced: 2.0, deprecated: 12.0, message: "No longer supported; please adopt WKWebView.")
open class UIWebView : UIView, NSCoding, UIScrollViewDelegate { }

总结：写的有不好的地方希望大家指出，我会更正，大家有什么看不明白的，也可以在评论里面提问，我会尽力解答。

点赞+关注，第一时间获取技术干货和最新知识点，谢谢你的支持！转发请注明出处。

最后祝大家生活愉快~

相关文章

网友评论

    本文标题：iOS13 深色模式 (Dark Mode) 与浅色模式 (Li

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

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    iOS 开发继续加油

    iOS 成长之路

    Mac·iOS开发

    IT/互联网

    关于我们|服务条款|联系我们|iOS13 深色模式 (Dark Mode) 与浅色模式 (Li|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！