Slide 1
Slide 1 text
(UI)Switchͭ͘ΕΔ
IBOZV!4BOTBO
*OD
2018.02.14 | #iOS_UI࣮ษڧձWPM
Slide 2
Slide 2 text
Who?
• HANYU, Koji
• Sansan, Inc. iOS Developer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Customizing the Appearance of the Switch
var onTintColor: UIColor?
The color used to tint the appearance of the switch when it is turned on.
var tintColor: UIColor!
The color used to tint the outline of the switch when it is turned off.
var thumbTintColor: UIColor?
The color used to tint the appearance of the thumb.
var onImage: UIImage?
In iOS 6 and earlier, the image displayed when the switch is in the on position.
var offImage: UIImage?
In iOS 6 and earlier, the image displayed when the switch is in the off position.
https://developer.apple.com/documentation/uikit/uiswitch
TintColor͔͠ΧελϚΠζͰ͖ͳ͍
Slide 5
Slide 5 text
6*
4XJUDIͷ࠷খݶͷཁ݅
w 0O0⒎ͷঢ়ଶ͕Θ͔Δ
w ϓϩύςΟͱͯ͠
w ࢹ֮తʹ
w λοϓͰঢ়ଶΓସ͑
εςʔτཧ
ඳը
λοϓΠϕϯτ
ˠ
Slide 6
Slide 6 text
public class CustomSwitch: UIControl {
var isOn: Bool = true
var isAnimating: Bool = false
var animationDuration: TimeInterval = 0.5
var onTintColor: UIColor = .blue
var offTintColor: UIColor? = .lightGray
}
ɾ
ɾ
ɾ
Slide 7
Slide 7 text
func animate() {
self.isAnimating = true
UIView.animate(
…
completion: {
self.sendActions(for: .valueChanged)
self.isAnimating = false
}
}
Slide 8
Slide 8 text
https://github.com/gaussbeam/CustomSwitch
Slide 9
Slide 9 text
·ͱΊ
w ཁ݅Λ͏·͘ߜΕɼίϯϙʔωϯτͮ͘Γ݁ߏ؆୯
w ओཁͳը໘ɼଥڠͰ͖ͳ͍ՕॴͳΒݕ౼͢ΔՁΞϦ
w ̍࣌ؒ΄ͲͰ࣮Մೳ 6*ௐؚΊ
w ඳըΞχϝʔγϣϯΛٻͰ͖Δ
w ࢥ͍௨Γʹ্͕Δͱָ͍͠
Slide 10
Slide 10 text
ࢀߟ
• Making custom UISwitch (Part 1) – Factory.hr – Medium
• https://medium.com/@milenko_52829/making-custom-uiswitch-part-1-cc3ab9c0b05b