Layout without Auto Layout for SwiftѪ޷ձ vol19

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 { } }

গ਺೿Ͱ΋ ࣗ༝ʹൃදͰ͖Δ Swift Ѫ޷ձʹ ѹ౗తײँ
 !

ࠓ·Ͱͷ Auto Layout dis

ࠓ·Ͱͷ Auto Layout dis

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

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

▸ UIView ͷ layoutSubviews ΛΦʔόʔϥΠυ ▸ subviews ͷ frame Λઃఆ ▸ transform Λઃఆͨ͠৔߹͸ bounds.size / center ͷํΛઃఆ ▸ ࣗ෼ͷ frame ͸ࣗ෼Ͱઃఆ͠ͳ͍ʂ ▸ ඞཁʹԠͯ͡ setNeedsLayout() ͔ layoutIfNeeded() ΛݺͿ ▸ ௚઀ layoutSubviews() Λݺ͹ͳ͍ʂ ίʔυͰϨΠΞ΢τͷεεϝ

▸ ඳըαΠΫϧͰ 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/ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ

▸ ඳըαΠΫϧͰ 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/ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ

ࣗ෼ͷ frame ͸ࣗ෼Ͱઃఆ͠ͳ͍ʂ ▸ UIKit ͷ࢓૊Έ্ɺࣗ෼ͷ frame ͷมߋ͸਌Ϗϡʔͷ layout ϑϥάΛཱͨͤΔ͜ͱʹͳΓɺ਌Ϗϡʔͷ layout ઃఆͰ͸· ͨࣗ෼ͷ frame มߋ͕ߦΘΕΔͷͰɺඇޮ཰͚ͩͰͳ͘ɺ৔ ߹ʹΑͬͯ͸ແݶϧʔϓʹͳΔڪΕ΋͋Δɻ ▸ ઃܭ্ɺࣗ෼ͷ frame ͸͋͘·Ͱ਌͔Βݟͨ৔߹ͷ৔ॴͱ େ͖͞ͳͷͰɺมߋͷݖݶΛ࣋ͭ΂͖͸ࣗ෼Ͱ͸ͳ͘਌ɻ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ

layoutSubviews ͷΦʔόʔϥΠυ͕ਏ͍ ▸ UIView ΛαϒΫϥε͠ͳ͍ͱ͍͚ͳ͍ ▸ UIView ΛαϒΫϥεͯ͠΋ subview ͱ layout ৘ใͷؔ࿈෇͚͕؆୯ʹͰ ͖Δͱ͸ݶΒͳ͍ ▸ subview Λ UIView ͷϓϩύςΟʔͱͯ͠ઃఆ͠ͳ͚Ε͹ͳΒͳ͍ ▸ ͳͷʹଟ͘ͷ৔߹͸ subview Λ࡞Δͷ͸ࣗ෼Ͱ͸ͳ͍ʢओʹ UIViewControllerʣ ▸ layoutSubviews() ϝιου͕๲ΒΜͰಡΈͮΒ͍"

NotAutoLayout ※Download from here: https://github.com/el-hoshino/NotAutoLayout

No content

No content

No content

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

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))

਌Ϗϡʔ͕ 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) } ͳͲͳͲ…

ࢠϏϡʔΛ௥Ճͯ͠ઌ΄Ͳ࡞ͬͨ Layout ʹؔ࿈෇͚ͤ͞Δ baseView.addSubview(subview, constantLayout: layout) baseView.addSubview(subview, constantLayout: layout, order: 0, zIndex: -1)

DEMO

Frame ܕ ▸ CGRect ܕͱࣅͨΑ͏ͳ΋ͷ ▸ CGRect ʹʮج४఺ʢReferencePointʣʯͱ͍͏֓೦Λ௥Ճ ▸ ج४఺ʹ͸ʮ.leftTopʯ΍ʮ.middleCenterʯͳͲͷ 9 ύλʔϯ Frame(x: 0, from: .center, y: 20, from: .top, width: 320, height: 480) ※NotAutoLayout Ͱ͸ʮج४఺ʯ͸਌ϏϡʔͱࢠϏϡʔ྆ํʹద༻͢Δɻ

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

ଞʹ΋ͨ͘͞Μ͋ΔͷͰ ͥͻݟͯΈ͍ͯͩ͘͞