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

制約を使ってViewを動かす

taminif
March 12, 2017

 制約を使ってViewを動かす

taminif

March 12, 2017
Tweet

More Decks by taminif

Other Decks in Programming

Transcript

  1. ੍໿Λ࢖ͬͯ
    ViewΛಈ͔͢
    ؔ੢ϞόΠϧΞϓϦݚڀձ #23
    2017/02/28
    େౡ ޫو

    View full-size slide

  2. ࣗݾ঺հ
    • ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ
    • ΞϓϦΤϯδχΞ

    ʢࣗশʣ
    • ࣙॻαʔϏεͷձࣾʹۈΊͯ·͕͢ӳޠͰ͖·ͤΜ
    • Try!SwiftͰݟ͔͚ͨΒ੠͔͚͍ͯͩ͘͞ɻ

    ʢӳޠॿ͚͍ͯͩ͘͞ʣ

    View full-size slide

  3. ੍໿ͷ͓࿩

    View full-size slide

  4. ੍໿ͱ͸
    • Auto LayoutΛߏ੒͢ΔͨΊͷʮ৚݅ʯ
    • ཁૉͷҐஔ = ׂ߹ * ର৅ཁૉͷҐஔ + ڑ཭

    Ͱߏ੒͞ΕΔ
    • ʮԣ෯ͷத৺ʯʮॎ෯ͷத৺ʯ΋ઃఆՄೳ

    View full-size slide

  5. ྫ͑͹ɺࠨ൒෼ʹViewΛ
    ஔ͖͍ͨ৔߹

    View full-size slide

  6. 7JFXUPQ
    7JFXMFBEJOH
    7JFXCPUUPN
    7JFXXJEUI
    4VQFS7JFXXJEUI

    View full-size slide

  7. ͜ΕΛӈ൒෼ʹಈ͔͠·͢

    View full-size slide

  8. ͜ͷ෯͚ͩ
    ੍໿Λมߋ͠·͢

    View full-size slide

  9. ίʔυྫ
    class ViewController: UIViewController {
    @IBOutlet var testView: UIView!
    @IBOutlet var testViewLeadingConstraint: NSLayoutConstraint!
    @IBAction func buttonTouchDown(_ sender: Any) {
    self.testViewLeadingConstraint.constant =
    self.testView.frame.width
    }
    }

    View full-size slide

  10. ͜ΕʹΞχϝʔγϣϯΛ
    ͚ͭͯΈ·͢ɻ

    View full-size slide

  11. animate௥Ճ
    class ViewController: UIViewController {
    @IBOutlet var testView: UIView!
    @IBOutlet var testViewLeadingConstraint: NSLayoutConstraint!
    @IBAction func buttonTouchDown(_ sender: Any) {
    UIView.animate(withDuration: 3.0, animations: {
    self.testViewLeadingConstraint.constant =
    self.testView.frame.width
    })
    }
    }

    View full-size slide

  12. Ξχϝʔγϣϯ͞Εͳ͍ʁʁ

    View full-size slide

  13. Ξχϝʔγϣϯ͢Δํ๏
    class ViewController: UIViewController {
    @IBOutlet var testView: UIView!
    @IBOutlet var testViewLeadingConstraint: NSLayoutConstraint!
    @IBAction func buttonTouchDown(_ sender: Any) {
    self.testViewLeadingConstraint.constant =
    self.testView.frame.width
    UIView.animate(withDuration: 3.0, animations: {
    self.view.layoutIfNeeded()
    })
    }
    }
    ->΄ͱΜͲͷαΠτͰಉ͡಺༰͕ग़ͯ͘Δ

    View full-size slide

  14. Ξχϝʔγϣϯ͢Δ৚݅
    View Programming Guide for iOSΑΓ
    • UIViewΛ࢖༻
    • frame, boundsͳͲݶΒΕ߲ͨ໨ͷΈՄೳ
    • ConstraintͰઃఆ੍ͨ͠໿͸LayoutΛߋ৽͢
    Δ·Ͱมߋ͞Εͳ͍
    • layoutIfNeededΛݺͿ͜ͱͰ഑ஔ͕มΘΔͨ
    ΊΞχϝʔγϣϯ͞ΕΔʢਪଌʣ

    View full-size slide

  15. ࠨ൒෼ʹViewΛ
    ೋͭஔ͍ͨ৔߹

    View full-size slide

  16. XJEUI IFJHIUڞʹ
    4VQFS7JFX
    XJEUI͸ಉ͡Ͱɺ
    ্ͷ7JFXͱͷ$POTUBOU͕

    View full-size slide

  17. Լ͚ͩΛಈ͔ͯ͠Έ·͢

    View full-size slide

  18. ੍໿͸
    มߋͨ͠ConstantҎ֎͸ಈ͔ͳ͍

    View full-size slide

  19. ·ͱΊ
    • ੍໿͸IBOutletͰඥ෇͚Ͱ͖Δ
    • ੍໿ΛAnimationͰಈ͔͍ͨ͠৔߹͸
    layoutIfNeededΛ࢖༻͢Δ
    • ੍໿͸มߋͨ͠෦෼Ҏ֎͸ӨڹΛड͚ͳ͍

    View full-size slide

  20. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide