Come and experience your dark mode skeleton screen

preface

Dark Mode is a new feature in iOS13 that upgrades traditional UIColor to dynamicColor.

TABAimated in V2.2.3 implements automatic conversion of diablo series skeleton screens. This article explains the implementation of dark mode in V2.3.0.

TABAnimated’s skeleton layer is implemented in CALayer, but CGColorRef is not a dynamic color, so this article will also show how TABAnimated implements dynamic CGColorRef.

A sneak peek

Including four animations and a variety of application scenarios, all perfectly adapted to The Dark mode.

The new Api

What do developers need to do?

In principle, nothing is needed, but background colors and content colors are related to their respective products, so corresponding attributes are open.

What did you discover with giFs?

As shown below, after the dark mode has been switched, the process card list page is not refreshed. If it is UIColor system will refresh automatically, CGColorRef has not found a way to deal with it.

chart

Diablo mode real-time principle

We know that only UIView, UIViewController, UIPresentationController can listen for mode switch events.

By adding a transparent sentinel view of size (.1,.1) to the control view, listen for changes in the Sentinel view’s traitCollection and pass the message to the Dark Mode Manager protocol.

The sentinel view manager is also a Dark mode manager.

Dark mode Manager agreement

In order to further decoupling with the production layer, TABAnimatedDarkModeManagerInterface protocol is introduced

// Bind controlView - (void)setControlView:(UIView *)controlView; // Add sentry view - (void)addDarkModelSentryView; - (void)addNeedChangeView:(UIView *)view; // Release - (void)destroy;Copy the code

1. setControlView

When the production layer binds the controlView, it also gives the Dark mode manager to bind the controlView.

The Dark mode manager needs the controlView for this reason: Get the traitCollection, tabAnimated of the controlView to provide to the Dark mode principal

2. addDarkModelSentryView

Add a sentinel view to the controlView after binding it to the production layer. This sentinel view is used to listen for changes to the traitCollection

3. addNeedChangeView:

The Skeleton screen body of the controlView is not necessarily itself, as UITableView is the cell on it. This interface adds the newly generated view to the admin list

4. destroy

At the end of the life cycle, destroy unwanted objects

How to customize skeleton screen dark mode conversion?

Need a new class, follow the TABAnimatedDarkModeInterface.

// TABAnimatedDarkModeImpl is the default implementation of this protocol, Automatically convert backgroundLayer and layers properties according to traitCollection and tabAnimated // @param traitCollection Current traitCollection // @param TabAnimated // @param backgroundLayer tabAnimated // @param layers (void)traitCollectionDidChange:(UITraitCollection *)traitCollection tabAnimated:(TABViewAnimated *)tabAnimated backgroundLayer:(TABComponentLayer *)backgroundLayer layers:(NSArray <TABComponentLayer *> *)layers;Copy the code

Provided by the developer based on the input parametertraitCollectionTo determine the current mode, according totabAnimatedGet the parameters of the control view, and finally adjust the dark style according to your skeleton and animation needs.

Mode is disabled

Apple allows you to disable the dark mode locally and globally. The skeleton screen will also be disabled when you disable the dark skeleton screen. So with skeleton screens, you don’t need to do anything more than configure colors.

Incompatible situations

The background card list display page cannot be refreshed in real time. Solution: Skeleton layer changed from CALayer to UIView (this solution is not acceptable)