2. 程式人生 > 程式設計 >iOS13適配深色模式(Dark Mode)的實現

iOS13適配深色模式(Dark Mode)的實現

阿新 • • 發佈：2020-03-29

好像大概也許是一年前,Mac OS系統釋出了深色模式外觀,看著挺刺激,時至今日用著也還挺爽的

終於,隨著iPhone11等新手機的發售,iOS 13系統也正式釋出了,伴隨著手機版的深色模式也出現在了大眾視野

我們這些iOS程式猿也有事情做了,原有專案適配iOS13系統,適配Dark Mode深色模式

雖然現在並沒有要求強制適配Dark Mode,但是DarK適配卻也迫在眉睫

Apps on iOS 13 are expected to support dark mode Use system colors and materials Create your own dynamic colors and images Leverage flexible infrastructure

獲取當前模式

提供兩種方式設定手機當前外觀模式

  • 設定 --> 顯示與亮度
  • 控制中心,長按亮度調節按鈕

獲取當前模式

我們需要選獲取到當前出於什麼模式,在根據不同的模式進行適配,iOS 13中新增了獲取當前模式的API

Swift

// 獲取當前模式
let currentMode = UITraitCollection.current.userInterfaceStyle
if (currentMode == .dark) {
 print("深色模式")
} else if (currentMode == .light) {
 print("淺色模式")
} else {
 print("未知模式")
}

 
open var userInterfaceStyle: UIUserInterfaceStyle { get } 

// 所有模式
public enum UIUserInterfaceStyle : Int {
 // 未指明的
 case unspecified
 // 淺色模式
 case light
 // 深色模式
 case dark
}

OC語言

if (@available(iOS 13.0,*)) {
 UIUserInterfaceStyle mode = UITraitCollection.currentTraitCollection.userInterfaceStyle;
 if (mode == UIUserInterfaceStyleDark) {
  NSLog(@"深色模式");
 } else if (mode == UIUserInterfaceStyleLight) {
  NSLog(@"淺色模式");
 } else {
  NSLog(@"未知模式");
 }
}

// 各種列舉值
typedef NS_ENUM(NSInteger,UIUserInterfaceStyle) {
 UIUserInterfaceStyleUnspecified,UIUserInterfaceStyleLight,UIUserInterfaceStyleDark,} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);

監聽系統模式的變化

在iOS13系統中,UIViewController遵循了兩個協議: UITraitEnvironment和UIContentContainer協議

在UITraitEnvironment協議中,為我們提供了一個監聽當前模式變化的方法

@protocol UITraitEnvironment <NSObject>
// 當前模式
@property (nonatomic,readonly) UITraitCollection *traitCollection API_AVAILABLE(ios(8.0));

// 重寫該方法監聽模式的改變
- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
@end

public protocol UITraitEnvironment : NSObjectProtocol {
 // 當前模式
 @available(iOS 8.0,*)
 var traitCollection: UITraitCollection { get }

 // 重寫該方法監聽模式的改變
 @available(iOS 8.0,*)
 func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}


// 使用方法
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
 super.traitCollectionDidChange(previousTraitCollection)
 
 // 每次模式改變的時候,這裡都會執行
 print("模式改變了")
}

顏色相關適配

  • 不同模式的適配主要涉及顏色和圖片兩個方面的適配
  • 其中顏色適配,包括相關背景色和字型顏色
  • 當系統模式切換的時候,我們不需要如何操作,系統會自動渲染頁面,只需要做好不同模式的顏色和圖片即可

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,readonly) UIColor *systemGreenColor  API_AVAILABLE(ios(7.0),readonly) UIColor *systemBlueColor   API_AVAILABLE(ios(7.0),readonly) UIColor *systemOrangeColor  API_AVAILABLE(ios(7.0),readonly) UIColor *systemYellowColor  API_AVAILABLE(ios(7.0),readonly) UIColor *systemPinkColor   API_AVAILABLE(ios(7.0),readonly) UIColor *systemPurpleColor  API_AVAILABLE(ios(9.0),readonly) UIColor *systemTealColor   API_AVAILABLE(ios(7.0),readonly) UIColor *systemIndigoColor  API_AVAILABLE(ios(13.0),tvos(13.0)) API_UNAVAILABLE(watchos);
// 灰色種類,在Light模式下,systemGray6Color更趨向於白色
@property (class,readonly) UIColor *systemGrayColor   API_AVAILABLE(ios(7.0),readonly) UIColor *systemGray2Color  API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos,watchos);
@property (class,readonly) UIColor *systemGray3Color  API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos,readonly) UIColor *systemGray4Color  API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos,readonly) UIColor *systemGray5Color  API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos,readonly) UIColor *systemGray6Color  API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos,watchos);

