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

使い勝手のよいCustomViewをつくる

61fe6537eed31e8d1999ce1c1d5bf988?s=47 himaratsu
October 27, 2016

 使い勝手のよいCustomViewをつくる

@IBDesignable & @IBInspectable が使えて、使い勝手のよいCustomViewの作り方をまとめて紹介しました。

iOS_LT #23 で発表した資料です。

61fe6537eed31e8d1999ce1c1d5bf988?s=128

himaratsu

October 27, 2016
Tweet

Transcript

  1. ࢖͍উखͷΑ͍ CustomViewΛͭ͘Δ @himara2 / iOS_LT

  2. CustomView? ։ൃ͍ͯ͠ΔͱɺطଘͷUIViewΛ֦ுͨ͠ಠࣗͷΫϥεΛ࡞Γͨ͘ͳΔ

  3. ࢖͍উखͷΑ͍CustomView?

  4. - Storyboard / xib Ͱ࢖͑Δ ࢖͍উखͷΑ͍CustomView?

  5. - Storyboard / xib Ͱ࢖͑Δ ࢖͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β΋࢖͑Δ let customView

    = MyCustomView(frame: CGRect(x: 50, y: 100, width: 270, height: 200)) customView.titleLabel.text = "Hello!" view.addSubview(customView) ͜Μͳײ͡ͰॳظԽͯ͠࢖͑Δ
  6. - Storyboard / xib Ͱ࢖͑Δ ࢖͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β΋࢖͑Δ - @IBDesignable

    & @IBInspectable ʹରԠ
  7. - Storyboard / xib Ͱ࢖͑Δ ࢖͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β΋࢖͑Δ - @IBDesignable

    & @IBInspectable ʹରԠ - ৭ʑͳը໘͔Β࢖͍΍͍͢
  8. - Storyboard / xib Ͱ࢖͑Δ ࢖͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β΋࢖͑Δ - @IBDesignable

    & @IBInspectable ʹରԠ - ৭ʑͳը໘͔Β࢖͍΍͍͢ → ͻͱ޻෉ඞཁͳͷͰɺखॱΛ·ͱΊ·ͨ͠
  9. Step.1 UIViewΛܧঝͨ͠ΫϥεΛ࡞੒ͯ͠ɺ xibϑΝΠϧʹίϯϙʔωϯτΛฒ΂Δ

  10. Step.2 xibͷʮFile’s Ownerʯͷ߲໨ʹɺ ࣗ෼Ͱͭͬͨ͘ΫϥεΛ౰ͯΔ ※ʮViewʯʹ౰ͯͳ͍ͷ͕ϙΠϯτ

  11. Step.3 ॳظԽͷίʔυΛॻ͘ override init(frame: CGRect) { super.init(frame: frame) commonInit() }

    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) commonInit() } private func commonInit() { let nib = UINib(nibName: "MyCustomView", bundle: nil) let view = nib.instantiate(withOwner: self, options: nil).first as! UIView addSubview(view) view.translatesAutoresizingMaskIntoConstraints = false let bindings = ["view": view] addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[view]|", options:NSLayoutFormatOptions(rawValue: 0), metrics:nil, views: bindings)) addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[view]|", options:NSLayoutFormatOptions(rawValue: 0), metrics:nil, views: bindings)) }
  12. Step.3 override init(frame: CGRect) { super.init(frame: frame) commonInit() } required

    init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) commonInit() } private func commonInit() { let nib = UINib(nibName: "MyCustomView", bundle: nil) let view = nib.instantiate(withOwner: self, options: nil).first as! UIView addSubview(view) view.translatesAutoresizingMaskIntoConstraints = false let bindings = ["view": view] addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[view]|", options:NSLayoutFormatOptions(rawValue: 0), metrics:nil, views: bindings)) addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[view]|", options:NSLayoutFormatOptions(rawValue: 0), metrics:nil, views: bindings)) } ॳظԽͷίʔυΛॻ͘ ίʔυ͔ΒCustomViewΛ ॳظԽͨ͠ͱ͖ݺ͹ΕΔ Storyboard/xib͔ΒCustomViewΛ ॳظԽͨ͠ͱ͖ݺ͹ΕΔ viewͷॳظԽॲཧ
  13. Step.4 @IBDesignable, @IBInspectable ͷଐੑΛઃఆ @IBDesignable class MyCustomView: UIView { …

    } @IBInspectable var titleText: String = "" { didSet { titleLabel.text = titleText } } @IBInspectable var iconImage: UIImage? { didSet { iconImageView.image = iconImage } }
  14. ׬੒!

  15. tips ຖճviewͷॳظԽ·ΘΓͷίʔυΛॻ͘ͷ͸πϥΠͷͰɺProtocolΛ༻ҙ͢Δͱྑ͍ protocol XibInstantiatable { func instantiate() } extension XibInstantiatable

    where Self: UIView { func instantiate() { let bundle = Bundle(for: type(of: self)) let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle) guard let view = nib.instantiate(withOwner: self, options: nil).first as? UIView else { return } addSubview(view) view.translatesAutoresizingMaskIntoConstraints = false let bindings = ["view": view] addConstraints(NSLayoutConstraint.constraints(withVisualFormat: “H:|[view]|", … addConstraints(NSLayoutConstraint.constraints(withVisualFormat: “V:|[view]|", … } } override init(frame: CGRect) { super.init(frame: frame) instantiate() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) instantiate() } CustomViewଆ͔Β͸ ͜Μͳײ͡Ͱ࢖͏
  16. NibDesignable ͱ͍͏ OSS ͱ͋Θͤͯ࢖͏ͱศརʢΒ͍͠ʣ tips - Swift 3Ͱ͏·͘ϏϧυͰ͖ͣɺ·ͩࢼͤͯͳ͍ - ઌ΄ͲͷExtensionΛݞ୅ΘΓͯ͘͠ΕΔΑ͏ͳ΋ͷ

    IUUQTHJUIVCDPNNCPHI/JC%FTJHOBCMF
  17. ຊ೔͓ݟͤͨ͠αϯϓϧίʔυ ɹ- https://github.com/himaratsu/CustomViewSample ɹ- ࠓ೔ͷLTΛ͖͔͚ͬʹSwift 3ରԠ͠·ͨ͠✌ ੲॻ͍ͨϒϩά ɹ- http://himaratsu.hatenablog.com/entry/ios/customview ɹ-

    ࠓ೔ͷ࿩ΑΓ΋͏ͪΐͬͱৄ͘͠ॻ͍ͯ·͢ ͦͷଞ
  18. ͓ΘΓ