Upgrade to Pro — share decks privately, control downloads, hide ads and more …

No Story, No Board

No Story, No Board

Af64bc38c0ffcfcabdf430759ee491ce?s=128

Elvis Shi

June 23, 2017
Tweet

More Decks by Elvis Shi

Other Decks in Programming

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