iOS暗黑模式--UIColor

iOS 13系統(tǒng)的問世押桃,開啟了App的深色模式的大門捷绒。2002年3月4日更新的AppStore審核指南提出:從2020年4月30日開始,所有提交至App Store的iPhone App都須使用iOS 13 SDK或更高版本來構(gòu)建涯冠。之前也有聽聞?wù)f如果應(yīng)用不支持暗黑模式的將要被強(qiáng)制下架拣挪。目前,我提交的app直接設(shè)置了不支持暗黑模式宵晚,

if #available(iOS 13.0, *) {
    self.window?.overrideUserInterfaceStyle = .light
} else {
        // Fallback on earlier versions
 }

但那是還沒有收到一些強(qiáng)制性的要求恨旱,不過還是要有所準(zhǔn)備。
我把iOS13系統(tǒng)提供的顏色做一個(gè)記錄坝疼,方便以后在適配顏色的時(shí)候方便查看。這些顏色是會(huì)根據(jù)暗黑模式來改變谆沃。

目錄:

一钝凶、暗黑模式須知

1、 UIUserInterfaceStyle(頁(yè)面模式的枚舉)
2、暗黑模式監(jiān)聽
3耕陷、獲取當(dāng)前模式

二掂名、iOS 13新增 UIColor及效果圖

1、 系統(tǒng)提供的動(dòng)態(tài)顏色
2哟沫、 系統(tǒng)提供的動(dòng)態(tài)顏色的視覺圖

三饺蔑、自定義不同模式下UIColor

1、系統(tǒng)提供創(chuàng)建動(dòng)態(tài)顏色的方法
2嗜诀、創(chuàng)建動(dòng)態(tài)顏色

四猾警、使用Assets.xcassets 里面New Color Set設(shè)置顏色(推薦

1、創(chuàng)建Color Set
2隆敢、創(chuàng)建設(shè)置名稱和不同模式下的顏色
3发皿、代碼中使用
4、運(yùn)行結(jié)果展示


我在iOS13 新API和出現(xiàn)的問題這一篇的末尾處也提到過拂蝎,這里在提一下穴墅。

一、暗黑模式須知

1温自、 UIUserInterfaceStyle(頁(yè)面模式的枚舉)

@available(iOS 12.0, *)
public enum UIUserInterfaceStyle : Int {
    ///未指定模式
    case unspecified
   ///光亮模式
    case light
   ///暗黑模式
    case dark
}

2玄货、暗黑模式監(jiān)聽

///監(jiān)聽模式的變化
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            //模式發(fā)生變化會(huì)回調(diào)這里
        }
    }

3、獲取當(dāng)前模式

if self.traitCollection.userInterfaceStyle == .dark {
     // Dark
      print("是dark模式悼泌、松捉。。券躁。")
 } else  if self.traitCollection.userInterfaceStyle == .light {
    // Light
    print("是light模式惩坑、。也拜。以舒。")
 } else {
   //unspecified
   print("是unspecified模式、慢哈。蔓钟。。")
}

二卵贱、iOS 13新增 UIColor及效果圖

1滥沫、 系統(tǒng)提供的動(dòng)態(tài)顏色

lazy var colorSource: [UIColor] = {
        let source = [UIColor.label,// @available(iOS 13.0, *)
                      UIColor.secondaryLabel,// @available(iOS 13.0, *)
                      UIColor.tertiaryLabel,// @available(iOS 13.0, *)
                      UIColor.quaternaryLabel,// @available(iOS 13.0, *)
                      UIColor.link,// @available(iOS 13.0, *)
                      UIColor.placeholderText,// @available(iOS 13.0, *)
                      UIColor.separator,// @available(iOS 13.0, *)
                      UIColor.opaqueSeparator,// @available(iOS 13.0, *)
                      UIColor.systemBackground,// @available(iOS 13.0, *)
                      UIColor.secondarySystemBackground,// @available(iOS 13.0, *)
                      UIColor.tertiarySystemBackground,// @available(iOS 13.0, *)
                      UIColor.systemGroupedBackground,// @available(iOS 13.0, *)
                      UIColor.secondarySystemGroupedBackground,// @available(iOS 13.0, *)
                      UIColor.tertiarySystemGroupedBackground,// @available(iOS 13.0, *)
                      UIColor.systemFill,// @available(iOS 13.0, *)
                      UIColor.secondarySystemFill,// @available(iOS 13.0, *)
                      UIColor.tertiarySystemFill,// @available(iOS 13.0, *)
                      UIColor.quaternarySystemFill,// @available(iOS 13.0, *)
                      UIColor.systemGray2,//@available(iOS 13.0, *)
                      UIColor.systemGray3,//@available(iOS 13.0, *)
                      UIColor.systemGray4,//@available(iOS 13.0, *)
                      UIColor.systemGray5,//@available(iOS 13.0, *)
                      UIColor.systemGray6,//@available(iOS 13.0, *)
        ]
        return source
    }()

