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

Layout without Auto Layout

Layout without Auto Layout

Af64bc38c0ffcfcabdf430759ee491ce?s=128

Elvis Shi

May 23, 2017
Tweet

More Decks by Elvis Shi

Other Decks in Programming

Transcript

  1. Layout without Auto Layout for SwiftѪ޷ձ vol19

  2. override init() { super.init() emplyedBy = "MAGES. 5pb. Game div"

    job = "iOS Developer" twitter = "@lovee" qiita = "@lovee" github = "el-hoshino" additionalInfo = "HITMAN ಈը໘ന͗ͯ͢ਐḿμϝͰ͢ʘ(^o^)ʗ" class Speaker: Developer { } }
  3. গ਺೿Ͱ΋ ࣗ༝ʹൃදͰ͖Δ Swift Ѫ޷ձʹ ѹ౗తײँ
 !

  4. ࠓ·Ͱͷ Auto Layout dis

  5. ࠓ·Ͱͷ Auto Layout dis

  6. ▸ Θ͔ΓͮΒ͍ ▸ σόοάͮ͠Β͍ ▸ ώΤϥϧΩʔ͕ͳ͍←͜Ε "VUP-BZPVUƎƇŧƉčἠದƑۋམƊżĎ Why Not Auto

    Layout?
  7. ▸ Θ͔ΓͮΒ͍ ▸ σόοάͮ͠Β͍ ▸ ώΤϥϧΩʔ͕ͳ͍←͜Ε ▸ SnapKit ͱ͔Λ࢖͏ख΋͋Δ͚Ͳ΍ͬͺԶ͸ AutoLayout

    ͕ ݏ͍ͩʂ Why Not Auto Layout?
  8. ▸ UIView ͷ layoutSubviews ΛΦʔόʔϥΠυ ▸ subviews ͷ frame Λઃఆ

    ▸ transform Λઃఆͨ͠৔߹͸ bounds.size / center ͷํΛઃఆ ▸ ࣗ෼ͷ frame ͸ࣗ෼Ͱઃఆ͠ͳ͍ʂ ▸ ඞཁʹԠͯ͡ setNeedsLayout() ͔ layoutIfNeeded() ΛݺͿ ▸ ௚઀ layoutSubviews() Λݺ͹ͳ͍ʂ ίʔυͰϨΠΞ΢τͷεεϝ
  9. ▸ ඳըαΠΫϧͰ UIView ͷ layout ϑϥάΛ؂ࢹ ▸ layout ϑϥάΛཱͨͤΔ ▸

    ࣍ͷඳըαΠΫϧͰϑϥάཱ͕͍ͬͯΔ͜ͱ͕֬ೝ͞ΕɺlayoutSubviews() ͕ݺ͹ΕΔ ▸ layout ϑϥάΛཱͨͤΔखஈɿ ▸ ࣗ෼ͷ initʢ౰ͨΓલʣ ▸ ࣗ෼ͷ addSubviewʢ౰ͨΓલʣ ▸ subview ͷ frame ͷ setʢʮsubviewʯ ʹ஫ҙʂʣ ▸ setNeedsLayout() ΛݺͿ ▸ ͦͷଞ ▸ layoutIfNeeded() ΛݺͿͱ layout ϑϥάཱ͕͍ͬͯΕ͹͙͢ϨΠΞ΢τ͢Δ ▸ ͭ·Γཱͬͯͳ͚Ε͹ϨΠΞ΢τ͠ͳ͍ʂ ▸ Ξχϝʔγϣϯͷ৔߹͸ setNeedsLayout() ݺΜͩޙΞχϝʔγϣϯઃఆ಺ʹ layoutIfNeeded() Λݺ΂͹͍͍ ※ࢀߟɿhttp://blog.logichigh.com/2011/03/16/when-does-layoutsubviews-get-called/ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ
  10. ▸ ඳըαΠΫϧͰ UIView ͷ layout ϑϥάΛ؂ࢹ ▸ layout ϑϥάΛཱͨͤΔ ▸

    ࣍ͷඳըαΠΫϧͰϑϥάཱ͕͍ͬͯΔ͜ͱ͕֬ೝ͞ΕɺlayoutSubviews() ͕ݺ͹ΕΔ ▸ layout ϑϥάΛཱͨͤΔखஈɿ ▸ ࣗ෼ͷ initʢ౰ͨΓલʣ ▸ ࣗ෼ͷ addSubviewʢ౰ͨΓલʣ ▸ subview ͷ frame ͷ setʢʮsubviewʯ ʹ஫ҙʂʣ ▸ setNeedsLayout() ΛݺͿ ▸ ͦͷଞ ▸ layoutIfNeeded() ΛݺͿͱ layout ϑϥάཱ͕͍ͬͯΕ͹͙͢ϨΠΞ΢τ͢Δ ▸ ͭ·Γཱͬͯͳ͚Ε͹ϨΠΞ΢τ͠ͳ͍ʂ ▸ Ξχϝʔγϣϯͷ৔߹͸ setNeedsLayout() ݺΜͩޙΞχϝʔγϣϯઃఆ಺ʹ layoutIfNeeded() Λݺ΂͹͍͍ ※ࢀߟɿhttp://blog.logichigh.com/2011/03/16/when-does-layoutsubviews-get-called/ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ
  11. ࣗ෼ͷ frame ͸ࣗ෼Ͱઃఆ͠ͳ͍ʂ ▸ UIKit ͷ࢓૊Έ্ɺࣗ෼ͷ frame ͷมߋ͸਌Ϗϡʔͷ layout ϑϥάΛཱͨͤΔ͜ͱʹͳΓɺ਌Ϗϡʔͷ

    layout ઃఆͰ͸· ͨࣗ෼ͷ frame มߋ͕ߦΘΕΔͷͰɺඇޮ཰͚ͩͰͳ͘ɺ৔ ߹ʹΑͬͯ͸ແݶϧʔϓʹͳΔڪΕ΋͋Δɻ ▸ ઃܭ্ɺࣗ෼ͷ frame ͸͋͘·Ͱ਌͔Βݟͨ৔߹ͷ৔ॴͱ େ͖͞ͳͷͰɺมߋͷݖݶΛ࣋ͭ΂͖͸ࣗ෼Ͱ͸ͳ͘਌ɻ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ
  12. layoutSubviews ͷΦʔόʔϥΠυ͕ਏ͍ ▸ UIView ΛαϒΫϥε͠ͳ͍ͱ͍͚ͳ͍ ▸ UIView ΛαϒΫϥεͯ͠΋ subview ͱ

    layout ৘ใͷؔ࿈෇͚͕؆୯ʹͰ ͖Δͱ͸ݶΒͳ͍ ▸ subview Λ UIView ͷϓϩύςΟʔͱͯ͠ઃఆ͠ͳ͚Ε͹ͳΒͳ͍ ▸ ͳͷʹଟ͘ͷ৔߹͸ subview Λ࡞Δͷ͸ࣗ෼Ͱ͸ͳ͍ʢओʹ UIViewControllerʣ ▸ layoutSubviews() ϝιου͕๲ΒΜͰಡΈͮΒ͍"
  13. NotAutoLayout ※Download from here: https://github.com/el-hoshino/NotAutoLayout

  14. None
  15. None
  16. None
  17. NotAutoLayout ͷεεϝ 1.NotAutoLayout ରԠͷ਌ϏϡʔΛ࡞Δ 2.਌Ϗϡʔ͕ Layout Λ࡞Δ 3.ࢠϏϡʔΛ௥Ճͯ͠ઌ΄Ͳ࡞ͬͨ Layout ʹؔ࿈෇͚ͤ͞Δ

  18. NotAutoLayout ରԠͷ਌ϏϡʔΛ࡞Δ let baseView = LayoutView(frame: CGRect(x: 0, y: 0,

    width: 320, height: 568)) class BaseView: LayoutView { // ... } let baseView = BaseView(frame: CGRect(x: 0, y: 0, width: 320, height: 568)) public class BaseView: UIScrollView, LayoutControllable { public var layoutInfo: [LayoutControllable.Hash: [LayoutMethod]] = [:] public var orderInfo: [LayoutControllable.Hash : Int] = [:] public var zIndexInfo: [LayoutControllable.Hash: Int] = [:] public var layoutOptimization: LayoutOptimization = .sequence override public func layoutSubviews() { super.layoutSubviews() self.layoutControl() } // ... } let baseView = BaseView(frame: CGRect(x: 0, y: 0, width: 320, height: 568))
  19. ਌Ϗϡʔ͕ Layout Λ࡞Δ let layout = Layout.makeRelative(frame: CGRect(x: 0.2, y:

    0.2, width: 0.6, height: 0.6)) let layout = Layout.makeInsets(insets: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)) let layout = Layout.makeCustom { (boundSize) -> Frame in return Frame(x: 0, from: .center, y: boundSize.height * 0.2, from: .top, width: 300, height: boundSize.height * 0.8) } ͳͲͳͲ…
  20. ࢠϏϡʔΛ௥Ճͯ͠ઌ΄Ͳ࡞ͬͨ Layout ʹؔ࿈෇͚ͤ͞Δ baseView.addSubview(subview, constantLayout: layout) baseView.addSubview(subview, constantLayout: layout, order:

    0, zIndex: -1)
  21. DEMO

  22. Frame ܕ ▸ CGRect ܕͱࣅͨΑ͏ͳ΋ͷ ▸ CGRect ʹʮج४఺ʢReferencePointʣʯͱ͍͏֓೦Λ௥Ճ ▸ ج४఺ʹ͸ʮ.leftTopʯ΍ʮ.middleCenterʯͳͲͷ

    9 ύλʔϯ Frame(x: 0, from: .center, y: 20, from: .top, width: 320, height: 480) ※NotAutoLayout Ͱ͸ʮج४఺ʯ͸਌ϏϡʔͱࢠϏϡʔ྆ํʹద༻͢Δɻ
  23. Frame ܕ Frame(x: 0, from: .center, y: 20, from: .top,

    width: 320, height: 480) 0 20 Frame(x: -20, from: .right, y: 0, from: .bottom, width: 320, height: 480) 0 -20 Frame(x: 0, from: .left, y: 0, from: .top, width: 320, height: 480) 0 0
  24. ଞʹ΋ͨ͘͞Μ͋ΔͷͰ ͥͻݟͯΈ͍ͯͩ͘͞