Узнайте, как анимировать кнопки, метки и imageView, не создавая кучу классов.
Последнее обновление 15 мая 2017 г. | Swift 3.1
Вы слышали, что знание без казни - это все равно что иметь зубы, но пить только молоко. Вы спрашиваете: «Ладно, хватит теорий. Как я могу начать использовать POP в своем приложении? » 🤔
Я ожидаю, что мои читатели поймут Completion Handlers и создадут базовую реализацию с использованием протокола, чтобы максимально выпить время, проведенное со мной. Если вам они не нравятся, я прошу вас уйти, а затем посмотреть некоторые из моих статей и видео ниже и вернуться после.
Предпосылка:
Закрытия без страха, часть 2: обработчики завершения (Средний)
Введение в программирование, ориентированное на протокол (Средний)
Серия протокольно-ориентированного программирования (YouTube)
Что я думаю ты узнаешь
Вы узнаете, как использовать протокол для анимации таких компонентов пользовательского интерфейса, как UIButton, UILabel и UIImageView. Я также покажу вам разницу между традиционными методами и методом POP. 😎
UI
Демонстрационное приложение называлось «Добро пожаловать на вечеринку в моем доме». Я создал это приложение, чтобы проверить, приглашал ли я вас на вечеринку. Вы должны ввести свой пригласительный код. В этом приложении нет никакой логики. Если вы нажмете кнопку, объекты будут анимированы независимо. Есть четыре компонента, которые оживляют: passcodeTextField, loginButton, errorMessageLabel и profileImageView.
Есть две анимации: 1. Жужжание 2. Выскакивание (вспышка).
Не беспокойтесь об этом. Просто плыви со мной, как вода. Если вы нетерпеливы, просто прокрутите, загрузите исходный код и можете уволить.
Вещи тогда
Чтобы в полной мере оценить возможности протокола POP в реальных приложениях, давайте сравним его с традиционным. Допустим, вы хотите анимировать UIButton и UILabel. Вы можете создать подкласс обоих, а затем добавить к нему метод.
class BuzzableButton: UIButton {
func buzz() { // Animation Logic }
}
class BuzzableLabel: UIButton {
func buzz() { // Animation Logic }
}
Итак, пусть он «гудит», когда вы нажимаете кнопку входа в систему.
@IBOutlet wear var errorMessageLabel: BuzzableButton!
@IBOutlet wear var loginButton: BuzzableLabel!
@IBAction func didTapLoginButton(_ sender: UIButton) {
errorMessageLabel.buzz()
loginButton.buzz()
}
Вы видите, как мы повторяемся? Логика анимации состоит как минимум из 5 строк, и есть «лучший» способ использовать extension. Поскольку UILabel и UIButton принадлежат UIView, мы можем добавить
extension UIView {
func buzz() { // Animation Logic }
}
Итак, BuzzableButton и BuzzableLabel содержат этот buzz метод. Теперь мы больше не повторяемся.
class BuzzableButton: UIButton {}
class BuzzableLabel: UIButton {}
@IBOutlet wear var errorMessageLabel: BuzzableButton!
@IBOutlet wear var loginButton: BuzzableLabel!
@IBAction func didTapLoginButton(_ sender: UIButton) {
errorMessageLabel.buzz()
loginButton.buzz()
}
Хорошо, тогда почему POP? 🤔
Как вы видели, errorMessageLabel, в котором говорится: «Пожалуйста, введите действительный код 😂», также имеет еще одну анимацию. Он появляется и исчезает. Итак, как же нам использовать традиционный метод?
Есть два способа сделать это. Во-первых, вы можете снова добавить еще один метод в UIView
// Extend UIView
extension UIView {
func buzz() { // Animation Logic }
func pop() { // UILabel Animation Logic }
}
Однако, если мы добавим методы в UIView, метод pop будет доступен другим компонентам UIC, кроме UILabel. Мы наследуем ненужные функции, и эти UIComponents становятся раздутыми по умолчанию или, чтобы подчеркнуть, как f.
Второй способ - создать подкласс UILabel,
// Subclass UILabel
class BuzzableLabel: UILabel {
func pop() { // UILabel Animation Logic }
}
Это работает нормально. Однако мы можем захотеть изменить имя класса на BuzzablePoppableLabel, чтобы четко обозначить его, просто взглянув на имя.
Теперь, что, если вы хотите добавить еще один метод к UILabel, чтобы четко указать, что делает метка, вам, возможно, придется изменить имя класса на, например, BuzzablePoppableFlashableDopeFancyLovelyLabel. Это неустойчиво. Конечно, я захожу довольно далеко.
Протоколно-ориентированное программирование
Хорошо, вы зашли так далеко и еще не рекомендовали эту статью, осторожно нажмите на нее и продолжайте.
Ладно, хватит подклассов. Давайте сначала создадим протокол. Сначала жужжит.
Я не вставлял код для анимации, поскольку они довольно длинные, а их содержание изначально не поддерживается мобильными приложениями.
protocol Buzzable {}
extension Buzzable where Self: UIView {
func buzz() { // Animation Logic}
}
