2017-08-12 02 Антон Ковалев. texture a.k.a asyncdisplaykit

a.k.a AsyncDisplayKit

Ковалев АнтонiOS разработчик, Rosberry

Texture

2

Demo

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Maecenas tincidunt

tempor lorem, non dapibus dui dapibus

vitae.

UI в iOS

3

UI в iOSЧастота обновления экрана 60 FPSТеоретическое время отрисовки кадра = 1/60 (16мс)Фактическое время ~10мс

4

Main thread16мс0мс 32мс 48мс 64мс 80мс 96мс

Frame drops

5

AsyncDisplayKit

6

Main thread

Background thread

Background thread

Background thread

Main thread

AsyncDisplayKit

7

Основной принцип работы

8

.delegate

.layerView Layer

Main thread only

.delegate

.layerView Layer

Main thread only

.node

.viewNode

Asynchronous

Nodes

9

Node containersASCollectionNode ASPagerNode ASTableNode ASViewController ASNavigationController ASTabBarController

10

Intelligent preloading

11

Layout engineОснован на модели CSS Flexbox

Основные понятия:• Layout Specs• Layout Elements

12

ASStackLayoutSpec

13

ASInsetLayoutSpec

14

ASOverlayLayoutSpec/ASBackgroundLayoutSpec

15

ASCenterLayoutSpec

16

ASRatioLayoutSpec

17

Layout engine

18

Layout engine

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize {

return ...;

}

19

Layout engine

-----------------------ASStackLayoutSpec----------------------

| -----ASStackLayoutSpec----- -----ASStackLayoutSpec----- |

| | ASImageNode | | ASImageNode | |

| | ASImageNode | | ASImageNode | |

| --------------------------- --------------------------- |

--------------------------------------------------------------

20

Layout engine Sizing// Relative (%) ASDimensionMake(@"50%"); ASDimensionMakeWithFraction(0.5);

// Absolute ASDimensionMake(@"70pt") ASDimensionMake(70); ASDimensionMakeWithPoints(70);

21

Layout engine Sizing

22

Conveniences.Layout engine

.automaticallyManagesSubnodes = true

23

Conveniences.Nodes

.hitTestSlop

24

Conveniences.Inversion

.inverted = true

25

Conveniences.Image Modification Block

backgroundImageNode.imageModificationBlock = { image in return image.applyBlurWithRadius(30, tintColor: UIColor(white: 0.5, alpha: 0.3), saturationDeltaFactor: 1.8, maskImage: nil) }

backgroundImageNode.image = someImage

26

Conveniences.Placeholders

27

Conveniences.Placeholders

.placeholderEnabled = YES

.placeholderFadeDuration = 0.3

28

29

Demo

Баг при повороте устройства

30

31

Баг при повороте устройства

Objective C / Swiftfunc toggleLoadingAnimation() { // swiftlint:disable force_cast let loaderView = view as! UIActivityIndicatorView // swiftlint:enable force_cast if isLoading { loaderView.startAnimating() } else { loaderView.stopAnimating() } }

32

Впечатления и выводыОчень мощный фреймворкМного плюшек прямо из коробкиСтабильные обновления и релизыОтзывчивое комьюнитиНевероятно крутой Layout Engine

33

Ссылкиhttp://texturegroup.org/https://github.com/texturegroup/texture

Ковалев АнтонiOS разработчик

anton.kovalev@rosberry.comRosberry

https://vk.com/rosberry