2、 系統(tǒng)提供的動(dòng)態(tài)顏色的視覺圖

下圖為我在不同模式下上面顏色的展示情況:


8463D019-8DEE-4BCB-B37E-0C6854C352B2.png
346CD044-2F1D-421E-B85C-3DDDF3360395.png

注:我沒有設(shè)置字體和字體的顏色键俱,都是使用默認(rèn)的兰绣。在dark模式向下所有的字體均變?yōu)榱税咨?/code>根據(jù)這個(gè)圖,可以很方便的選擇我們所需的顏色编振,如果沒有達(dá)到要求缀辩,請(qǐng)使用下面的方法來自定義顏色。

三、自定義不同模式下UIColor

1臀玄、系統(tǒng)提供創(chuàng)建動(dòng)態(tài)顏色的方法

extension UIColor {

    ///根據(jù)不同的模式返回不同的顏色
    @available(iOS 13.0, *)
    public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

    
    /* Resolve any color to its most fundamental form (a non-dynamic color) for a specific trait collection. 根據(jù)已經(jīng)設(shè)置的模式來返回顏色
     */
    @available(iOS 13.0, *)
    open func resolvedColor(with traitCollection: UITraitCollection) -> UIColor
}

2瓢阴、創(chuàng)建動(dòng)態(tài)顏色

  • 此方法為如果是iOS13就返回系統(tǒng)提供的動(dòng)態(tài)顏色
func lgl_color() -> UIColor {
    if #available(iOS 13.0, *) {//iOS13及以上
        return UIColor.systemBackground//(這里修改iOS13<系統(tǒng)的動(dòng)態(tài)顏色)
    } else {//iOS13以下的
        return UIColor.red //(這里修改iOS13>系統(tǒng)的顏色)
    }
}
  • 此方法為完全指定你想要的設(shè)置的顏色,是上個(gè)方法的升級(jí)版健无,使用到了
    public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)
func lgl_color2() -> UIColor {
    if #available(iOS 13.0, *) {//iOS13及以上
       return UIColor(dynamicProvider: {(traitCollection) in
            switch traitCollection.userInterfaceStyle {
                case .light:
                    return .brown
                case .dark:
                    return .cyan
                case .unspecified:
                    return .green
                @unknown default:
                    return .brown
            }
        })
    } else {//iOS13以下的
        return UIColor.red
    }
}
  • 以下方法是根據(jù)不同的模式來獲取某個(gè)動(dòng)態(tài)顏色所展示的顏色荣恐,使用到了
    open func resolvedColor(with traitCollection: UITraitCollection) -> UIColor

///獲取labelColor在traitCollection模式下的展示的顏色
@available(iOS 13.0, *)
func lgl_color3(_ labelColor: UIColor, _ traitCollection: UITraitCollection) -> UIColor {
   return labelColor.resolvedColor(with: traitCollection)
}

四、使用Assets.xcassets 里面New Color Set設(shè)置顏色

在xcode9累贤,iOS11及以后在Assets.xcassets里面新增了一個(gè)Color Set來設(shè)置顏色叠穆,用起來也是比較方便。

1畦浓、創(chuàng)建Color Set

創(chuàng)建方法如下圖所示:


coloeSet1.png

2痹束、創(chuàng)建設(shè)置名稱和不同模式下的顏色

(在使用過程中Appearance選擇 Any,Dark就可以)設(shè)置名稱和顏色具體步驟如下圖所示:


