iOS13 DarkMode適配（一）

時間  2019-11-08
標籤 ios13 ios darkmode 適配 欄目 iOS 简体版
原文   原文鏈接

級別： ★☆☆☆☆
標籤：「iOS 13」「Dark Mode」
做者： WYW
審校： QiShare團隊
php

前言 筆者最近了解了DarkMode相關的顏色、圖片、Web的適配，而且作了一個Demo QiDarkMode，給你們分享一下相關內容。css

Dark Mode簡介

在iOS 13.0及更高版本中，人們能夠選擇採用深色系統範圍的外觀，稱爲暗模式。Dark Mode（暗模式）是蘋果在iOS13推出的新特性。使用iOS13及更高版本的系統的iOS 設備，可使用暗模式，在暗模式下，系統會採用較暗的視圖控件。開發者在開發過程當中須要對視圖控件進行相應暗模式的適配。html

1、DarkMode Demo效果圖

筆者分別作了Dark Mode Color、Image、Web的適配示例，分別錄製了以下效果圖。前端

QiDarkModeColor.gif

QiDarkModeImage.gif

QiDarkModeWeb.gif

觸發Dark Mode 方式

    1. iOS 觸發DarkMode的方式除了上圖中的方式還可使用：設置 -> 顯示與亮度 -> 切換深色外觀 。
    1. 運行項目後，點擊Xcode的Environment Overrides ，選擇Interface Style的 Light 或 Dark能夠切換亮/暗模式。

QiDarkModeWeb.png

    1. macOS觸發Dark Mode，須要在在macOS10.14及更高版本的 Mojave系統中才支持，切換暗模式的方式爲：系統偏好設置 -> 通用->外觀 -> 淺色/深色

2、適配準備

1. @available(iOS 13.0, *)

首先咱們在適配Dark Mode的時候，使用相關API須要先寫明。ios

if (@available(iOS 13.0, *)) {
    // Dark Mode適配相關代碼
}
複製代碼

上述API寫法較長，筆者寫了以下一個宏，便於你們使用。使用方式爲：QiAvailable(13.0)。git

#define QiAvailable(version) @available(iOS version, *)
複製代碼

2. 找到須要背景色文字顏色

蘋果官方爲開發者提供了一些系統色，咱們能夠利用結合着文檔提示及在Storyboard中測試，選擇要填充的背景色。測試選擇要使用的文字顏色。github

QiDarkModeBackgroundColor.png

QiDarkModeTextColor.png

3. 開發過程當中的None、Dark、Light、Any模式

開發過程當中會須要設置圖片或者顏色的Dark、Light、Any模式下的樣式。web

Xcode默認的圖片和顏色的樣式都爲None，點擊右側屬性中的Appearances能夠切換樣式爲Any,Dark 或 Any,Light,Dark。微信

相關內容會在下文的中Color Asset部分有所體現。app

3、Dark Mode Color

1. 系統色

通常咱們能夠在基類控制器中寫明視圖背景色，或基類視圖中寫明背景色。

如：

self.view.backgroundColor = [UIColor systemBackgroundColor];

textField.textColor = [UIColor placeholderTextColor];

label.backgroundColor = [UIColor tertiarySystemBackgroundColor];
複製代碼

2. 靈活設置顏色

若是咱們須要靈活設置視圖背景色或文字顏色，可使用蘋果提供的：

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
複製代碼

如：

if (QiAvailable(13.0)) {
  self.view.backgroundColor = [UIColor systemBackgroundColor];
  
  // 等價於
  // 能夠在Dark 和 Light 模式下設置所需的顏色 如Dark下某個接近黑色的顏色 Light下某個接近白色的顏色
  self.view.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
      if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
          return [UIColor whiteColor];
      } else if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
          return [UIColor blackColor];
      }
      return [UIColor whiteColor];
  }];
}
複製代碼
label.textColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
     if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
         return [UIColor lightTextColor];
     } else {
         return [UIColor darkTextColor];
     }
    }];
複製代碼

3. Color Asset

添加Color Asset的方式以下圖所示：

QiDarkModeColorAsset.png

能夠選擇Color Asset 對應的Dark，Light，Any；及Dark，Any 模式下，要顯示的顏色。

使用咱們建立的Color Asset的方式爲：

[UIColor colorNamed:@"StarColor"];
複製代碼

+ (**nullable** UIColor *)colorNamed:(NSString *)name API_AVAILABLE(ios(11.0)); 這個API適用於iOS11及更高版本。

聽同事CY說，這個API顯示的顏色在iOS11.x的系統上會出現問題，可是蘋果在Xcode11正式版已經解決了相關問題。

其中StartColor的配置以下：筆者這裏的處理方式爲：添加Color Asset，設置Appearance 爲Any,Dark。代表筆者只關注Dark模式和非Dark模式，而且設置了非Dark模式顯示爲藍色，Dark模式顯示爲紫色。

QiDarkModeImageColor.png

4、Dark Mode Image

1. 設置Dark、Any模式下的圖片

// Asset中設置多張圖片
    UIImage *logoImage = [UIImage imageNamed:@"QiShare"];
    
    UIImageView *logoImageView = [[UIImageView alloc] initWithImage:logoImage];
    logoImageView.frame = CGRectMake(120.0, 100.0, logoImage.size.width, logoImage.size.height);
    [self.view addSubview:logoImageView];
複製代碼

設置多模式下圖片的方式以下：選中圖片-> 切換Appearance -> 把想要展現的圖片拖入到對應模式下。

QiDarkModeImageAsset.png

2. 監聽Dark模式改變切換圖片

若是咱們的圖片資源是加載的bundle中的圖片。那麼能夠以下接口中監聽模式變化，而且作相應的圖片的更新的操做。

- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
複製代碼
@property (nonatomic, strong) UIImageView *logoImageView;
@property (nonatomic, strong) UIImage *lightLogoImage;
@property (nonatomic, strong) UIImage *darkLogoImage;
複製代碼
self.darkLogoImage = [self qi_imageWithNamed:@"flutterLogo"];
    self.lightLogoImage = [self qi_imageWithNamed:@"QiShare"];
    UIImage *logoImg =self.lightLogoImage;
    
    UIImageView *logoImgV = [[UIImageView alloc] initWithImage:logoImg];
    self.logoImageView = logoImgV;
    [self.view addSubview:logoImgV];
    logoImgV.frame = CGRectMake(100.0, 100.0, logoImg.size.width, logoImg.size.height);

複製代碼
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    
    if (QiAvailable(13.0)) {
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                self.logoImageView.image =
                self.darkLogoImage;
            } else {
                self.logoImageView.image =
                self.lightLogoImage;
            }
        }
    }
}
複製代碼

3. 改變圖片tintColor

不一樣模式下控制圖片顯示相應tintColor。

// tintColor 改變Image着色
    UIImage *starImage = [UIImage imageNamed:@"star"];
    starImage = [starImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIImageView *starImageView = [[UIImageView alloc] initWithImage:starImage];
    starImageView.frame = CGRectMake(100.0, 220.0, starImage.size.width, starImage.size.height);
     starImageView.tintColor = [UIColor colorNamed:@"StarColor"];
    [self.view addSubview:starImageView];
複製代碼

注意+ (**nullable** UIColor *)colorNamed:(NSString *)name API_AVAILABLE(ios(11.0)); 這個API 是從iOS11.0開始支持的。

設置tintColor生效的一個注意點：

// UIImageRenderingModeAlwaysTemplate：Always draw the image as a template image, ignoring its color information
// 忽略圖片的顏色信息 把圖片做爲模板圖片來繪製
// 圖片的顯示顏色由tintColor控制
複製代碼

5、Dark Mode Web

在macOS10.14 Mojave系統中支持Dark Mode，切換暗模式和亮模式的方式爲：系統偏好設置 -> 通用->外觀 -> 淺色/深色。

下邊的內容是筆者參考Dark Mode Support in WebKit：寫的一個簡單H5文件，你們有須要的話，能夠提供給前端同窗查看。相關內容，筆者也已經在Demo中使用本地加載的方式測試過，能夠在不一樣模式下，正常切換。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Qi測試DarkMode</title>
	
<style> :root { color-scheme: light dark; --special-text-color: black; --bg-color: white; } @media (prefers-color-scheme: dark) { :root { --special-text-color: white; --bg-color: black; } } .special { color: var(--special-text-color); background-color: var(--bg-color); } body { background-color:var(--bg-color); } h1 { color:var(--special-text-color); text-align:center; } p { color:var(--special-text-color); font-family:"Times New Roman"; font-size:20px; } </style>
</head>

<body>

<h1>測試DarkMode標題</h1>
<p>DarkMode段落。</p>

	<picture>
	<source srcset="http://img.zcool.cn/community/012b62554b2b0e000001bf72f9aad7.jpg@2o.jpg" media="(prefers-color-scheme: dark)">
	<img src="http://p0.so.qhmsg.com/t0184f2659879a11464.jpg", width="300">
</picture>

</body>
</html>
複製代碼

6、Demo

詳情見Demo：QiDarkMode

參考學習網址

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
2019蘋果秋季新品發佈會速覽
申請蘋果開發者帳號的流程
Swift 5.1 (3) - 字符串
用Flutter 寫一個簡單頁面
5分鐘，帶你迅速上手Markdown語法
Swift 5.1 (2) - 運算符
Swift 5.1(1) - 基礎
Sign In With Apple（一）
奇舞週刊

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程