2017-08-12 02 Антон Ковалев. texture a.k.a asyncdisplaykit
TRANSCRIPT
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 разработчик
https://vk.com/rosberry