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
380
Other Decks in Programming
See All in Programming
Ruby GitHub Packages
bkuhlmann
0
640
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.1k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
160
PHPはいつから死んでいるかの調査
chiroruxx
2
410
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
8
1.4k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
410
Featured
See All Featured
A Tale of Four Properties
chriscoyier
152
22k
How GitHub (no longer) Works
holman
305
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
12
1.5k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Language of Interfaces
destraynor
151
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.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!