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
410
Other Decks in Programming
See All in Programming
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
1
180
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
170
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
RDoc meets YARD
okuramasafumi
4
170
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
520
Swift Updates - Learn Languages 2025
koher
2
490
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Testing Trophyは叫ばない
toms74209200
0
880
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
Featured
See All Featured
Side Projects
sachag
455
43k
Music & Morning Musume
bryan
46
6.8k
Producing Creativity
orderedlist
PRO
347
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Unsuck your backbone
ammeep
671
58k
Faster Mobile Websites
deanohume
309
31k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Optimizing for Happiness
mojombo
379
70k
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!