Adapt JDME To iOS13 DarkMode

全局關閉DarkMode

這是目前採起的方案，讓APP始終保持LightMode，在info.plsit文件中，添加UIUserInterfaceStyle , 值爲Light 。

咱們要適配DarkMode，須要將UIUserInterfaceStyle刪除。

UIColor

iOS13以前 UIColor只能表示一種顏色，從iOS13開始UIColor是一個動態的顏色，在LightMode和DarkMode能夠分別設置不一樣的顏色。

1.首先系統爲咱們提供了一些動態顏色，使用這種動態顏色，系統直接替咱們完成了適配工做。可是系統提供的顏色不符合APP的設計規範的話，通常狀況下咱們用不到。

@property (class, nonatomic, readonly) UIColor *systemBrownColor        API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemIndigoColor       API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGray2Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
...
...
複製代碼

2.自定義動態UIColor

UIColor *textDyColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
      if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
          return [UIColor JMEColorWithHexString:@"#2E2D2D"];
      } else {
          return [UIColor yellowColor];
      }
 }];
 _nameLabel.textColor = textDyColor;
複製代碼

這樣當系統切換DarkMode/LightMode時，會回調(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider這個block，自動爲咱們更新顏色。

圖片資源

JDME目前使用了Assets.xcassets來管理圖片，適配DarkMode仍是比較方便的。

打開Assets.xcassets，設置Appearance爲 Any,Dark

將設計師提供的DarkMode素材圖片拖入對應的位置，還像往常同樣使用圖片就能夠了。

[_logoImage setImage:[UIImage imageNamed:@"icon_logo"]];
複製代碼

獲取當前模式（LightMode/DarkMode）

上面提到的顏色和圖片，都是由系統來幫咱們完成切換的。可是在某些場景下，咱們須要根據當前的模式，來作一些其餘的適配需求。

咱們能夠在 UIViewController 或者 UIView 中調用traitCollection.userInterfaceStyle來獲取當前視圖的模式。

if (@available(iOS 13.0, *)) {
        UIUserInterfaceStyle style = self.traitCollection.userInterfaceStyle;
        if (style == UIUserInterfaceStyleLight) {
            ///TODO:...
        } else {
            ///TODO:...
        }
    }
    
複製代碼

userInterfaceStyle 是iOS12出現的，可是暗黑模式是iOS13纔有的，因此爲了不沒必要要的影響，咱們仍是加上@available(iOS 13.0, *) 的判斷條件。

適當的時候咱們可能還須要在drawRect/layoutSubViews等方法中，根據當前的模式從新設定一些色值。

監聽模式的切換（LightMode/DarkMode）

不管是LightMode仍是DarkMode，用戶均可以切出APP，或者下拉控制中心浮層來隨意切換，因此咱們還須要監聽模式的切換。

在 UIView 和 UIViewController 中，當模式切換時，就會觸發下面這個方法

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    if (@available(iOS 13.0, *)) {
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            ///TODO:...
        }
    } else {
        // Fallback on earlier versions
    }
}
複製代碼

CGColor

對於CGColor，咱們可使用上述的獲取當前模式和監聽模式的方式來處理不一樣的CGColor。

Status Bar

以前 Status Bar 有兩種狀態，default 和 lightContent

如今 Status Bar 有三種狀態，default, darkContent 和 lightContent

如今的 darkContent 對應以前的 default，如今的 default 會根據狀況自動選擇 darkContent 和 lightContent

JDME中設置狀態欄顏色的地方有不少，這個還得具體狀況具體分析。

UIActivityIndicatorView

以前的 UIActivityIndicatorView 有三種 style 分別爲 whiteLarge, white 和 gray，如今所有廢棄。

增長兩種 style 分別爲 medium 和 large，指示器顏色用 color 屬性修改。

NSAttributedString

對於UILabel、UITextField、UITextView，在設置NSAttributedString時也要考慮適配Dark Mode

Storyboard/Xib

xib中，系統提供了使用colorAssets的方式，相似於圖片，可是爲了兼容低版本，咱們仍是須要手動代碼來更改顏色，單獨適配。

第三方模塊：

H5 App （WKWebview）

具體由第三方應用作適配

SDK

須要相關團隊作適配。

Flutter Module （Calendar/Login）

儘管 Flutter 在 MaterialApp中提供了theme 與 darkTheme兩個入口讓咱們設置兩種模式下的顏色及文字樣式，可是仍是須要注意一些細節，提供的樣式是否與設計師的要求一致。

注意，Flutter 1.9.1的版本並無適配iOS 13 Status Bar新增的UIStatusBarStyleDarkContent 。

ReactNative Module （JoySpace）

RN團隊須要作適配。

對於設計師

設計師須要提供一套設計規範，做爲底層顏色自動轉換的映射表。咱們使用系統提供的方案，能夠很快作到顏色轉換來適配暗黑色模式。可是，有些顏色是須要單獨配置的，不能徹底遵循底層的顏色轉換，因此，每一個頁面都須要設計人員驗收，自動轉換的顏色是否符合總體頁面的UI效果，若是有變更，儘可能給出一份暗黑模式的標註圖，而後咱們再作單獨配置。因此，對於設計人員和開發須要適配的工做量仍是蠻大的。