No Story, No Board

Transcript

1. No Story No Board for iOS UI࣮૷ษڧձ
2. 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 { } }
3. ࠓ·ͰͷาΈ
4. ࠓ·ͰͷาΈ ͓ɺ΍ͬͺΈΜͳ Storyboard ݏ͍΍Μ͚
 !
5. ࠓ·ͰͷาΈ
6. ࠓ·ͰͷาΈ ٸͳొஃͰ͔ͨ͠Β४උෆ଍Ͱશવ஻Εͳ͔ͬͨ
 "
7. ࠓ·ͰͷาΈ
8. ࠓ·ͰͷาΈ HITMAN ʹϋϚͬͯͦ΋ͦ΋४උͰ͖ͳ͔ͬͨ
 "
9. ࡾ౓໨ͷਖ਼௚ʹͳΔͷ͔"
10. ໔੹੠໌ ͜ͷൃද͸ Storyboard Λ dis ΔൃදͰ͢ ͕ɺผʹօʹ͜ͷߟ͑Λԡ͠෇͚͍ͨͱ͸ࢥΘͳ͍ ͜ͷൃද͸ϋʔυίʔσΟϯά࠷ߴͱ͸ݴ͍ͬͯͳ͍ Storyboard ΋ϋʔυίʔσΟϯά΋ͦΕͧΕͷ᠘͕͋Δ ͦ΋ͦ΋ࢲ͸ GUI Ͱ GUI Λ࡞Δ͜ͱࣗମʹ͸େࢍ੒ ͨͩ Storyboard ͷ࣮૷͕࢒೦͗͢ΔͱࢥͬͯΔ͚ͩ
11. ࢲ͕ Storyboard Λ࢖Θͳ͍ཧ༝ʢ1ʣ Auto Layout ͷ੍໿Λ࢖͏ View ͕૿͑Δͱ੍໿͕രൃ తʹ૿͑Δ ʮ͜ͷ View ͷ͜ͷ੍໿ʯ͕ ୳ͮ͠Β͍
12. ࢲ͕ Storyboard Λ࢖Θͳ͍ཧ༝ʢ2ʣ Swift ͳͷʹ IUO Λ࢖͏ UIViewController ͷϥΠϑ αΠΫϧΛ೺Ѳ͠ͳ͍ͱ མͪΔ͜ͱ΋͋Δ ؾ࣋ͪѱ͍
13. ৄ͘͠͸ http://qiita.com/lovee/items/acfc9d0f1ffa7207b38b
 Λ͝ཡ͍ͩ͘͞#
14. One more thing!
15. UIStackView Auto Layout LayoutKit Manual Layout PinLayout ※ग़యɿhttps://github.com/mirego/PinLayout/blob/master/docs/Benchmark.md 銙闗#WVQ.C[QWV闖㢚閴聮閳闋闇#
16. ͦΕͰ΋ Auto Layout ࢖͍͍ͨํ PureLayout macOS / iOS ྆ํͰར༻Ͱ ͖Δ Swift / Objective-C ྆ํͰ ར༻Ͱ͖Δ AutoLayout ੍໿Λ؆ܿʹɺ ͔ͭൺֱతʹ෼͔Γ΍͢ ͘ॻ͚Δ ͔ͳΓॆ࣮͍ͯ͠Δࢿྉ
17. ͦΕͰ΋ Auto Layout ࢖͍͍ͨํ SnapKit macOS / iOS / tvOS શ෦ར ༻Ͱ͖Δ Swift ͷߏจಛ௃Λ࠷େݶ ʹҾ͖ग़͍ͯ͠Δ গ͠௕͘ͳΔ͕ɺඇৗʹ ෼͔Γ΍͍͢จ๏ ඇৗʹॆ࣮͍ͯ͠Δެࣜ ࢿྉ
18. –Elvis Shi l΍ͬͺΓ๻͸ɺ"VUP
    -BZPVU
    Λ࢖Θͣʹ
 ίʔυͰ
    6*
    Λ૊Έ͍ͨz
19. 㘦㖽㘼㗧㙟㘗㘕㘙㘻㘒ଡ଼㘀㘬㘬㙔 UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ ௚઀ର৅Λ࿔Δ෼ɺର৅ʹৄ͘͠ͳΔඞཁ͕͋Δ ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ ؒҧͬͨϓϩύςΟʔ΁ͷॻ͖ࠐΈ͸ࢥΘ͵όάΛট͘ αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ ศརͳ൓໘ɺࢥͬͯΔͷͱಈ͖͕ҧ͏Մೳੑ΋͋Δ
20. 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?
21. UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ ͸Ͳ͏΍ͬͯ൑ఆ͍ͯ͠Δͷ͔ʁ Needs layout? setNeedsLayout() Λݺͼग़ͨ͠ σόΠε͕ճసͨ͠ ࢠϏϡʔΛ௥Ճ΍࡟আΛͨ͠ ʢUIScrollView Ͱ͋ΔࢠϏϡʔʣ͕εΫϩʔϧͨ͠ ࣗ෼ͷࢠϏϡʔͷ frame ΍ transform ͳͲ͕มߋ͞Εͨ ͳͲͳͲ…
22. UIView / UIViewController ͷϥΠϑαΠΫϧΛཧղ͢Δ ͸Ͳ͏΍ͬͯ൑ఆ͍ͯ͠Δͷ͔ʁ Needs layout? setNeedsLayout() Λݺͼग़ͨ͠ σόΠε͕ճసͨ͠ ࢠϏϡʔΛ௥Ճ΍࡟আΛͨ͠ ʢUIScrollView Ͱ͋ΔࢠϏϡʔʣ͕εΫϩʔϧͨ͠ ࣗ෼ͷࢠϏϡʔͷ frame ΍ transform ͳͲ͕มߋ͞Εͨ ͳͲͳͲ… ࣗ෼ͷ frame ΍ transform Λมߋ͢Ε͹
 ਌ͷ layoutSubviews() ΋ݺ͹ΕΔʂ ࣗ෼ͷ frame ΍ transform ͸
 ඞͣ਌ʹมߋͯ͠΋Β͓͏ʂ