#pragma mark Foreground colors
@property (class,readonly) UIColor *labelColor    API_AVAILABLE(ios(13.0),tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class,readonly) UIColor *secondaryLabelColor  API_AVAILABLE(ios(13.0),readonly) UIColor *tertiaryLabelColor  API_AVAILABLE(ios(13.0),readonly) UIColor *quaternaryLabelColor API_AVAILABLE(ios(13.0),tvos(13.0)) API_UNAVAILABLE(watchos);
// 系統連結的前景色
@property (class,readonly) UIColor *linkColor    API_AVAILABLE(ios(13.0),tvos(13.0)) API_UNAVAILABLE(watchos);
// 佔位文字的顏色
@property (class,readonly) UIColor *placeholderTextColor API_AVAILABLE(ios(13.0),tvos(13.0)) API_UNAVAILABLE(watchos);
// 邊框或者分割線的顏色
@property (class,readonly) UIColor *separatorColor   API_AVAILABLE(ios(13.0),readonly) UIColor *opaqueSeparatorColor API_AVAILABLE(ios(13.0),tvos(13.0)) API_UNAVAILABLE(watchos);

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

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

#pragma mark Other colors
// 這兩個是非動態顏色值
@property(class,readonly) UIColor *lightTextColor API_UNAVAILABLE(tvos); // for a dark background
@property(class,readonly) UIColor *darkTextColor API_UNAVAILABLE(tvos);  // for a light background

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

@end

上面系統提供的這些顏色種類,根本不能滿足我們正常開發的需要,大部分的顏色值也都是自定義

系統也為我們提供了建立自定義顏色的方法

@available(iOS 13.0,*)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

在OC中

+ (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裡面,所以圖片的適配,我們就相對麻煩一些了
正常情況下都是下面這中處理方式

iOS13適配深色模式(Dark Mode)的實現

需要適配不同模式的情況下,需要兩套不同的圖片,並做如下設定

在設定Appearances時,我們選擇Any,Dark就可以了(只需要適配深色模式和非深色模式)

iOS13適配深色模式(Dark Mode)的實現

適配相關

當前頁面模式

原專案中如果沒有適配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 其他更新

蘋果登入

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提供的按鈕樣式，已經適配各類裝置,可參考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)的實現的文章就介紹到這了,更多相關iOS13適配深色模式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

iOS13適配深色模式(Dark Mode)的實現

好像大概也許是一年前,Mac OS系統釋出了深色模式外觀,看著挺刺激,時至今日用著也還挺爽的

Flutter適配深色模式的方法（DarkMode）

1.瞎叨叨 也不知道寫點什麼，本來想寫寫Flutter的整合測試。因為前一陣子給flutter_deer寫了一套，不過感覺也沒啥內容，寫不了幾句話就放棄了。(其實本篇內容也不多。。。)

Android 版微軟 Office 已適配深色模式

5 月 23 日訊息Android 版微軟 Office 近日釋出了最新版本，正式適配了Android 系統的深色模式。

小米 MIUI 本週公告：將推進第三方 App 適配深色模式，修復主題相容問題

8 月 21 日訊息小米於 8 月 20 日公佈了本週公告。本週小米舉辦了負責人線上“米家 App”專場活動。官方表示，目前大多數小米智慧家電都已經可以在米家 App 進行控制，此外可穿戴產品建議使用“小米穿戴 App”，已支

網易雲音樂 HD iPadOS 版 2.0.80 更新：正式適配深色模式

感謝網友 林仝tt 的線索投遞！

iOS開發_適配深色模式

1、顏色 1.1 系統自動處理 self.backgroundColor = [UIColor systemRedColor]; 1.2 自定義顏色 UIColor *color = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull tr

