Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
使い勝手のよいCustomViewをつくる
Search
himaratsu
October 27, 2016
Technology
0
630
使い勝手のよいCustomViewをつくる
@IBDesignable & @IBInspectable が使えて、使い勝手のよいCustomViewの作り方をまとめて紹介しました。
iOS_LT #23 で発表した資料です。
himaratsu
October 27, 2016
Tweet
Share
More Decks by himaratsu
See All by himaratsu
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
160
microCMSではじめるAIライティング
himaratsu
0
190
Next.js × microCMSで道の駅サイトを作った話
himaratsu
0
890
PayPayフリマの速度改善
himaratsu
2
360
Goodbye Code Review, Hello Pair Programming
himaratsu
0
190
UICollectionViewでインタラクティブなCellの並び替え
himaratsu
2
10k
Other Decks in Technology
See All in Technology
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.3k
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
Wasmのエコシステムを使った ツール作成方法
askua
0
150
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
630
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
100
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
230
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
470
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
120
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Building Applications with DynamoDB
mza
96
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Balancing Empowerment & Direction
lara
4
690
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
How to Think Like a Performance Engineer
csswizardry
27
2k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Fireside Chat
paigeccino
40
3.7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Transcript
͍উखͷΑ͍ CustomViewΛͭ͘Δ @himara2 / iOS_LT
CustomView? ։ൃ͍ͯ͠ΔͱɺطଘͷUIViewΛ֦ுͨ͠ಠࣗͷΫϥεΛ࡞Γͨ͘ͳΔ
͍উखͷΑ͍CustomView?
- Storyboard / xib Ͱ͑Δ ͍উखͷΑ͍CustomView?
- Storyboard / xib Ͱ͑Δ ͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β͑Δ let customView
= MyCustomView(frame: CGRect(x: 50, y: 100, width: 270, height: 200)) customView.titleLabel.text = "Hello!" view.addSubview(customView) ͜Μͳײ͡ͰॳظԽͯ͑͠Δ
- Storyboard / xib Ͱ͑Δ ͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β͑Δ - @IBDesignable
& @IBInspectable ʹରԠ
- Storyboard / xib Ͱ͑Δ ͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β͑Δ - @IBDesignable
& @IBInspectable ʹରԠ - ৭ʑͳը໘͔Β͍͍͢
- Storyboard / xib Ͱ͑Δ ͍উखͷΑ͍CustomView? - ιʔείʔυ͔Β͑Δ - @IBDesignable
& @IBInspectable ʹରԠ - ৭ʑͳը໘͔Β͍͍͢ → ͻͱඞཁͳͷͰɺखॱΛ·ͱΊ·ͨ͠
Step.1 UIViewΛܧঝͨ͠ΫϥεΛ࡞ͯ͠ɺ xibϑΝΠϧʹίϯϙʔωϯτΛฒΔ
Step.2 xibͷʮFile’s Ownerʯͷ߲ʹɺ ࣗͰͭͬͨ͘ΫϥεΛͯΔ ※ʮViewʯʹͯͳ͍ͷ͕ϙΠϯτ
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)) }
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ͷॳظԽॲཧ
Step.4 @IBDesignable, @IBInspectable ͷଐੑΛઃఆ @IBDesignable class MyCustomView: UIView { …
} @IBInspectable var titleText: String = "" { didSet { titleLabel.text = titleText } } @IBInspectable var iconImage: UIImage? { didSet { iconImageView.image = iconImage } }
!
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ଆ͔Β ͜Μͳײ͡Ͱ͏
NibDesignable ͱ͍͏ OSS ͱ͋Θͤͯ͏ͱศརʢΒ͍͠ʣ tips - Swift 3Ͱ͏·͘ϏϧυͰ͖ͣɺ·ͩࢼͤͯͳ͍ - ઌ΄ͲͷExtensionΛݞΘΓͯ͘͠ΕΔΑ͏ͳͷ
IUUQTHJUIVCDPNNCPHI/JC%FTJHOBCMF
ຊ͓ݟͤͨ͠αϯϓϧίʔυ ɹ- https://github.com/himaratsu/CustomViewSample ɹ- ࠓͷLTΛ͖͔͚ͬʹSwift 3ରԠ͠·ͨ͠✌ ੲॻ͍ͨϒϩά ɹ- http://himaratsu.hatenablog.com/entry/ios/customview ɹ-
ࠓͷΑΓ͏ͪΐͬͱৄ͘͠ॻ͍ͯ·͢ ͦͷଞ
͓ΘΓ