WWDC2019-214-iOS 13 適配 dark mode

Dark Mode

參考連接：

WWDC 2019-Implementing Dark Mode on iOS

Reource-Adopting iOS Dark Mode

一 、原理

狀態UITraitCollection改變從屏幕到 view 的傳遞過程，目前支持手動觸發和自動觸發。若是設置了 view 的 dynamic color 和 dynamic image, 則 view 的 color 和 image 都會跟着改變。

當前情景改變會調用UITraitEnvironment(iOS 8)協議的方法，對於須要單獨適配的 View，ViewController 須要在此方法進行一些特殊處理，UIView，UIViewController 均遵照該協議

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    
    // 對比情景改變
    BOOL isChanged = [traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection];
}
複製代碼

View 的 layoutSubView, ViewController 的 viewDidLayoutSubviews 均會觸發 traitCollectionDidChange:方法

二 、適配相關

1. Dynamic Color

   動態顏色，根據當前情景自動切換顏色，iOS 13 新定義了一批 dynamic color, 大部分以 system 開頭，也有以適用類別開頭的，例如 labelColor,systemGroupedBackgroundColor，能夠直接用

   • 自定義 dynamic color

     // iOS 13
     UIColor *dynamicColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitC) {
             if (traitC.userInterfaceStyle == UIUserInterfaceStyleDark) {
                 return UIColor.redColor;
             } else {
                 return UIColor.greenColor;
             }
         }];
     複製代碼

   • 根據當前情景取出 dynamic color 中的色值----用於根據不一樣情景取色值，設置色值。

     UIColor *dynamicColor = [UIColor systemBackgroundColor];
     UITraitCollection *traitCollection = someView.traitCollection;
     UIColor *resolvedColor = [dynamicColor resolvedColorWithTraitCollection:traitCollection];
     複製代碼

     示例用途：

     // 設置 view 的 border 顏色
     		UILayer *layer = [UILayer new];
     
     		UITraitCollection *traitCollection = someView.traitCollection;
     
     		// option 1 -- iOS 8
     		UIColor *resolvedColor = [dynamicColor resolvedColorWithTraitCollection:traitCollection];
     		layer.borderColor = resolvedColor.CGColor;
     
         // option 2 -- iOS 13
         [traitCollection performAsCurrentTraitCollection:^{
             layer.borderColor = resolvedColor.CGColor;
         }];
         
         // option 3 -- iOS 13
         UITraitCollection *savedTraitCollection = [UITraitCollection currentTraitCollection];
         
         [UITraitCollection setCurrentTraitCollection:traitCollection];
         layer.borderColor = UIColor.labelColor.CGColor;
         
         [UITraitCollection setCurrentTraitCollection:savedTraitCollection];
     複製代碼

2. Dynamic Image

   • 建立 dynamic image

     

3. webContent

   • Use color-scheme to declare support
   • Adopt prefers-color-scheme media query
   • Use for hero graphics
   • Consider using var() for color schemes

前端代碼示例：詳見 WWDC Resource

// 色值
:root {
  color-scheme: light dark; 
  --post-title-color: #333;
  --header-bg-color: #593a78;
  --header-txt-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
  --post-title-color: white;
  --header-bg-color: #513d66;
  --header-txt-color: #eee;
  }
}

h1 {
color: var(--post-title-color);
}
.header {
background-color: var(--header-bg-color);
color: var(--header-txt-color);
}

// 圖片
<img src="mojave-day.jpg">

<picture>
  <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
  <img src="mojave-day.jpg">
</picture>

複製代碼

3、調試

設置啓動參數 Enable debug logging with launch argument

-UITraitCollectionChangeLoggingEnabled YES