iOS13 暗黑模式的適配(Dark Mode)

盡管iOS13已經推出了大半年多的時間,但是依舊還是有不少APP還未適配iOS13。對此,蘋果公司再次給開發者們發送電子郵件,提醒開發者們從2020年4月份開始所有新App喝App更新都需要使用iOS13 SDK構建,并且支持iPhone XS Max或更高版本設備。


20177888-020fcfba3808b853.png

蘋果稱:“使用iOS13,你的應用程序可以利用黑暗模式,iPhone的全新設計,使用Apple登錄快速輕松地登錄應用程序,以及ARKit 3、Core ML 3 和 Siri最新進展。使用Xcode 11G預覽版構建你的應用程序,在運行最新GM中預覽版的iOS設備上測試它們,并提交以供審核?!?/p>

話不多說!先看看黑白模式的效果圖


20177888-02dfcd3c27cc076e.jpeg

開發者主要從顏色和圖片兩個方面進行適配,我們不需要關心切換模式時該如何操作,這些都由系統幫我們實現

iOS13 之前 UIColor只能表示一種顏色,而從 iOS13 開始UIColor是一個動態的顏色,在Light Mode和Dark Mode可以分別設置不同的顏色。

iOS13系統提供了一些動態顏色:

@property (class, nonatomic, readonly) UIColor *systemGray2Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray3Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray4Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray5Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray6Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *labelColor              API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *secondaryLabelColor     API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor      API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor    API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *linkColor               API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *placeholderTextColor    API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *separatorColor          API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor    API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemBackgroundColor                   API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor          API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor           API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor            API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor   API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor    API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemFillColor                         API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemFillColor                API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor                 API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor               API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);

話不多說,來看看實例

    // 設置背景顏色
    self.view.backgroundColor = [UIColor systemBackgroundColor];
    // 設置文字顏色
    _titleLabel.textColor = [UIColor labelColor];
    // 設置數字顏色
    _detailLabel.textColor = [UIColor placeholderTextColor];

效果圖


20177888-f8d3f15af67fa367.jpeg

用法和iOS13之前的一樣,使用系統提供的這些動態顏色,不需要其他的適配操作

這個時候有人會問了,如果我不想用系統的怎么辦呢?

不要慌,實際開發過程中系統提供的這些顏色還遠遠不夠,因此我們需要創建更多的動態顏色!

iOS13 UIColor增加了兩個初始化方法,使用以下方法可以創建動態UIColor

+ (UIColor*)colorWithDynamicProvider:(UIColor* (^)(UITraitCollection*))dynamicProviderAPI_AVAILABLE(ios(13.0),tvos(13.0))API_UNAVAILABLE(watchos);
- (UIColor*)initWithDynamicProvider:(UIColor* (^)(UITraitCollection*))dynamicProviderAPI_AVAILABLE(ios(13.0),tvos(13.0))API_UNAVAILABLE(watchos);

這兩個方法要求傳一個block進去,當系統在LightMode和DarkMode之間相互切換時就會觸發此回調。這個block會返回一個UITraitCollection類,我們需要使用其屬性userInterfaceStyle,它是一個枚舉類型,會告訴我們當前是LightMode還是DarkMode。

typedefNS_ENUM(NSInteger,UIUserInterfaceStyle) {
    UIUserInterfaceStyleUnspecified,
    UIUserInterfaceStyleLight,
    UIUserInterfaceStyleDark,
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);

現在我們來看看代碼片段:

UIColor *color = [UIColor colorWithDynamicProvider:^UIColor* _Nonnull(UITraitCollection* _Nonnull trainCollection) {
    return [traitCollection userInterfaceStyle] == UIUserInterfaceStyleLight ? [UIColor redColor] : [UIColor yellowColor];
}];
_topView.backgroundColor = color;
當然!如果覺得麻煩可以把代碼片段寫成宏定義用起來就方便很多了。
#define KDarkColor(lightColor, DarkColor) [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {\
    return [traitCollection userInterfaceStyle] == UIUserInterfaceStyleLight ? lightColor : DarkColor;\
}]

- (void)viewDidLoad {
    [super viewDidLoad];
    // 設置顏色白 or 黑
    _topView.backgroundColor = KDarkColor([UIColor redColor], [UIColor yellowColor]);
}

效果圖


20177888-68c3e74c7f67c5ab.jpeg

說完顏色,接下來我們來看看圖片怎么適配

首先打開Assets.xcassets 新建一個Image set 并給他取個名:


20177888-4ef3c6dc04cec82d.png

然后在右側菜單找到Appearances,選擇Any,Dark 并拖兩張圖片進去


20177888-d142a41c21653200.png
// 設置圖片
_imageView.image = [UIImage imageNamed:@"icon_logo"];

再來看看最終效果


20177888-02dfcd3c27cc076e.jpeg

是不是感覺不是那么難了?
好了 祝大家代碼越來越優秀 !

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。