flex-box in ComponentKit

记录一次公司内部的分享

1. flex-box X140Yu @ Zhihu 2018-01-02
2. Table of content • basic flex-box concepts • flex-box in ComponentKit • other layout Components
3. What is flex-box? • a layout mode • flex "-> flexible • In CK’s world, boxes are components • Defines the relationship between boxes
4. What can flex-box do • A Live Demo
5. container & item container item ❌ container item no relationship
6. direction • vertical • horizontal .direction = .horizontal main axis（主轴） cross axis （交叉轴）
7. container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent justifyContent; CGFloat spacing;
8. CKStackLayoutDirection direction; typedef NS_ENUM(NSUInteger, CKStackLayoutDirection) { CKStackLayoutDirectionVertical, CKStackLayoutDirectionHorizontal, }; .vertical .horizontal
9. container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent justifyContent; CGFloat spacing;
10. CGFloat spacing; spacing spacing
11. container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent justifyContent; CGFloat spacing;
12. CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent justifyContent; main axis cross axis .direction = .horizontal justifyContent alignItems
13. CKStackLayoutJustifyContent justifyContent; typedef NS_ENUM(NSUInteger, CKStackLayoutJustifyContent) { CKStackLayoutJustifyContentStart, CKStackLayoutJustifyContentCenter, CKStackLayoutJustifyContentEnd, }; .start .end .center main axis .direction = .vertical
14. CKStackLayoutAlignItems alignItems; typedef NS_ENUM(NSUInteger, CKStackLayoutAlignItems) { CKStackLayoutAlignItemsStart, CKStackLayoutAlignItemsEnd, CKStackLayoutAlignItemsCenter, CKStackLayoutAlignItemsStretch, }; .start .center .end .stretch .direction = .vertical cross axis
15. <code>
16. 1 2 3 1 2 3 1 2 3 1 2 3
17. item a.k.a child struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore; CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; };
18. 1 2 3 struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore; CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; }; .direction = .vertical
19. flexShrink 400 200 100 300 600 100 100 200 .flexShrink = true (length - currentLength) / shrinkCount = shrinkLenght per component (400 - 600) / 2 = -100
20. flexGrow 175 50 175 .flexGrow = true 400 50 250 100 100 (length - currentLength) / growCount = growLenght per component (400 - 250) / 2 = 75
21. flexBasis • main-axis only • override height/width • flex(Grow|Shrink) > flexBasis > (width|height)
22. alignSelf • same as alignItems but for single item • cross-axis • default is `auto` • override container’s alignItems property 1 2 3
23. layout components • CKInsetComponent • CKBackgroundLayoutComponent • CKOverlayLayoutComponent • CKCenterLayoutComponent • CKRatioLayoutComponent • CKStaticLayoutComponent
24. CKInsetComponent [CKInsetComponent newWithView:{ [UIView class], {{@selector(setBackgroundColor:), color},} } insets:{20, 30, 20, 30} component:component];
25. CKOverlayLayoutComponent [CKOverlayLayoutComponent newWithComponent:swiftComponent overlay:maskOverlayComponent]; + "// This component lays out a single component and then overlays a component on top of it streched to its size
26. CKBackgroundLayoutComponent [CKBackgroundLayoutComponent newWithComponent:labelComponent background:backgroundComponent]; + Swift Swift "// Lays out a single child component, then lays out a background component behind it stretched to its size.
27. CKRatioLayoutComponent [CKRatioLayoutComponent newWithRatio:0.5 size:{} component:imageComponent]; "// ratio = height / width 100 200
28. CKStaticLayoutComponent "// A component that positions children at fixed positions. [CKStaticLayoutComponent newWithChildren:{ { .component = yellowComponent, .position = {100, 200}, }, }]; 100 200
29. Thanks for watching!