Layout without Auto Layout

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
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. ଞʹ΋ͨ͘͞Μ͋ΔͷͰ ͥͻݟͯΈ͍ͯͩ͘͞