暗黑模式介紹
Implementing Dark Mode on iOS
How To Adopt Dark Mode In Your iOS App
Adopting iOS Dark Mode
Supporting Dark Mode in Your Interface
iOS13有什麼亮點?
iOS 13.0正式版發佈以來,最大的亮點還是新增的支持Dark Mode(暗黑模式)。
暗黑模式可以有效地舒緩眼睛?
我覺得更多的是心理上的安慰。
原理上來說暗黑模式
僅僅是關閉了背景亮度,同時調整了可視內容的顏色,比如暗黑模式下文字以白色爲主等等。它實際上並沒有改變屏幕的“頻閃”問題,當你長時間看屏幕的時候依舊會有視覺疲勞的症狀。
當然,暗黑模式
也讓用戶在暗黑的環境下更友好地體驗產品,能讓主題元素更加凸顯。
另外,據說暗黑模式下可以讓擁有OLED 屏幕的iPhone更加省電,電池續航更久。因爲OLED 屏幕在暗黑模式下主要通過直接熄滅來達到純黑效果,因此可以有效的降低耗電量。
App 要做暗黑的適配嗎?
首先,目前iPhone自帶軟件基本上適配了暗黑模式,開啓暗黑模式後,打開軟件都是黑底白字。
其次,對於開發者而言,蘋果也提供了相應的 API 接口,以供開發者使用。
最後,貌似沒有強制要求,建議開發者根據自己的APP 類型來選擇是否兼容暗黑模式。
如果自己的 App不想適配暗黑模式,要怎麼做?
如果要使app一直保持黑色或者白色模式,可以在info.plist
文件裏面設置屬性User Interface Style
值爲Light
或者Dark
。
注意:屬性值
Light
或Dark
需要首字母大寫
,否則無效。
App暗黑模式的適配怎麼做?
適配包含兩方面,顏色適配和圖片適配。
顏色適配要怎麼做?
方法1
使用系統顏色systemBackgroundColor
,淺色模式下顯示白色,深色模式下顯示黑色;存在問題,只能顯示白色或黑色。
self.view.backgroundColor = UIColor.systemBackgroundColor;
或使用系統顏色labelColor
,淺色模式下顯示黑色,深色模式下顯示白色;
存在問題,只能顯示黑色或白色。
label.textColor = UIColor.labelColor;
常用的系統動態模式顏色:文本顏色
labelColor
、輔助內容的文本標籤顏色secondaryLabelColor
、三級tertiaryLabelColor
、超鏈接標籤顏色linkColor
、分隔符(細邊框或者分割線)separatorColor
或opaqueseparatorColor
、界面背景色systembackgroundColor
等。
方法2
根據模式,實時顯示自定義顏色。
iOS13系統已經提供了相應的 API用於處理顏色,如下所示:
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
// 設置自定義顏色
UIColor *textColor = UIColor.greenColor;
if (@available(iOS 13.0, *)) {
textColor = [UIColor colorWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) {
if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
return UIColor.orangeColor;
}
return UIColor.greenColor;
}];
}
// 顯示自定義顏色
label.textColor = textColor;
方法3
根據模式,實時監聽修改顏色
// 使用示例,如 layer 對應的顏色適配需要使用監聽纔有效
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
if (@available(iOS 13.0, *)) {
if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
// iOS13 暗黑模式
label.layer.borderColor = UIColor.redColor.CGColor;
} else {
// iOS13 普通模式
label.layer.borderColor = UIColor.yellowColor.CGColor;
}
} else {
}
}
除了代碼實現,有沒有其他方式可以實現顏色的暗黑適配呀?
前面3種方法都是直接通過代碼來實現,還有第4種方法是通過在Assets.xcassets
裏定義顏色來實現。
方法4
步驟1:選擇Assets.xcassets
,顯示後鼠標點擊右鍵出現菜單,選擇New Color Set
步驟2:創建後,選中並重命名,如textColor
,後進行操作顯示Appearances
,選擇屬性Any, Dark
,最後分別設置兩種顏色
步驟3:通過函數+ (nullable UIColor *)colorNamed:(NSString *)name
獲取顏色,並進行賦值使用
label.textColor = [UIColor colorNamed:@"textColor"];
設置如圖示
Apperances
設置方法:選中該資源文件, 打開 Xcode ->View ->Inspectors ->Show Attributes Inspectors (或者Option+Command+4)視圖,將 Apperances 選項 改爲Any,Dark
我的 App 適配了暗黑模式,但是我想App 裏的有些界面不要暗黑模式的適配,有什麼辦法嗎?
若想要某個UI 保持白色模式,或黑色模式,可以設置屬性overrideUserInterfaceStyle
的值爲UIUserInterfaceStyleLight
或值爲UIUserInterfaceStyleDark
。
前面告訴了我顏色的暗黑模式適配,那圖片適配的暗黑模式適配又是怎麼實現的?
方法1
通過代碼實現
注意:圖標資源可以保存在
Assets.xcassets
,也可以直接在項目中創建資源目錄保存。
// 定義不同模式的圖標
UIImage *image = [UIImage imageNamed:@"lightName"];
if (@available(iOS 13.0, *)) {
UIImage *imgs = [UIImage imageNamed:lightName inBundle:nil compatibleWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]];
[imgs.imageAsset registerImage:[UIImage imageNamed:@"darkName"] withTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark]];
image = [imgs.imageAsset imageWithTraitCollection:UITraitCollection.currentTraitCollection];
}
// 獲取並使用圖標
imageView.image = image;
方法2
通過設置Assets.xcassets
實現
注意:該方法時,圖標資源必須保存在
Assets.xcassets
。
步驟1 設置圖標,並重命名爲icon
,如圖示
步驟2 使用
imageView.image = [UIImage imageNamed:@"icon"];
介紹完了顏色,圖片在暗黑模式下的適配,給我總結下唄
既是總結,也是強調,在暗黑模式的適配過程中的注意事項:
1、layer
顏色的適配,只能使用回調方法- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
監聽處理;
2、可以在Info.plist
添加屬性User Interface Style
並設值爲Light
或Dark
,使 app 保持白色模式,或黑色模式;
3、可以使用設置屬性overrideUserInterfaceStyle
值爲UIUserInterfaceStyleLight
或UIUserInterfaceStyleDark
,使某個UI 保持爲白色模式,或黑色模式;
另外,補充下開發中可以通過調用UITraitCollection.currentTraitCollection.userInterfaceStyle
獲取當前模式,以便可以根據不同的模式執行不同的操作。
如:
if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
NSLog(@"DarkMode");
} else {
NSLog(@"LightMode");
}
以上純屬個人認知,不足之外,還請大家留言共同學習討論。