Доклад о том, как создавать кастомные кнопки: какие у них существуют состояния, как бороться с layout и зачем создавать такие компоненты.

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()
}
}

37. ~ 100 строк
37
Результат
😱😱😱

38. Результат

39. Репозиторий
39
https://github.com/Kirillzzy/CustomButton
😱😱😱

40. Спасибо
за внимание😉
@kirillzzy - everywhere
kirillaveryanov.me
Кирилл Аверьянов