一、設(shè)計(jì)
1. 為什么需要Dark Mode:
- 讓用戶更好的Focus于App內(nèi)展現(xiàn)的內(nèi)容
- 在暗光環(huán)境下減少用戶視覺(jué)疲勞，減少對(duì)周圍他人影響
- OLED屏幕可以大幅降低屏幕耗電量
- 用戶對(duì)深色UI的熱衷
- 在不大刀闊斧的改動(dòng)UI界面的前提下兵睛，為用戶帶來(lái)耳目一新的視覺(jué)體驗(yàn)
2. iOS的設(shè)計(jì)團(tuán)隊(duì)為Dark Mode設(shè)立了以下五點(diǎn)設(shè)計(jì)原則：
- 保持視覺(jué)風(fēng)格的熟悉感
- 平臺(tái)一致性
- 清晰的信息架構(gòu)
- 輔助功能
- 易于開(kāi)發(fā)者采用
3. Submit Your iPhone Apps to the App Store
iOS 13 is now running on 77% of all iOS devices introduced in the last four years, worldwide. Deliver great user experiences by seamlessly integrating with Dark Mode, Sign in with Apple, and the latest advances in ARKit 3, Core ML 3, and Siri. Starting April 30, 2020, all iPhone apps submitted to the App Store must be built with the iOS 13 SDK or later.
Take advantage of Xcode features such as storyboards (including launch storyboards), Auto Layout, and SwiftUI, to ensure your app’s interface elements and layouts automatically fit the display of all iPhone models, regardless of size or aspect ratio. Starting April 30, 2020, all apps submitted to the App Store must use an Xcode storyboard to provide the app’s launch screen and all iPhone apps must support all iPhone screens.
- 針對(duì)蘋(píng)果官方3月4日的公告毙籽，分析如下：
- 從2020年4月30日起灌旧，所有提交給App Store的 iPhone應(yīng)用程序都必須使用iOS 13 SDK或更高版本構(gòu)建。（必須使用Xcode 11或更高版本打包上架爵嗅。）
- 從2020年4月30日起，所有提交給App Store的應(yīng)用程序都必須使用 storyboard 來(lái)提供應(yīng)用程序的啟動(dòng)屏幕笨蚁。
- 所有iPhone應(yīng)用程序都必須支持所有iPhone屏幕睹晒。
4. 微信適配了暗黑模式（2020.03.09）
二、適配
1. 啟動(dòng)頁(yè)：
從2020年4月30日起括细，所有提交給App Store的應(yīng)用程序都必須使用 storyboard 來(lái)提供應(yīng)用程序的啟動(dòng)屏幕伪很。
方法一：
-
在 storyboard 中拖入U(xiǎn)IImageView控件，設(shè)置好約束奋单。
- 在
Assets.xcassets中新建New Image Set锉试。默認(rèn)新建的Image是不支持多種機(jī)型的，打開(kāi)該Image的Contents.json文件辱匿，復(fù)制下面的代碼覆蓋該文件：
把"filename"對(duì)應(yīng)的value替換為本地對(duì)應(yīng)的圖片名稱即可（_dark結(jié)尾的圖片對(duì)應(yīng)的是暗黑模式）键痛。
{
"images" : [
{
"idiom" : "iphone",
"scale" : "1x"
},
{
"idiom" : "iphone",
"scale" : "1x",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
]
},
{
"idiom" : "iphone",
"filename" : "iPhone_4.png",
"scale" : "2x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_4_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"scale" : "2x"
},
{
"idiom" : "iphone",
"scale" : "3x"
},
{
"idiom" : "iphone",
"scale" : "3x",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
]
},
{
"idiom" : "iphone",
"subtype" : "retina4",
"scale" : "1x"
},
{
"idiom" : "iphone",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "retina4",
"scale" : "1x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_5.png",
"subtype" : "retina4",
"scale" : "2x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_5_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "retina4",
"scale" : "2x"
},
{
"idiom" : "iphone",
"subtype" : "retina4",
"scale" : "3x"
},
{
"idiom" : "iphone",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "retina4",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_7P.png",
"subtype" : "736h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_7P_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "736h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_7.png",
"subtype" : "667h",
"scale" : "2x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_7_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "667h",
"scale" : "2x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_X.png",
"subtype" : "2436h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_X_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "2436h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_Xs Max.png",
"subtype" : "2688h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_Xs Max_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "2688h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_XR.png",
"subtype" : "1792h",
"scale" : "2x"
},
{
"idiom" : "iphone",
"filename" : "iPhone_XR_dark.png",
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"subtype" : "1792h",
"scale" : "2x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
- 在 LaunchScreen.storyboard 中選擇自己創(chuàng)建的image炫彩。
- 存在緩存問(wèn)題（待解決）
方法二：
對(duì)于簡(jiǎn)單的啟動(dòng)圖頁(yè)面，直接在 LaunchScreen.storyboard 中自己畫(huà)絮短。創(chuàng)建icon江兢、label等控件，設(shè)置好約束丁频，就不用擔(dān)心屏幕適配問(wèn)題了杉允。
2. UITraitCollection：
在iOS13中，我們可以通過(guò)UITraitCollection來(lái)判斷當(dāng)前系統(tǒng)所處的模式席里。UIScreen, UIWindow, UIViewController, UIPresentationController, UIView 都遵循了 UITraitEnvironment 協(xié)議叔磷。
/*! Trait environments expose a trait collection that describes their environment. */
@protocol UITraitEnvironment <NSObject>
@property (nonatomic, readonly) UITraitCollection *traitCollection API_AVAILABLE(ios(8.0));
/*! To be overridden as needed to provide custom behavior when the environment's traits change. */
- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
@end
當(dāng)用戶更改系統(tǒng)外觀時(shí)，系統(tǒng)會(huì)自動(dòng)要求每個(gè)窗口和視圖重繪自身奖磁。在此過(guò)程中改基，系統(tǒng)將為macOS和iOS調(diào)用下表中列出的幾種眾所周知的方法來(lái)更新您的內(nèi)容。系統(tǒng)在調(diào)用這些方法之前會(huì)更新特征環(huán)境咖为，所以只有在下列方法中獲取 traitCollection 屬性才是準(zhǔn)確的秕狰。
如果您在這些方法之外進(jìn)行外觀敏感的更改，則您的應(yīng)用可能無(wú)法針對(duì)當(dāng)前環(huán)境正確繪制其內(nèi)容躁染。
在 iOS 13中鸣哀，UIView、UIViewController 吞彤、UIWindow 有了一個(gè) overrideUserInterfaceStyle 的新屬性我衬，可以覆蓋系統(tǒng)的模式。
單個(gè)頁(yè)面或視圖關(guān)閉暗黑模式饰恕，設(shè)置 overrideUserInterfaceStyle 為對(duì)應(yīng)的模式挠羔，強(qiáng)制限制該視圖與其子視圖以設(shè)置的模式進(jìn)行展示，不跟隨系統(tǒng)模式改變進(jìn)行改變懂盐。
self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
設(shè)置此屬性會(huì)影響當(dāng)前view/viewController/window 以及它下面的任何內(nèi)容褥赊。
如果你希望一個(gè)子視圖監(jiān)聽(tīng)系統(tǒng)的模式，請(qǐng)將 overrideUserInterfaceStyle 屬性設(shè)置為.unspecified莉恼。
3. 顏色：
-
系統(tǒng)的語(yǔ)義化顏色
iOS默認(rèn)提供了9個(gè)彩色色板(TintColor)拌喉，在iOS 13中為了保證深色模式下的對(duì)比度效果，每個(gè)TintColor都新增了深淺模式兩種版本俐银，在調(diào)用時(shí)也應(yīng)使用語(yǔ)義化的顏色名稱尿背，比如SystemBlue，在淺色模式下指的是#007AFF捶惜，在深色模式下則是#0A84FF田藐。
-
自定義顏色: 通過(guò) Assets.xcassets
在Assets.xcassets中新建New Color Set。通過(guò)[UIColor colorNamed:@""]方法使用。
通過(guò)代碼自定義顏色：
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
4. 圖片：
-
SF Symbols
SF Symbols 是iOS 13中引入的一項(xiàng)非常重要的新特性汽久，由于Dark Mode下所有圖標(biāo)都會(huì)需要兩套顏色鹤竭，使用靜態(tài)的圖片切圖會(huì)讓圖片素材數(shù)量激增，因此蘋(píng)果干脆做了這一整套1500多個(gè)圖標(biāo)的矢量圖標(biāo)庫(kù)景醇，配合iOS中的基底層與架高層臀稚、語(yǔ)義化顏色、Vibrancy（鮮亮化）等動(dòng)態(tài)的顏色處理三痰，使用SF Symbols可以在深淺模式中都能自動(dòng)獲得完美的展示效果吧寺。
SF Symbols的原理和Iconfont很類似，都是將SVG矢量圖形以Unicode字符的形式打包在字體文件中散劫。SF Symbols是內(nèi)置集成在蘋(píng)果目前的系統(tǒng)默認(rèn)字體San Francisco字體系列里的稚机，開(kāi)發(fā)者只需引用Symbol的名稱就可以迅速調(diào)用出SF Symbols提供的圖標(biāo)。同時(shí)設(shè)計(jì)師也可以利用SF Symbols官方提供的SVG模板制作自定義的圖標(biāo)共App調(diào)用获搏。
為您的應(yīng)用創(chuàng)建自定義符號(hào)圖像
+ (nullable UIImage *)imageNamed:(NSString *)name inBundle:(nullable NSBundle *)bundle withConfiguration:(nullable UIImageConfiguration *)configuration
- 自定義圖片: 通過(guò)
Assets.xcassets
在Assets.xcassets中新建New Image Set赖条。通過(guò)[UIImage imageNamed:@""]方法使用。
5. 模糊效果：
在 iOS 13 中常熙，我們需要讓這些模糊效果隨著系統(tǒng)模式的切換而切換谋币。UIKit 提供了新的模糊樣式且是動(dòng)態(tài)的，會(huì)隨著系統(tǒng)模式的改版而自動(dòng)匹配症概。
利用 UIVisualEffectView 來(lái)創(chuàng)建一些類似模糊的效果時(shí)，不要設(shè)置類似 UIBlurEffectStyleExtraLight 這樣帶有明確顏色的效果早芭，而是設(shè)置 UIKit 中新提供的動(dòng)態(tài)樣式的效果彼城，比如 UIBlurEffectStyleSystemThinMaterialLight 或 UIBlurEffectStyleSystemThinMaterialDark。
UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemMaterial];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
6. webView頁(yè)面：
多數(shù)流行的瀏覽器新版本都已經(jīng)支持了“prefers-color-scheme”參數(shù)來(lái)檢測(cè)系統(tǒng)當(dāng)前的外觀是淺色還是深色模式退个。配合利用類似Semantic Color的方法來(lái)定義網(wǎng)頁(yè)樣式表中同一個(gè)顏色在深淺兩種模式下的色值募壕，Web內(nèi)容也可以獲得同原生App一樣的自動(dòng)適配深淺模式效果。
7. 封裝適配工具：
針對(duì)iOS13暗黑模式的適配工作语盈，寫(xiě)了幾個(gè)分類舱馅，方便項(xiàng)目統(tǒng)一管理適配工作，可以通過(guò) pod 'QYTheme' 導(dǎo)入到項(xiàng)目中刀荒。
功能如下：
-
UIWindow+QYTheme.h
當(dāng) UIUserInterfaceStyle 發(fā)生變化時(shí)的通知代嗤，可用于無(wú)法準(zhǔn)確獲取TraitCollection的地方
-
if (@available(iOS 13.0, *)) {
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(qy_doSomething:)
name:QYUserInterfaceStyleWillChangeNotification
object:nil];
}
-
UIColor+QYTheme.h
統(tǒng)一處理顏色的分類，iOS13以前取anyColor缠借。
-
/// 獲取動(dòng)態(tài)顏色
/// @param anyColor 默認(rèn)顏色
/// @param darkColor 暗黑顏色
+ (UIColor *)qy_setColorWithAny:(UIColor *)anyColor dark:(UIColor *)darkColor;
// 使用方法：
self.view.backgroundColor = [UIColor qy_setColorWithAny:[UIColor whiteColor] dark:[UIColor blackColor]];
-
UIImageView+QYTheme.h
統(tǒng)一處理圖片的分類干毅，可處理本地和網(wǎng)絡(luò)圖片，網(wǎng)絡(luò)圖片依賴SDWebImage框架泼返。
-
/// 設(shè)置圖片 [處理本地圖片]
/// @param anyImage 默認(rèn)圖片
/// @param darkImage 暗黑圖片
- (void)qy_setImageWithAny:(UIImage *)anyImage darkIamge:(UIImage *)darkImage;
/// 設(shè)置圖片 [處理網(wǎng)絡(luò)圖片]
/// @param anyUrl 默認(rèn)url
/// @param darkUrl 暗黑圖片url
/// @param placeholder 通用占位圖
- (void)qy_setImageWithURL:(NSURL *)anyUrl darkImageWithURL:(NSURL *)darkUrl placeholderImage:(UIImage *)placeholder;
/// 設(shè)置圖片 [處理網(wǎng)絡(luò)圖片]
/// @param anyUrl 默認(rèn)url
/// @param placeholder 默認(rèn)占位圖
/// @param darkUrl 暗黑圖片url
/// @param darkPlaceholder 暗黑占位圖
- (void)qy_setImageWithURL:(NSURL *)anyUrl placeholderImage:(UIImage *)placeholder darkImageWithURL:(NSURL *)darkUrl darkPlaceholderImage:(UIImage *)darkPlaceholder;
// 使用方法：
// 本地圖片
[self.imgView qy_setImageWithAny:[UIImage imageNamed:@"anyImage"] darkIamge:[UIImage imageNamed:@"darkImage"]];
// 網(wǎng)絡(luò)圖片
[self.imgView qy_setImageWithURL:[NSURL URLWithString:@"https://xxx"]
darkImageWithURL:[NSURL URLWithString:@"https://xxx"]
placeholderImage:[UIImage imageNamed:@"image"]];
目前工具正在完善硝逢，如有不足，歡迎指正~
源碼放在GitHub上了，想查看的小伙伴可以->戳這里渠鸽。
千里之行叫乌，始于足下。
參考文檔:
寫(xiě)給設(shè)計(jì)師的指南：iOS 13 Dark Mode 深度解析
Apple Design Resources
Submit Your iPhone Apps to the App Store
Supporting Dark Mode in Your Interface
How To Adopt Dark Mode In Your iOS App
使用 QMUITheme 實(shí)現(xiàn)換膚并適配 iOS 13 Dark Mode
