1. 程式人生 > IOS開發 >快來體驗你的暗黑模式骨架屏

快來體驗你的暗黑模式骨架屏

前言

暗黑模式(Dark Mode)是iOS13推出的新功能,並將傳統的UIColor升級成dynamicColor。TABAnimated在v2.2.3版本適配了暗黑模式,可以實現自動轉換暗黑系骨架屏。

TABAnimated的骨架層是用CALayer實現的,但是CGColorRef並不能成為動態顏色,所以本文將講解TABAnimated是如何實現動態的CGColorRef,當然目前還有一種情況無法適配,後文會講到。

先睹為快

包括四種動畫在內,多種應用場景,均以完美適配暗黑模式。

工具箱切換.gif

setting設定切換.gif

新增屬性

骨架層相關

  • 全域性的:darkAnimatedColor、darkAnimatedBackgroundColor
  • 區域性的:darkAnimatedColor、darkAnimatedBackgroundColor

動畫屬性相關

  • shimmerBackColorInDarkMode
  • shimmerBrightnessInDarkMode
  • dropAnimationDeepColorInDarkMode

開發者需要做什麼?

原則上什麼都不需要,但是背景顏色、內容顏色和各自產品有關,所以開放了對應屬性,其他什麼都不需要做。

通過gif,你發現了什麼?

如下圖,在已經切換暗黑模式後,程序卡片列表頁面沒有重新整理,如果是UIColor系統會自動重新整理,CGColorRef暫時沒有找到辦法處理。

這裡涉及到蘋果自身對程序的處理,筆者查找了文件,暫時沒有發現解決方案。

卡片列表.png

適配方案

基本的動態UIColor整合方案就不再過多贅述了,請讀者自行google瞭解。

為了適配動態顏色,咱們先引入一個概念,哨兵檢視(筆者自己命名的)。

我們知道只有UIView、UIViewController、UIPresentationController才能監聽模式切換事件。

因此,TABAnimated會預設為啟動檢視單元加入一個透明且隱藏的哨兵檢視,該檢視專門接收traitCollectionDidChange事件,並非同步傳送給TABCompoentManager - 骨架屏單元管理物件。

TABCompoentManager會處理它管理的動畫組,更換顏色。

這個檢視其他沒有任何作用。

實現細節不難,不再不過多贅述,讀者可以到github上了解更多資訊。

模式禁用

apple本身是支援區域性、全域性禁用暗黑模式的,骨架屏同樣會跟隨你的禁用而禁用暗黑系骨架屏。所以對於骨架屏而言,除了配置顏色外,你不需要做任何其他多餘的事情。