iOS13 適配和Xcode11.0踩坑小結

iOS13中presentViewController的問題 更新了Xcode11.0 beta之後，在iOS13中執行程式碼發現presentViewController和之前彈出的樣式不一樣。

vue cli3適配所有端方案的實現

應用場景 頁面需要在pc端和移動端同時相容，以前我的方案都是使用媒體查詢來判斷當前裝置大小，然後寫兩套或者三套css程式碼來相容他們，能達到目的，並且效果不錯，但是感覺還是稍微麻煩了一丟丟。後面瞭解了一下fl

Go!Go!Go!設計模式-適配設計模式

零：前言 參考：https://github.com/senghoo/golang-design-pattern/tree/master/02_adapter介面卡模式用於轉換一種介面適配另一種介面。實際使用中Adaptee一般為介面，並且使用工廠函式生成例項。在Adapter中匿名組

微軟為 Win10 搜尋推出伺服器端更新，正式適配深色主題

11 月 6 日訊息，在現版本的 Windows 10 中微軟已經添加了深色主題模式為使用者提供更好的夜間使用體驗，且現階段基本所有微軟第一方的軟體和內容如微軟應用商店等都已經支援深色主題模式，但其中有一個明顯的例外就

AndroidQ(10)黑暗模式適配的實現

前言：作為一個Android程式設計師，每年最期待就是Google的釋出會啦！！這不，今年的AndroidQ如期而至。這裡簡單介紹一下Android的新特性：

深色模式適配指南

本文首發於政採雲前端部落格：深色模式適配指南 背景 隨著 iOS 13 的釋出，深色模式（Dark Mode）越來越多地出現在大眾的視野中，支援深色模式已經成為現代移動應用和網站的一個潮流，前段時間更是因為微信的適

小米張國全：MIUI 深色模式將進行專項優化，已適配 App 會取消系統強制

7 月 7 日訊息小米公司上個月宣佈成立 MIUI 先鋒小組，集中解決使用者反饋的各種問題，包括髮熱、Bug、穩定性等。該小組由 MIUI 負責人金凡領導，官方將不斷公佈 MIUI 解決問題最新進展。

小米手機 MIUI 開發版新增小部件：支援深色模式，QQ 音樂、高德/百度地圖、WPS、鬥魚已適配

9 月 24 日訊息 小米手機 MIUI 開發版新增支援小部件，眾多系統應用都已適配，還支援三方應用小部件，首批支援：百度 App、QQ 音樂、高德地圖、百度地圖、WPS、鬥魚。獲悉，在桌面雙指捏合即可進入小部件商店，選擇

網頁跟隨系統 dark mode （暗黑模式） 的實現

經過幾十年的沉默， dark mode（暗黑模式） 又回到了我們面前，越來越多的 APP 有了暗黑主題，越來月多的作業系統原生添加了 “全域性暗黑模式”， 那麼一個網站如何跟隨系統的腳步， 該用暗黑模式的時候就用暗黑模式

js實現適配移動端的拖動效果

本文例項為大家分享了js實現適配移動端的拖動效果，供大家參考，具體內容如下

js實現整體縮放頁面適配移動端

大家在適配頁面的Web端和移動端時候，如果不需要那麼麻煩，就可以使用js進行整體縮放，只需要引入一個js,改動htmll頭部程式碼即可

flexible.js實現移動端rem適配方案

需要了解的基礎知識： 物理畫素：物理畫素又被稱為裝置畫素，他是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。正是這些裝置畫素的微小距離欺騙了我們肉眼看到的影象效果。

微信小程式吸底區域適配iPhoneX的實現

微信小程式適配iPhone X主要針對fix定位到底部的區域，比如詳情頁或購物車底部的按鈕欄，會與iPhone X的Home Indicator橫條重疊，這樣在點選下方按鈕時很容易誤觸發手勢操作，如下圖：

IOS 螢幕適配方案實現縮放window的示例程式碼

背景： 公司有個iPad專案（只支援橫屏），是11年開發的，那時的iPad只有1024x768的解析度，所以沒有螢幕適配的問題，frame都是寫死的。後來不同尺寸的iPad相繼出現，本來應該會出現螢幕不能適配的問題，但是由於該專