美文网首页iOS开发 技术集锦ios 13iOS 13
关于新增iOS 13 Dark Mode API的那些事。。。

关于新增iOS 13 Dark Mode API的那些事。。。

作者: 白色天空729 | 来源:发表于2019-06-08 14:48 被阅读52次

    UIViewController新增:

    overrideUserInterfaceStyle

    /* Set `overrideUserInterfaceStyle` to cause this view controller and its children to have a
     * specific `UIUserInterfaceStyle`. This does not affect the application or any parent view controllers.
     */
    / *设置`overrideUserInterfaceStyle`以使该视图控制器及其子控件具有
      *特定的`UIUserInterfaceStyle`。 这不会影响应用程序或任何父视图控制器。
     */
    @property (nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle ; // Defaults to UIUserInterfaceStyleUnspecified
    The user interface style adopted by the view controller and all of its children.
    视图控制器及其所有子节点采用的用户界面样式。
    
    Use this property to force the view controller to always adopt a light or dark interface style. The default value of this property is UIUserInterfaceStyleUnspecified, which causes the view controller to inherit the interface style from the system or a parent view controller. If you assign a different value, the new style applies to the view controller, its entire view hierarchy, and any embedded child view controllers.
    
    
    使用此属性可强制视图控制器始终采用浅色或深色界面样式。 此属性的默认值为UIUserInterfaceStyleUnspecified,这会使视图控制器从系统或父视图控制器继承接口样式。 如果指定其他值,则新样式将应用于视图控制器,其整个视图层次结构以及任何嵌入式子视图控制器。
    
    该属性为枚举类型:
    值如下:
    typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
        UIUserInterfaceStyleUnspecified,
        UIUserInterfaceStyleLight,        ///正常模式
        UIUserInterfaceStyleDark,        /// 暗黑模式
    } API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);
    
    
    UIUserInterfaceStyleUnspecified<===>Choose this option when you want to follow the system's interface style.如果要按照系统的界面样式选择此选项。
    
    UIUserInterfaceStyleLight<===>The light interface style.iOS13之前默认的系统风格(白色的)
    
    
    UIUserInterfaceStyleDark<===>The dark interface style.黑暗的界面风格。
    
    

    例如:强制设置当前控制器为暗黑模式:

    self.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
    

    UIColor 中更新了若干颜色属性对暗黑模式进行支持;

    #pragma mark Foreground colors
    
    /* Foreground colors for static text and related elements.
        静态文本和相关元素的前景颜色
     */
    @property (class, nonatomic, readonly) UIColor *labelColor; 
    The color for text labels containing primary content.
    包含主要内容的文本标签的颜色。
    
    @property (class, nonatomic, readonly) UIColor *secondaryLabelColor;
    The color for text labels containing secondary content.
    包含辅助内容的文本标签的颜色。
    
    @property (class, nonatomic, readonly) UIColor *tertiaryLabelColor;
    The color for text labels containing tertiary content.
    包含第三级内容的文本标签的颜色。
    
    @property (class, nonatomic, readonly) UIColor *quaternaryLabelColor;
    The color for text labels containing quaternary content.
    包含四元内容的文本标签的颜色。
    
    /* Foreground color for standard system links.
     */
    / *标准系统链接的前景色。
     */
    @property (class, nonatomic, readonly) UIColor *linkColor;
    The color for links.
    超链接标签的颜色
    
    
    /* Foreground color for placeholder text in controls or text fields or text views.
     */
    / *控件或文本字段或文本视图中占位符文本的前景色。
     */
    @property (class, nonatomic, readonly) UIColor *placeholderTextColor;
    The color for placeholder text in controls or text views.
    控件或文本视图中占位符文本的颜色。
    
    
    /* Foreground colors for separators (thin border or divider lines).
     * `separatorColor` may be partially transparent, so it can go on top of any content.
     * `opaqueSeparatorColor` is intended to look similar, but is guaranteed to be opaque, so it will
     * completely cover anything behind it. Depending on the situation, you may need one or the other.
     */
    / *分隔符的前景颜色(细边框或分隔线)。
      *`separatorColor`可以是部分透明的,因此它可以在任何内容之上。
      *`opaqueSeparatorColor`旨在看起来相似,但保证是不透明的,所以它会
      *完全覆盖它背后的任何东西。 根据具体情况,您可能需要其中一个。
     */
    @property (class, nonatomic, readonly) UIColor *separatorColor;
    The color for thin borders or divider lines that allows some underlying content to be visible.
    细边框或分隔线的颜色,允许一些底层内容可见。
    
    讨论:
    This color may be partially transparent to allow the underlying content to show through. It adapts to the underlying trait environment.
    此颜色可以是部分透明的,以允许底层内容显示。 它适应潜在的特质环境。
    
    @property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor;
    The color for borders or divider lines that hide any underlying content.
    隐藏任何基础内容的边框或分隔线的颜色。
    
    Discussion
    This color is always opaque. It adapts to the underlying trait environment.
    这种颜色总是不透明的。 它适应潜在的特质环境。
    
    #pragma mark Background colors--背景颜色
    
    /* We provide two design systems (also known as "stacks") for structuring an iOS app's backgrounds.
     *
     * Each stack has three "levels" of background colors. The first color is intended to be the
     * main background, farthest back. Secondary and tertiary colors are layered on top
     * of the main background, when appropriate.
     *
     * Inside of a discrete piece of UI, choose a stack, then use colors from that stack.
     * We do not recommend mixing and matching background colors between stacks.
     * The foreground colors above are designed to work in both stacks.
     *
     * 1. systemBackground
     *    Use this stack for views with standard table views, and designs which have a white
     *    primary background in light mode.
     */
    / *我们提供两个设计系统(也称为“堆栈”)来构建iOS应用程序的背景。
     *
      *每个堆栈有三个“级别”的背景颜色。 第一种颜色是打算
      *主要背景,最后面。 二级和三级颜色分层在顶部
      *适当时的主要背景。
     *
      *在一个独立的UI内部,选择一个堆栈,然后使用该堆栈中的颜色。
      *我们不建议在堆栈之间混合和匹配背景颜色。
      *上面的前景颜色设计用于两个堆栈。
     *
      * 1. systemBackground
      *将此堆栈用于具有标准表视图的视图和具有白色的设计
      *灯光模式下的主要背景。
     */
    @property (class, nonatomic, readonly) UIColor *systemBackgroundColor;
    The color for the main background of your interface.
    界面主背景的颜色。
    
    
    @property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor;
    The color for content layered on top of the main background.
    内容的颜色分层在主背景之上。
    
    
    @property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor;
    The color for content layered on top of secondary backgrounds.
    内容的颜色分层在次要背景之上。
    
    
    /* 2. systemGroupedBackground
     *    Use this stack for views with grouped content, such as grouped tables and
     *    platter-based designs. These are like grouped table views, but you may use these
     *    colors in places where a table view wouldn't make sense.
     */
    / * 2. systemGroupedBackground
      *将此堆栈用于具有分组内容的视图,例如分组表和
      *基于拼盘的设计。 这些类似于分组表视图,但您可以使用这些视图
      *表格视图无意义的地方的颜色。
     */
    @property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor;
    The color for the main background of your grouped interface.
    分组界面主背景的颜色。
    
    
    @property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor;
    The color for content layered on top of the main background of your grouped interface.
    内容的颜色分层在分组界面的主背景之上。
    
    
    @property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor;
    The color for content layered on top of secondary backgrounds of your grouped interface.
    内容的颜色分层在分组界面的辅助背景之上。
    
    
    #pragma mark Fill colors填充颜色
    
    /* Fill colors for UI elements.
     * These are meant to be used over the background colors, since their alpha component is less than 1.
     *
     * systemFillColor is appropriate for filling thin and small shapes.
     * Example: The track of a slider.
     */
    / *填充UI元素的颜色。
      *这些用于背景颜色,因为它们的alpha分量小于1。
     *
      * systemFillColor适合填充细小形状。
      *示例:滑块的轨迹。
     */
    @property (class, nonatomic, readonly) UIColor *systemFillColor;
    An overlay fill color for thin and small shapes.
    薄和小形状的叠加填充颜色。
    
    Discussion
    Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
    Use this color to fill thin or small shapes, such as the track of a slider.
    
    对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
    使用此颜色填充细小形状,例如滑块的轨迹。
    
    /* secondarySystemFillColor is appropriate for filling medium-size shapes.
     * Example: The background of a switch.
     */
    / * secondarySystemFillColor适用于填充中等大小的形状。
      *示例:开关的背景。
     */
    @property (class, nonatomic, readonly) UIColor *secondarySystemFillColor;
    An overlay fill color for medium-size shapes.
    中等大小形状的叠加填充颜色。
    
    Discussion
    Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
    Use this color to fill medium-size shapes, such as the background of a switch.
    
    讨论
    对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
    使用此颜色填充中等大小的形状,例如开关的背景。
    
    
    /* tertiarySystemFillColor is appropriate for filling large shapes.
     * Examples: Input fields, search bars, buttons.
     */
    / * tertiarySystemFillColor适合填充大型形状。
      *示例:输入字段,搜索栏,按钮。
     */
    @property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor;
    An overlay fill color for large shapes.
    大型形状的叠加填充颜色。
    
    Discussion
    Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
    Use this color to fill large shapes, such as input fields, search bars, or buttons.
    
    讨论
    对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
    使用此颜色填充大型形状,例如输入字段,搜索栏或按钮。
    
    /* quaternarySystemFillColor is appropriate for filling large areas containing complex content.
     * Example: Expanded table cells.
     */
    / * quaternarySystemFillColor适用于填充包含复杂内容的大区域。
      *示例:扩展的表格单元格。
     */
    @property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor;
    An overlay fill color for large areas containing complex content.
    包含复杂内容的大区域的叠加填充颜色。
    
    Discussion
    Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
    Use this color to fill large areas that contain complex content, such as an expanded table cell.
    
    讨论
    对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
    使用此颜色填充包含复杂内容的大区域,例如展开的表格单元格。
    

    如何监听模式变化(暗黑模式和浅色模式)

    系统为我们提供了一个回调方法,当 light dark 切换时就会触发这个方法。

    - (void) traitCollectionDidChange: (UITraitCollection *) previousTraitCollection {
        [super traitCollectionDidChange: previousTraitCollection];
        if ((self.traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass)
            || (self.traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass)) {
            // your custom implementation here
            NSLog(@"traitCollectionDidChange");
        }
    }
    

    改变当前模式

    self.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
    

    需要给每一个 Controller 和 View 都设置一遍吗?

    答案是不需要,我们先来看一张图。


    16b3ccb241c318b7.jpeg
    当我们设置一个 controller 为 dark 之后,这个 controller 下的 view,都会是 dark mode,但是后续推出的 controller 仍然是跟随系统的样式。
    因为苹果对 overrideUserInterfaceStyle 属性的解释是这样的。
    当我们在一个普通的 controlle, view 上重写这个属性,只会影响当前的视图,不会影响前面的 controller 和后续推出的  controller。
    但是当我们在 window.rootViewController 上设置 overrideUserInterfaceStyle 的时候,就会影响 rootViewController 下所有的 controller, view,包括后续推出的 controller。
    我们回到刚刚的问题上,如果 App 打开夜间模式,那么很简单我们只需要设置 rootViewController 的 overrideUserInterfaceStyle 属性就好了。
    

    资料:
    https://juejin.im/post/5cf6276be51d455a68490b26

    WWDC2019 适配暗黑模式PPT (https://devstreaming-cdn.apple.com/videos/wwdc/2019/214iqtpuhih53fw2/214/214_implementing_dark_mode_on_ios.pdf?dl=1
    https://github.com/Dongxi729/Implementing-Dark-Mode-on-iOS-PDF-
    WWDC2019暗黑模式代码(https://developer.apple.com/documentation/uikit/appearance_customization/adopting_ios_dark_mode
    https://github.com/Dongxi729/AdoptingIOSDarkMode

    WWDC2019
    Implementing Dark Mode on iOS
    https://developer.apple.com/videos/play/wwdc2019/214/

    视频流地址:(貌似需要翻墙才能看,,,):
    https://devstreaming-cdn.apple.com/videos/wwdc/2019/214iqtpuhih53fw2/214/hls_vod_mvp.m3u8

    相关文章

      网友评论

        本文标题:关于新增iOS 13 Dark Mode API的那些事。。。

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