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
400
Other Decks in Programming
See All in Programming
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
410
イベント駆動で成長して委員会
happymana
1
250
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.9k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
Java ジェネリクス入門 2024
nagise
0
670
gopls を改造したら開発生産性が高まった
satorunooshie
8
270
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
410
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.9k
C++でシェーダを書く
fadis
6
3.8k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
12k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
440
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Rails Girls Zürich Keynote
gr2m
93
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
360
Into the Great Unknown - MozCon
thekraken
32
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Code Review Best Practice
trishagee
64
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
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!