Slide 1
Slide 1 text
IBͱUIͷదͳ֊ԽͷఏҊ
2018.3.28 AKIBA.swift × ΤϨΧ ίʔυϨΠΞτษڧձ
Naruki Chigira @timers-inc.
Slide 2
Slide 2 text
Lib arXiv
arxiv.org ʹߘ͞ΕΔจΛӾཡɾอଘɾڞ༗͢ΔͨΊͷΞϓϦ
Slide 3
Slide 3 text
No Interface Builder
No Auto Layout
iPhone & iPad (& iPhoneX)
Portrait & Landscape
Slide 4
Slide 4 text
class ApplicationStyle {
static let isiPhone = UIDevice.current.userInterfaceIdiom == .phone
class Category {
static func TableViewCellRowHeight() -> CGFloat {
if isiPhone {
return 50.0
} else {
return 60.0
}
}
…
Slide 5
Slide 5 text
https://github.com/naru-jpn/LayoutXML
LayoutXML
Android styled XML template engine for iOS written in Swift.
Slide 6
Slide 6 text
https://github.com/naru-jpn/LayoutXML
Slide 7
Slide 7 text
https://github.com/naru-jpn/LayoutXML
Slide 8
Slide 8 text
https://github.com/naru-jpn/LayoutXML
Slide 9
Slide 9 text
https://github.com/naru-jpn/LayoutXML
$ pod try LayoutXML
Slide 10
Slide 10 text
XML͔Βੜ͞ΕΔϏϡʔͷ֊ߏ
Slide 11
Slide 11 text
http://grepcode.com/.../LinearLayout.java
grepcode.com
LinearLayout View Λܧঝ͍ͯ͠Δ
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
֊ߏ͕͔Ε͍ͯΔͷͰ
֤ʑͷ෦ͷϨΠΞτಠཱʹܭࢉ͕Ͱ͖Δ
ᶃ
ᶄ
ᶅ
Slide 14
Slide 14 text
લఏ͓ΘΓ
Slide 15
Slide 15 text
ຊ
Slide 16
Slide 16 text
ϏϡʔίϯτϩʔϥʹԿΛ͍͔ͤͨ͞ʁ
Slide 17
Slide 17 text
ϏϡʔͷίϯτϩʔϧΛ͍ͤͨ͞
Slide 18
Slide 18 text
Ͱ͖ΕϏϡʔͷίϯτϩʔϧʮ͚ͩʯ͍ͤͨ͞
Slide 19
Slide 19 text
͖ͬ͞ͷxmlͷྫΛࢥ͍ग़ͯ͠ΈΔ
Slide 20
Slide 20 text
https://github.com/naru-jpn/LayoutXML
Slide 21
Slide 21 text
https://github.com/naru-jpn/LayoutXML
Slide 22
Slide 22 text
ಡΈࠐΈ3ߦɺ෦ใͷߋ৽4ߦʂ
Slide 23
Slide 23 text
Ͱո͍͠ϥΠϒϥϦ͍ͨ͘ͳ͍
Slide 24
Slide 24 text
ʮ֊ߏʯ͕ΩʔʹͳΔͷͰ…!
Slide 25
Slide 25 text
Ծʹɺ࣍ͷΑ͏ͳ࣮Λߟ͑ͯΈ·͠ΐ͏
Slide 26
Slide 26 text
ίʔυϨΠΞτ
ҎԼͷจষΛ֬͝ೝ͍ͩ͘͞
͋ͳͨInterface BuilderΛ
͍͚ͬͯ·ͤΜ
͍ɺΘ͔Γ·ͨ͠
ҙࣄ߲
Slide 27
Slide 27 text
ίʔυϨΠΞτ
͋Γ͕ͱ͏͍͟͝·ͨ͠
ҙࣄ߲
Slide 28
Slide 28 text
ίʔυϨΠΞτ
ҎԼͷจষΛ֬͝ೝ͍ͩ͘͞
͋ͳͨInterface BuilderΛ
͍͚ͬͯ·ͤΜ
͍ɺΘ͔Γ·ͨ͠
ҙࣄ߲
ίʔυϨΠΞτ
͋Γ͕ͱ͏͍͟͝·ͨ͠
ҙࣄ߲
Slide 29
Slide 29 text
Ͳ͏࡞Γ·͔͢ʁ
Slide 30
Slide 30 text
·ͣϑϥοτʹ࡞ͬͯΈ·͠ΐ͏
Slide 31
Slide 31 text
FlattenViewController
Slide 32
Slide 32 text
class FlattenViewController: UIViewController, Instantiatable {
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var messageLabel: UILabel!
@IBOutlet weak var confirmLabel: UILabel!
@IBOutlet weak var confirmButton: UIButton!
@IBOutlet weak var notesButton: UIButton!
@IBAction func onAcceptButtonClicked(sender: Any) {
messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠"
// ϨΠΞτͷߋ৽...
}
}
Slide 33
Slide 33 text
ϨΠΞτͷߋ৽͕େม
Slide 34
Slide 34 text
ಈతͳ༷͕͞Βʹ૿͑ͨΒ…?
Slide 35
Slide 35 text
֊ԽΛͯ͠ΈΑ͏
Slide 36
Slide 36 text
LayeredViewController
Slide 37
Slide 37 text
LayeredViewController
LayeredHeaderView
LayeredBodyView
LayeredFooterView
Slide 38
Slide 38 text
class LayeredViewController: UIViewController, Instantiatable {
@IBOutlet weak var header: LayeredHeaderView!
@IBOutlet weak var body: LayeredBodyView!
@IBOutlet weak var footer: LayeredFooterView!
}
֤ΧελϜϏϡʔͷ࡞Γํɺ͍ํΛΈ͍͖ͯ·͠ΐ͏
Slide 39
Slide 39 text
class LayeredHeaderView: UIView {
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var messageLabel: UILabel!
/// ঝ͞Εͨ
func accept() {
messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠"
}
}
Slide 40
Slide 40 text
UIViewΛՃɺCustom Class ʹఆٛͨ͠ϏϡʔͷΫϥεΛࢦఆ͢Δ
Tips1 ΧελϜϏϡʔͷࢦఆ
Slide 41
Slide 41 text
Outlets ʹΧελϜϏϡʔͷϓϩύςΟ͕ݟ͑ΔͷͰɺܨ͙
Tips1 ΧελϜϏϡʔͷࢦఆ
Slide 42
Slide 42 text
class LayeredBodyView: UIView {
@IBOutlet weak var messageLabel: UILabel!
@IBOutlet weak var button: UIButton!
@IBOutlet weak var zeroHeightConstraint: NSLayoutConstraint!
/// ։ด
var isOpen: Bool = true {
didSet {
zeroHeightConstraint.isActive = !isOpen
}
}
}
Slide 43
Slide 43 text
0
A
B
C
Priority: A, B < C
੍CͷΞΫςΟϒɾඇΞΫςΟϒͷΓସ͑ʹΑͬͯදࣔɾඇද͕ࣔͰ͖Δ
100
100
Tips2 ੍ͷߏԽ
Slide 44
Slide 44 text
class LayeredFooterView: UIView {
@IBOutlet weak var notesButon: UIButton!
}
Slide 45
Slide 45 text
class LayeredViewController: UIViewController, Instantiatable {
@IBOutlet weak var header: LayeredHeaderView!
@IBOutlet weak var body: LayeredBodyView!
@IBOutlet weak var footer: LayeredFooterView!
@IBAction func onAcceptButtonClicked(sender: Any) {
header.accept()
body.isOpen = false
}
}
13ߦʂ
Slide 46
Slide 46 text
ಈతͳ༷͕૿͑ͯฏؾͳؾ͕͠·ͤΜ͔ʁ
Slide 47
Slide 47 text
·ͱΊ
ʮదͳ֊ԽʯʹΑͬͯ
ɾ໌֬ͳػೳΛ࣋ͬͨΧελϜϏϡʔ͕࡞͘͢͠ͳΔ
ɾ੍͕ߏԽ͞Εͯར༻͘͢͠ͳΔ
ɾϏϡʔίϯτϩʔϥͰͷॲཧΛநԽ͘͢͠ͳΔ
Slide 48
Slide 48 text
IBͱUIͷదͳ֊ԽͷఏҊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !