Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
flex-box in ComponentKit
Search
X140Yu
January 02, 2018
Programming
2
170
flex-box in ComponentKit
记录一次公司内部的分享
X140Yu
January 02, 2018
Tweet
Share
More Decks by X140Yu
See All by X140Yu
命令行工具安利
x140yu
1
110
Functional Reactive Programming in Swift
x140yu
1
420
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
190
Introduce Hono CLI
yusukebe
6
3.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
580
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Devoxx BE - Local Development in the AI Era
kdubois
0
140
NIKKEI Tech Talk#38
cipepser
0
180
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
iOSでSVG画像を扱う
kishikawakatsumi
0
160
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.6k
Pythonに漸進的に型をつける
nealle
1
120
Featured
See All Featured
A better future with KSS
kneath
239
18k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
A Tale of Four Properties
chriscoyier
161
23k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Designing for Performance
lara
610
69k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Making Projects Easy
brettharned
120
6.4k
Docker and Python
trallard
46
3.6k
Transcript
flex-box X140Yu @ Zhihu 2018-01-02
Table of content • basic flex-box concepts • flex-box in
ComponentKit • other layout Components
What is flex-box? • a layout mode • flex "->
flexible • In CK’s world, boxes are components • Defines the relationship between boxes
What can flex-box do • A Live Demo
container & item container item ❌ container item no relationship
direction • vertical • horizontal .direction = .horizontal main axis(主轴)
cross axis (交叉轴)
container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent
justifyContent; CGFloat spacing;
CKStackLayoutDirection direction; typedef NS_ENUM(NSUInteger, CKStackLayoutDirection) { CKStackLayoutDirectionVertical, CKStackLayoutDirectionHorizontal, }; .vertical
.horizontal
container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent
justifyContent; CGFloat spacing;
CGFloat spacing; spacing spacing
container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent
justifyContent; CGFloat spacing;
CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent justifyContent; main axis cross axis .direction =
.horizontal justifyContent alignItems
CKStackLayoutJustifyContent justifyContent; typedef NS_ENUM(NSUInteger, CKStackLayoutJustifyContent) { CKStackLayoutJustifyContentStart, CKStackLayoutJustifyContentCenter, CKStackLayoutJustifyContentEnd, };
.start .end .center main axis .direction = .vertical
CKStackLayoutAlignItems alignItems; typedef NS_ENUM(NSUInteger, CKStackLayoutAlignItems) { CKStackLayoutAlignItemsStart, CKStackLayoutAlignItemsEnd, CKStackLayoutAlignItemsCenter, CKStackLayoutAlignItemsStretch,
}; .start .center .end .stretch .direction = .vertical cross axis
<code>
1 2 3 1 2 3 1 2 3 1
2 3
item a.k.a child struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore;
CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; };
1 2 3 struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore;
CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; }; .direction = .vertical
flexShrink 400 200 100 300 600 100 100 200 .flexShrink
= true (length - currentLength) / shrinkCount = shrinkLenght per component (400 - 600) / 2 = -100
flexGrow 175 50 175 .flexGrow = true 400 50 250
100 100 (length - currentLength) / growCount = growLenght per component (400 - 250) / 2 = 75
flexBasis • main-axis only • override height/width • flex(Grow|Shrink) >
flexBasis > (width|height)
alignSelf • same as alignItems but for single item •
cross-axis • default is `auto` • override container’s alignItems property 1 2 3
layout components • CKInsetComponent • CKBackgroundLayoutComponent • CKOverlayLayoutComponent • CKCenterLayoutComponent
• CKRatioLayoutComponent • CKStaticLayoutComponent
CKInsetComponent [CKInsetComponent newWithView:{ [UIView class], {{@selector(setBackgroundColor:), color},} } insets:{20, 30,
20, 30} component:component];
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
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.
CKRatioLayoutComponent [CKRatioLayoutComponent newWithRatio:0.5 size:{} component:imageComponent]; "// ratio = height /
width 100 200
CKStaticLayoutComponent "// A component that positions children at fixed positions.
[CKStaticLayoutComponent newWithChildren:{ { .component = yellowComponent, .position = {100, 200}, }, }]; 100 200
Thanks for watching!