coloeSet2.png

3讶请、代碼中使用

let llView = UIView(frame: CGRect(x: 10, y: 100, width: 200, height: 200))
if #available(iOS 11.0, *) {
   llView.backgroundColor = UIColor(named: "lgl_test")
} else {
    ///設(shè)置低于iOS11系統(tǒng)下展示的顏色
    llView.backgroundColor = UIColor.red
 }
self.view.addSubview(llView)

4祷嘶、運(yùn)行結(jié)果展示

59B09816-DDCD-40CF-9EA7-59D4829FD25E.png

注:在iOS13的系統(tǒng)下,如果沒有設(shè)置模試夺溢,或者是設(shè)置成unspecified论巍,展示跟Light Appearance同一顏色,低于iOS13系統(tǒng)下展示的就是 Any Appearance 所展示的顏色

以上就是對(duì)iOS13對(duì)于暗黑模式適配下风响,對(duì)于UIColor的一點(diǎn)記錄嘉汰,應(yīng)該可以滿足適配顏色的需求了????

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市状勤,隨后出現(xiàn)的幾起案子鞋怀,更是在濱河造成了極大的恐慌,老刑警劉巖持搜,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件密似,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡葫盼,警方通過查閱死者的電腦和手機(jī)残腌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贫导,“玉大人抛猫,你說我怎么就攤上這事『⒌疲” “怎么了闺金?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)峰档。 經(jīng)常有香客問我掖看,道長(zhǎng)匣距,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任哎壳,我火速辦了婚禮,結(jié)果婚禮上尚卫,老公的妹妹穿的比我還像新娘归榕。我一直安慰自己,他們只是感情好吱涉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布刹泄。 她就那樣靜靜地躺著,像睡著了一般怎爵。 火紅的嫁衣襯著肌膚如雪特石。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天鳖链,我揣著相機(jī)與錄音姆蘸,去河邊找鬼。 笑死芙委,一個(gè)胖子當(dāng)著我的面吹牛逞敷,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播灌侣,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼推捐,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了侧啼?” 一聲冷哼從身側(cè)響起牛柒,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痊乾,沒想到半個(gè)月后皮壁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡符喝,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年闪彼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片协饲。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡畏腕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出茉稠,到底是詐尸還是另有隱情描馅,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布而线,位于F島的核電站铭污,受9級(jí)特大地震影響恋日,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜嘹狞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一岂膳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧磅网,春花似錦谈截、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至燎潮,卻和暖如春喻鳄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背确封。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工除呵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人隅肥。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓竿奏,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親腥放。 傳聞我的和親對(duì)象是個(gè)殘疾皇子泛啸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 暗黑模式在macOS上推出后,又推廣到移動(dòng)端——在iOS 13上正式開放出來秃症! 其實(shí)簡(jiǎn)單而言就是以前常見App中的...
    goyohol閱讀 2,334評(píng)論 0 2
  • 最近公司業(yè)務(wù)需求要更換APP主題候址。最開始是一個(gè)地方一個(gè)地方去改,而且項(xiàng)目中很多老代碼是用xib寫的种柑,習(xí)慣純代碼編程...
    抓魚貓L閱讀 6,152評(píng)論 0 10
  • 目錄 1.適配暗黑模式(Dark Mode)1.1顏色適配* 系統(tǒng)動(dòng)態(tài)顏色** 自定義動(dòng)態(tài)UIColor(代碼自定...
    冰點(diǎn)雨閱讀 3,068評(píng)論 1 11
  • iOS 13終于引來了暗黑模式岗仑。 每當(dāng)新特性的到來,iOS開發(fā)者們既緊張又有點(diǎn)小興奮聚请,懷揣著被虐的心態(tài)荠雕,讓我們來看...
    koin447閱讀 63,671評(píng)論 16 106
  • 兩口子打架的,婚姻美滿了 婆媳大戰(zhàn)的驶赏,現(xiàn)在跟母女似的 孩子打游戲的炸卑,改成網(wǎng)上開課 老爸的麻將,變成微信群邀請(qǐng)了 蔬...
    衡觀音閱讀 191評(píng)論 0 1