Кастомная кнопка: взгляд изнутри
•
0 likes•315 views
Доклад о том, как создавать кастомные кнопки: какие у них существуют состояния, как бороться с layout и зачем создавать такие компоненты.
![30
Загрузка
class func viewFromNib(withOwner owner: Any? = nil) -> Self {
let name = String(describing: type(of
self)).components(separatedBy: ".")[0]
let view = UINib(nibName: name, bundle:
nil).instantiate(withOwner: owner, options: nil)[0]
return cast(view)!
}
private func cast<T, U>(_ value: T) -> U? {
return value as? U
}](https://image.slidesharecdn.com/cutsombuttonspeechcopy-170512222338/85/-30-320.jpg)
Кастомная кнопка: взгляд изнутри
- 1. Кастомная кнопка: взгляд изнутри Кирилл Аверьянов iOS Developer
- 2. • Идея и предназначение💡 • Пример👌 • Компоненты 🔑 • Демо 🖥 2 Коротко
- 3. Идея
- 4. -William Edmund Hick “The time it takes to make a decision increases as the number of alternatives increases.” 4
- 5. Зачем? • Требования дизайна • Изменение layout • Неоднозначное поведение 5
- 6. Пример
- 7. 7
- 8. Компоненты
- 9. Компоненты для реализации • Состояния • Отслеживание их • Изменение цвета 🖍 • Layout 9
- 10. Состояния
- 11. Состояния (UIControl) • var isEnabled: Bool { get set } • var isSelected: Bool { get set } • var isHighlighted: Bool { get set } 11
- 12. isFocused { get } (UIView) 12 iOS 9+
- 13. isFocused { get } (UIView) iOS 9+ TF?!
- 14. 14
- 15. Состояния (UIControl) • func beginTracking(UITouch, with: UIEvent?) -> Bool • func continueTracking(UITouch, with: UIEvent?) -> Bool • func endTracking(UITouch?, with: UIEvent?) • func cancelTracking(with: UIEvent?) • var isTracking: Bool { get } 15
- 16. State (UIControlState) • var state: UIControlState { get } • Состояния: • normal • highlighted, disabled, selected • focused, application, reserved 16 iOS 9+
- 17. Немного про биты 😳 • Конъюнкция( & ) - есть ноль, то ноль • Дизъюнкция( | ) - есть единица, то единица A B A & B A | B 0 0 0 0 0 1 0 1 1 0 0 1 1 1 1 1
- 18. Немного про биты 😳 • a = 1 ( 0001 ) • b = 2 ( 0010 ) • c = 4 ( 0100 ) • d = 8 ( 1000 ) 18 • a | d = 9 ( 1001 ) = X • X & d = d ( 1000 ) • X & b = 0 ( 0000 )
- 19. 19 • state = a | b | c • Состояния: • normal = 0 • highlighted = 1, disabled = 2, selected = 4 • print(state & a > 0) // 0 или 1, другого не дано • print(state.rawValue & UIControlState.disabled.rawValue > 0) State (UIControlState)
- 20. Изменение цвета
- 21. Изменение цвета 21 • Определение яркости🎨 • Сдвиг цветов🏃
- 22. Определение яркости 22 ((red * 299) + (green * 587) + (blue * 114)) / 1000 W3C Algorithm W3C = World Wide Web Consortium
- 23. Определение яркости 23 http://www.nbdtech.com/Blog/archive/2008/04/27/ Calculating-the-Perceived-Brightness-of-a-Color.aspx sqrt(.241 * red² + .691 * green² + .068 * blue²) X ∈ 0 … 255
- 24. 24 .net 3.0
- 25. Сдвиг цветов 25 X < 130 ? Brighter : Darker X
- 26. Демо
- 27. Начало 1. Создаем xib class MyButton: UIButton { @IBOutlet var label: UILabel! @IBOutlet var viewHeight: NSLayoutConstraint! } 2. Создаем класс 3. Конектим
- 28. Загрузка 28 override func awakeAfter(using aDecoder: NSCoder) -> Any? { return loadFromNibIfEmbeddedInDifferentNib() }
- 29. 29 func loadFromNibIfEmbeddedInDifferentNib() -> Self { let isJustAPlaceholder = subviews.count == 0 if isJustAPlaceholder { let theRealThing = type(of: self).viewFromNib() theRealThing.frame = frame translatesAutoresizingMaskIntoConstraints = false theRealThing.translatesAutoresizingMaskIntoConstraints = false return theRealThing } return self } Загрузка
- 30. 30 Загрузка class func viewFromNib(withOwner owner: Any? = nil) -> Self { let name = String(describing: type(of self)).components(separatedBy: ".")[0] let view = UINib(nibName: name, bundle: nil).instantiate(withOwner: owner, options: nil)[0] return cast(view)! } private func cast<T, U>(_ value: T) -> U? { return value as? U }
- 31. Результат 31
- 32. override var isHighlighted: Bool { didSet { if oldValue != isHighlighted { notChange = true updateAppearance() } } } override var isSelected: Bool { didSet { if oldValue != isSelected { notChange = true updateAppearance() } } } override var isEnabled: Bool { didSet { if oldValue != isEnabled { notChange = true updateAppearance() } } }
- 33. 33 Демо DIY private func updateAppearance() { isSetup = true if (isSelected || isHighlighted) && isEnabled { buttonTouchedIn() } else { buttonTouchedOut() } alpha = isEnabled ? 1 : 0.8 isSetup = false }
- 34. 34 Демо DIY private func buttonTouchedIn() { delegate?.buttonIn() backgroundColor = nessesaryBackgroundColor?.tapButtonChangeColor textForLabel = ".." startTimer() UIView.animate(withDuration: 0.3, animations: { self.viewHeightConstraint.constant += 40.0 self.layoutIfNeeded() }) animateClouds() }
- 35. 35 Демо DIY private func buttonTouchedOut() { delegate?.buttonOut() backgroundColor = nessesaryBackgroundColor invalidateTimer() label.text = text UIView.commitAnimations() UIView.animate(withDuration: 0.3, animations: { self.viewHeightConstraint.constant -= 40.0 self.layoutIfNeeded() }) }
- 36. 36 Демо DIY override var backgroundColor: UIColor? { didSet { if oldValue == backgroundColor || notChange { notChange = false return } if !isSetup { nessesaryBackgroundColor = backgroundColor notChange = true backgroundColor = oldValue } updateAppearance() } }
- 38. Результат
- 40. Спасибо за внимание😉 @kirillzzy - everywhere kirillaveryanov.me Кирилл Аверьянов