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

Layout without Auto Layout

Layout without Auto Layout

Avatar for Elvis Shi

Elvis Shi

May 23, 2017
Tweet

More Decks by Elvis Shi

Other Decks in Programming

Transcript

  1. 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 { } }
  2. ▸ UIView ͷ layoutSubviews ΛΦʔόʔϥΠυ ▸ subviews ͷ frame Λઃఆ

    ▸ transform Λઃఆͨ͠৔߹͸ bounds.size / center ͷํΛઃఆ ▸ ࣗ෼ͷ frame ͸ࣗ෼Ͱઃఆ͠ͳ͍ʂ ▸ ඞཁʹԠͯ͡ setNeedsLayout() ͔ layoutIfNeeded() ΛݺͿ ▸ ௚઀ layoutSubviews() Λݺ͹ͳ͍ʂ ίʔυͰϨΠΞ΢τͷεεϝ
  3. ▸ ඳըαΠΫϧͰ 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/ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ
  4. ▸ ඳըαΠΫϧͰ 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/ ϨΠΞ΢τͷྲྀΕʢུ֓ʣ
  5. ࣗ෼ͷ frame ͸ࣗ෼Ͱઃఆ͠ͳ͍ʂ ▸ UIKit ͷ࢓૊Έ্ɺࣗ෼ͷ frame ͷมߋ͸਌Ϗϡʔͷ layout ϑϥάΛཱͨͤΔ͜ͱʹͳΓɺ਌Ϗϡʔͷ

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

    layout ৘ใͷؔ࿈෇͚͕؆୯ʹͰ ͖Δͱ͸ݶΒͳ͍ ▸ subview Λ UIView ͷϓϩύςΟʔͱͯ͠ઃఆ͠ͳ͚Ε͹ͳΒͳ͍ ▸ ͳͷʹଟ͘ͷ৔߹͸ subview Λ࡞Δͷ͸ࣗ෼Ͱ͸ͳ͍ʢओʹ UIViewControllerʣ ▸ layoutSubviews() ϝιου͕๲ΒΜͰಡΈͮΒ͍"
  7. 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))
  8. ਌Ϗϡʔ͕ 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) } ͳͲͳͲ…
  9. Frame ܕ ▸ CGRect ܕͱࣅͨΑ͏ͳ΋ͷ ▸ CGRect ʹʮج४఺ʢReferencePointʣʯͱ͍͏֓೦Λ௥Ճ ▸ ج४఺ʹ͸ʮ.leftTopʯ΍ʮ.middleCenterʯͳͲͷ

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