iOS適配深色模式

我們所熟悉的 UIView 、UIViewController 、UIScreen、UIWindow 都已經遵從了一個叫UITraitEnvironment的協議。

這些類都擁有一個叫做 traitCollection 的屬性,traitCollection里面有一個userInterfaceStyle屬性,而顏色模式就是存在 userInterfaceStyle 中。

我們就可以通過traitCollection的userInterfaceStyle來判斷當前系統的顏色模式。

if (self.window.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
    <#statements#>
}

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

顏色

在iOS13以后,UIKit給我們提供了很多的動態顏色,以system開頭的都是動態顏色,當我們給 UI 控件設置了動態顏色以后。

UI 控件就會自動的根據當前是否是黑暗模式展現出來對應的顏色。比如這樣寫:

self.view.backgroundColor = [UIColor systemRedColor];

當然,系統提供的這些動態顏色肯定是無法滿足我們的實際開發需求,因此在實際開發中,我們可以創建我們自定義的動態顏色。

在 iOS 13 中, UIKit 為 UIColor 所提供的 新 API 來創建我們自己的動態顏色。

UIColor *color = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) 
{
        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            //深色模式下的顏色
            return [UIColor blueColor];
        }else {
            //淺色模式下的顏色
            return [UIColor purpleColor];
        }
}];
self.view.backgroundColor = color;

除了這個API,我們還可以通過Xcode11的一個新功能,給xcassets中的顏色設置深色和淺色倆種表現形式。


顏色

使用方法:

self.view.backgroundColor = [UIColor colorNamed:@"testColor"];

圖片

圖片的設置與顏色的設置相似(名稱則為圖片的名稱、appearances選擇為any、dark)


模糊效果

模糊效果也就是我們常說的毛玻璃效果。那么在iOS7之前一般使用UIToolBar來做。在iOS8之后,蘋果新增了一個類UIVisualEffectView來專門實現這種模糊效果。

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemMaterial];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
effectView.frame = self.view.bounds;
[self.view addSubview:effectView];

在iOS13之后,UIKit也為我們提供了四種動態模糊樣式:

/*
     * Blur styles available in iOS 13.
     *
     * Styles which automatically adapt to the user interface style:
     */
    UIBlurEffectStyleSystemUltraThinMaterial        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
    UIBlurEffectStyleSystemThinMaterial             API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
    UIBlurEffectStyleSystemMaterial                 API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
    UIBlurEffectStyleSystemThickMaterial            API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
    UIBlurEffectStyleSystemChromeMaterial           API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),

UIBlurEffectStyleSystemChromeMaterial這種樣式是用來指定運行在 macOS 上的 iPad 應用的邊框顏色的。
所以想要模糊效果適配深色模式直接以上四種動態模糊樣式就可以了。


如果我們希望某個單獨的視圖以一種固定的顯示模式來顯示的話,
我們可以通過setOverrideUserInterfaceStyle這個方法來設置視圖的顯示模式。

[self.view setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];

如果說我們希望某個界面以一種固定的的模式來顯示的話,可以重寫
overrideUserInterfaceStyle方法,返回一個固定的顯示模式。

-(UIUserInterfaceStyle)overrideUserInterfaceStyle {
    return UIUserInterfaceStyleDark;
}

如果想讓 App 都以一種固定的模式顯示,只要在 Info.plist 文件中將UIUserInterfaceStyle 設置為 Light 或 Dark 就可以了。

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

推薦閱讀更多精彩內容