23. –Elvis Shi l6*7JFX
    ͷ
    GSBNF
    ΍
    USBOTGPSN
    ͸ɺ
 ࣗ෼ͷͰ͸ͳ͘ɺ਌ͷ΋ͷz
24. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
25. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height: 200) view.transform = view.transform.rotated(by: .pi / 4)
26. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.frame = CGRect(x: 0, y: 0, width: 200, height: 200) view.transform = view.transform.rotated(by: .pi / 4) view.frame.size.width = 100
27. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ 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 Λ൒෼ʹͨ͠Β
 ෯΋ߴ͞΋ཱͪҐஔ΋શ͕ͯมΘͬͨ"
28. ※ग़యɿhttps://developer.apple.com/documentation/uikit/uiview/1622621-frame
29. ΋͠ transform ϓϩύςΟʔ͕
 identity Ͱͳ͚Ε͹ɺ ͜ͷϓϩύςΟʔͷ஋͸ະఆٛͱͳΓɺ ແࢹ͢΂͖Ͱ͋Δɻ ʢҙ༁ɿ৮Δͳ΄ͬͱ͚ʂʣ ※ग़యɿhttps://developer.apple.com/documentation/uikit/uiview/1622621-frame
30. frame Λ࿔Γ͍ͨͳΒ ୅ΘΓʹ center ͱ bounds.size ͷํΛ ࿔Εʂ ※ग़యɿhttps://developer.apple.com/documentation/uikit/uiview/1622621-frame
31. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.bounds.size = CGSize(width: 100, height: 100) view.center = CGPoint(x: base.bounds.midX, y: base.bounds.midY)
32. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ view.bounds.size = CGSize(width: 100, height: 100) view.center = CGPoint(x: base.bounds.midX, y: base.bounds.midY) view.layer.anchorPoint.y = 0
33. ϨΠΞ΢τΛઃఆ͢ΔϓϩύςΟʔΛཧղ͢Δ 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 Λมߋͨ͠Β
 ࣗ෼ͷ৔ॴ͕มΘͬͨ"
34. ※ग़యɿhttps://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/ CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW3
35. anchorPoint ͱϨΠϠʔͷ
 ϙδγϣχϯάͷؔ܎ʹ͍ͭͯ ʢҙ༁ɿcenter ͕ࢦͯ͠Δͷ͸
 anchorPoint ͷ
 ৔ॴͳΜ΍ʂʣ ※ग़యɿhttps://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/ CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW3
36. –Elvis Shi lUSBOTGPSN
    ͕ॳظ஋͡Όͳ͍Մೳੑ͕͋Ε͹ɺ
 GSBNF
    Λઃఆͤͣʹ
 CPVOETTJ[F
    ͱDFOUFS
    Λઃఆ͠Α͏z
37. αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ
38. αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ ݟͨײ͡Ͱ͸Ͳ͏΍Β
 frame ʹ௚઀ॻ͖ࠐΜͰͦ͏$
39. αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4)
40. αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4) ΍͸Γ transform Λ࿔ͬͨΒ
 ϨΠΞ΢τͰόάͬͨ"
41. NotAutoLayout https://github.com/el-hoshino/NotAutoLayout
42. αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4)
43. αʔυύʔςΟʔ੡ϥΠϒϥϦʔΛཧղ͢Δ segmented.transform = segmented.transform.rotated(by: .pi/4) bounds.size ͱ center Λઃఆ͍ͯ͠ΔͷͰɺ transform Λมߋͯ͠΋ϨΠΞ΢τ่Ε͸͠ͳ͍
44. let titleViewLayout = Layout .makeCustom(x: { _ in 0 }, y: { _ in 0 }, width: { $0.width }, height: { _ in 60 }) baseView.addSubview(titleView, constantLayout: titleViewLayout) NotAutoLayout 1.0
45. 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ʢԾʣ
46. –Elvis Shi l/PU"VUP-BZPVU
    Λͥͻࢼͯ͠Έ͍ͯͩ͘͞
 'FFECBDL
    ͱ
    4UBS
    Λ͓଴͓ͪͯ͠Γ·͢z