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
No Story, No Board
Search
Elvis Shi
June 23, 2017
Programming
0
2.9k
No Story, No Board
Elvis Shi
June 23, 2017
Tweet
Share
More Decks by Elvis Shi
See All by Elvis Shi
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
How did I build an Open-Source SwiftUI Toast Library
lovee
1
69
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
790
SwiftUIで二重スクロール作ってみた / When I tried to make a dual-scroll-ish view in SwiftUI
lovee
1
270
Observation のあれこれ / A brief introduction about Observation
lovee
3
350
ChatGPT 時代の勉強 / Learning under ChatGPT era
lovee
27
8.6k
属人化しない為の勉強会作り / To make tech meetups with less personal dependencies
lovee
0
300
偏見と妄想で語るスクリプト言語としての Swift / Swift as a Scripting Language
lovee
2
830
danger-swift-kantoku
lovee
1
520
Other Decks in Programming
See All in Programming
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
チームリードになって変わったこと
isaka1022
0
190
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
WebDriver BiDiとは何なのか
yotahada3
1
140
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
ARA Ansible for the teams
kksat
0
150
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How STYLIGHT went responsive
nonsquared
98
5.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Done Done
chrislema
182
16k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
It's Worth the Effort
3n
184
28k
Typedesign – Prime Four
hannesfritz
40
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Transcript
No Story No Board for iOS UI࣮ษڧձ
override init() { super.init() emplyedBy = "MAGES. 5pb. Game div"
job = "iOS Developer" twitter = "@lovee" qiita = "@lovee" github = "el-hoshino" additionalInfo = "ʮAuto Layout ઈରࡴ͢ϚϯʯͰ͢" class Speaker: Developer { } }
ࠓ·ͰͷาΈ
ࠓ·ͰͷาΈ ͓ɺͬͺΈΜͳ Storyboard ݏ͍Μ͚ !
ࠓ·ͰͷาΈ
ࠓ·ͰͷาΈ ٸͳొஃͰ͔ͨ͠Β४උෆͰશવΕͳ͔ͬͨ "
ࠓ·ͰͷาΈ
ࠓ·ͰͷาΈ HITMAN ʹϋϚͬͯͦͦ४උͰ͖ͳ͔ͬͨ "
ࡾͷਖ਼ʹͳΔͷ͔"
໔໌ ͜ͷൃද Storyboard Λ dis ΔൃදͰ͢ ͕ɺผʹօʹ͜ͷߟ͑Λԡ͚͍ͨ͠ͱࢥΘͳ͍ ͜ͷൃදϋʔυίʔσΟϯά࠷ߴͱݴ͍ͬͯͳ͍ Storyboard ϋʔυίʔσΟϯάͦΕͧΕͷ᠘͕͋Δ
ͦͦࢲ GUI Ͱ GUI Λ࡞Δ͜ͱࣗମʹେࢍ ͨͩ Storyboard ͷ࣮͕೦͗͢ΔͱࢥͬͯΔ͚ͩ
ࢲ͕ Storyboard ΛΘͳ͍ཧ༝ʢ1ʣ Auto Layout ͷ੍Λ͏ View ͕૿͑Δͱ੍͕രൃ తʹ૿͑Δ ʮ͜ͷ
View ͷ͜ͷ੍ʯ͕ ୳ͮ͠Β͍
ࢲ͕ Storyboard ΛΘͳ͍ཧ༝ʢ2ʣ Swift ͳͷʹ IUO Λ͏ UIViewController ͷϥΠϑ αΠΫϧΛѲ͠ͳ͍ͱ
མͪΔ͜ͱ͋Δ ؾ࣋ͪѱ͍
ৄ͘͠ http://qiita.com/lovee/items/acfc9d0f1ffa7207b38b Λ͝ཡ͍ͩ͘͞#
One more thing!
UIStackView Auto Layout LayoutKit Manual Layout PinLayout ※ग़యɿhttps://github.com/mirego/PinLayout/blob/master/docs/Benchmark.md 銙闗#WVQ.C[QWV闖㢚閴聮閳闋闇#
ͦΕͰ Auto Layout ͍͍ͨํ PureLayout macOS / iOS ྆ํͰར༻Ͱ ͖Δ
Swift / Objective-C ྆ํͰ ར༻Ͱ͖Δ AutoLayout ੍Λ؆ܿʹɺ ͔ͭൺֱతʹ͔Γ͢ ͘ॻ͚Δ ͔ͳΓॆ࣮͍ͯ͠Δࢿྉ
ͦΕͰ Auto Layout ͍͍ͨํ SnapKit macOS / iOS / tvOS
શ෦ར ༻Ͱ͖Δ Swift ͷߏจಛΛ࠷େݶ ʹҾ͖ग़͍ͯ͠Δ গ͘͠ͳΔ͕ɺඇৗʹ ͔Γ͍͢จ๏ ඇৗʹॆ࣮͍ͯ͠Δެࣜ ࢿྉ
–Elvis Shi lͬͺΓɺ"VUP-BZPVUΛΘͣʹ ίʔυͰ6*ΛΈ͍ͨz
㘦㖽㘼㗧㙟㘗㘕㘙㘻㘒ଡ଼㘀㘬㘬㙔 UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ ରΛ࿔Δɺରʹৄ͘͠ͳΔඞཁ͕͋Δ ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ ؒҧͬͨϓϩύςΟʔͷॻ͖ࠐΈࢥΘ͵όάΛট͘ αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ ศརͳ໘ɺࢥͬͯΔͷͱಈ͖͕ҧ͏Մೳੑ͋Δ
UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ UIViewController UIView loadView() viewDidLoad() viewWillAppear() viewWillLayoutSubviews()
layoutSubviews() viewDidLayoutSubviews() viewDidAppear() layout runloop viewWillDisappear() viewDidDisappear() layoutIfNeeded() Needs layout? sleep viewWillLayoutSubviews() layoutSubviews() viewDidLayoutSubviews() Disappear? no yes yes no Needs layout?
UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ Ͳ͏ͬͯఆ͍ͯ͠Δͷ͔ʁ Needs layout? setNeedsLayout() Λݺͼग़ͨ͠ σόΠε͕ճసͨ͠
ࢠϏϡʔΛՃআΛͨ͠ ʢUIScrollView Ͱ͋ΔࢠϏϡʔʣ͕εΫϩʔϧͨ͠ ࣗͷࢠϏϡʔͷ frame transform ͳͲ͕มߋ͞Εͨ ͳͲͳͲ…
UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ Ͳ͏ͬͯఆ͍ͯ͠Δͷ͔ʁ Needs layout? setNeedsLayout() Λݺͼग़ͨ͠ σόΠε͕ճసͨ͠
ࢠϏϡʔΛՃআΛͨ͠ ʢUIScrollView Ͱ͋ΔࢠϏϡʔʣ͕εΫϩʔϧͨ͠ ࣗͷࢠϏϡʔͷ frame transform ͳͲ͕มߋ͞Εͨ ͳͲͳͲ… ࣗͷ frame transform Λมߋ͢Ε ͷ layoutSubviews() ݺΕΔʂ ࣗͷ frame transform ඞͣʹมߋͯ͠Β͓͏ʂ
–Elvis Shi l6*7JFXͷGSBNFUSBOTGPSNɺ ࣗͷͰͳ͘ɺͷͷz
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height:
200)
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height:
200) view.transform = view.transform.rotated(by: .pi / 4)
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height:
200) view.transform = view.transform.rotated(by: .pi / 4) view.frame.size.width = 100
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height:
200) view.transform = view.transform.rotated(by: .pi / 4) view.frame.size.width = 100 Α͘ΒΜ͕ frame.size.width Λʹͨ͠Β ෯ߴཱͪ͞Ґஔશ͕ͯมΘͬͨ"
※ग़యɿhttps://developer.apple.com/documentation/uikit/uiview/1622621-frame
͠ transform ϓϩύςΟʔ͕ identity Ͱͳ͚Εɺ ͜ͷϓϩύςΟʔͷະఆٛͱͳΓɺ ແࢹ͖͢Ͱ͋Δɻ ʢҙ༁ɿ৮Δͳ΄ͬͱ͚ʂʣ ※ग़యɿhttps://developer.apple.com/documentation/uikit/uiview/1622621-frame
frame Λ࿔Γ͍ͨͳΒ ΘΓʹ center ͱ bounds.size ͷํΛ ࿔Εʂ ※ग़యɿhttps://developer.apple.com/documentation/uikit/uiview/1622621-frame
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.bounds.size = CGSize(width: 100, height: 100) view.center = CGPoint(x:
base.bounds.midX, y: base.bounds.midY)
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.bounds.size = CGSize(width: 100, height: 100) view.center = CGPoint(x:
base.bounds.midX, y: base.bounds.midY) view.layer.anchorPoint.y = 0
ϨΠΞτΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.bounds.size = CGSize(width: 100, height: 100) view.center = CGPoint(x:
base.bounds.midX, y: base.bounds.midY) view.layer.anchorPoint.y = 0 Α͘ΒΜ͕ layer.anchorPoint Λมߋͨ͠Β ࣗͷॴ͕มΘͬͨ"
※ग़యɿhttps://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/ CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW3
anchorPoint ͱϨΠϠʔͷ ϙδγϣχϯάͷؔʹ͍ͭͯ ʢҙ༁ɿcenter ͕ࢦͯ͠Δͷ anchorPoint ͷ ॴͳΜʂʣ ※ग़యɿhttps://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/ CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW3
–Elvis Shi lUSBOTGPSN͕ॳظ͡Όͳ͍Մೳੑ͕͋Εɺ GSBNFΛઃఆͤͣʹ CPVOETTJ[FͱDFOUFSΛઃఆ͠Α͏z
αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ
αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ ݟͨײ͡ͰͲ͏Β frame ʹॻ͖ࠐΜͰͦ͏$
αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4)
αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4) Γ transform Λ࿔ͬͨΒ ϨΠΞτͰόάͬͨ"
NotAutoLayout https://github.com/el-hoshino/NotAutoLayout
αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4)
αʔυύʔςΟʔϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4) bounds.size ͱ center Λઃఆ͍ͯ͠ΔͷͰɺ transform
Λมߋͯ͠ϨΠΞτ่Ε͠ͳ͍
let titleViewLayout = Layout .makeCustom(x: { _ in 0 },
y: { _ in 0 }, width: { $0.width }, height: { _ in 60 }) baseView.addSubview(titleView, constantLayout: titleViewLayout) NotAutoLayout 1.0
baseView.nal.setupSubview(titleView) { $0 .setDefaultLayout { $0 .pinTopCenter(to: baseView, s: .topCenter)
.setWidth(to: baseView, s: .width) .setHeight(to: 60) } .addToSelf() .commit() } NotAutoLayout 2.0ʢԾʣ
–Elvis Shi l/PU"VUP-BZPVUΛͥͻࢼͯ͠Έ͍ͯͩ͘͞ 'FFECBDLͱ4UBSΛ͓͓ͪͯ͠Γ·͢z