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

(UI)Switch は つくれる

39d636034f806b2bb51165a93774ab79?s=47 gaussbeam
February 14, 2018

(UI)Switch は つくれる

2018.02.14 iOS UI実装勉強会 #2 @ Sansan

39d636034f806b2bb51165a93774ab79?s=128

gaussbeam

February 14, 2018
Tweet

Transcript

  1. (UI)Switch͸ͭ͘ΕΔ IBOZV!4BOTBO *OD 2018.02.14 | #iOS_UI࣮૷ษڧձWPM

  2. Who? • HANYU, Koji • Sansan, Inc. iOS Developer

  3. None
  4. 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͔͠ΧελϚΠζͰ͖ͳ͍
  5. 6* 4XJUDIͷ࠷খݶͷཁ݅ w 0O0⒎ͷঢ়ଶ͕Θ͔Δ w ϓϩύςΟͱͯ͠ w ࢹ֮తʹ w λοϓͰঢ়ଶ੾Γସ͑

    εςʔτ؅ཧ ඳը λοϓΠϕϯτ ˠ
  6. 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 } ɾ ɾ ɾ
  7. func animate() { self.isAnimating = true UIView.animate( … completion: {

    self.sendActions(for: .valueChanged) self.isAnimating = false } }
  8. https://github.com/gaussbeam/CustomSwitch

  9. ·ͱΊ w ཁ݅Λ͏·͘ߜΕ͹ɼίϯϙʔωϯτͮ͘Γ͸݁ߏ؆୯ w ओཁͳը໘ɼଥڠͰ͖ͳ͍ՕॴͳΒݕ౼͢ΔՁ஋ΞϦ w ̍࣌ؒ΄ͲͰ࣮૷Մೳ 6*ௐ੔ؚΊ  w

    ඳըΞχϝʔγϣϯΛ௥ٻͰ͖Δ w ࢥ͍௨Γʹ࢓্͕Δͱָ͍͠
  10. ࢀߟ • Making custom UISwitch (Part 1) – Factory.hr –

    Medium • https://medium.com/@milenko_52829/making-custom-uiswitch-part-1-cc3ab9c0b05b