iOS 13適配——暗黑模式

暗黑模式介紹
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
在這裏插入圖片描述

注意:屬性值LightDark需要首字母大寫,否則無效。

App暗黑模式的適配怎麼做?

適配包含兩方面,顏色適配和圖片適配。

顏色適配要怎麼做?

方法1
使用系統顏色systemBackgroundColor,淺色模式下顯示白色,深色模式下顯示黑色;存在問題,只能顯示白色或黑色。

self.view.backgroundColor = UIColor.systemBackgroundColor;

或使用系統顏色labelColor,淺色模式下顯示黑色,深色模式下顯示白色;
存在問題,只能顯示黑色或白色。

label.textColor = UIColor.labelColor;

常用的系統動態模式顏色:文本顏色labelColor、輔助內容的文本標籤顏色secondaryLabelColor、三級tertiaryLabelColor、超鏈接標籤顏色linkColor、分隔符(細邊框或者分割線)separatorColoropaqueseparatorColor、界面背景色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並設值爲LightDark,使 app 保持白色模式,或黑色模式;
3、可以使用設置屬性overrideUserInterfaceStyle值爲UIUserInterfaceStyleLightUIUserInterfaceStyleDark,使某個UI 保持爲白色模式,或黑色模式;

另外,補充下開發中可以通過調用UITraitCollection.currentTraitCollection.userInterfaceStyle獲取當前模式,以便可以根據不同的模式執行不同的操作。
如:

if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
 	NSLog(@"DarkMode");
} else {
 	NSLog(@"LightMode");
}

以上純屬個人認知,不足之外,還請大家留言共同學習討論。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章