13,8 тыс подписчиков

Анимируем скучные табличные представления в iOS-приложении

30 октября 202030 окт 2020

7 мин

Оглавление

Предусловия
Введение
Руководство

Почти в любом iOS-приложении присутствуют табличные представления. Их применяют для отображения одиночного столбца содержимого с вертикальной прокруткой, разделённого на строки.

Анимация — отличный способ привлечь внимание пользователя, а заодно сделать приложение визуально мягче. Анимировать ячейки табличного представления мы будем с помощью метода UIView.animate класса UIView. Вот как описывается этот метод:

Анимация изменяется в одном или нескольких представлениях с заданной длительностью. Во время анимации взаимодействие анимируемых представлений с пользователем прекращается.

Я долго сопротивлялся, прежде чем начать работать с UIView-анимацией: оправдывался тем, что это чересчур сложно, в этом нет необходимости, а на изучение уйдет много времени. Позже я прочитал несколько блестящих блогов и книги по UX/UI и осознал, насколько могущественным инструментом может быть анимация. После всего этого несложно было убедить себя и приступить к её освоению.

Что же, добавим анимации четырех типов. Вот так будут выглядеть с ними ячейки табличного представления:

Предусловия

От вас потребуются некоторое представление об iOS-разработке, но даже если её понятия не вполне вам знакомы, не стесняйтесь читать до конца — я объясняю всё простым языком. Всё, что вам нужно, — это Macbook, Xcode, а также немного знаний об Auto Layouts, методе UIView.animate и перечислениях (enum).

Введение

Ознакомимся с представлением, созданию которого посвящено это руководство. Наше представление будет состоять из TableView и горизонтального StackView с четырьмя кнопками на равном расстоянии друг от друга. Этими кнопками мы будем изменять TableViewHeader и анимацию ячеек в табличном представлении.

Руководство

Для начала создадим одностраничное приложение в Xcode и выберем в качестве шаблона пользовательского интерфейса Storyboards.

Создание UI

Откройте Main.storyboard и настройте представление, как показано на картинке:

Добавьте компоненты в сцену ViewController в Main.Storyboard

Вот, что мы добавили:

TableView — ограничения top, leading и trailing установлены в 0, а пропорциональная высота на 77% от всего представления;
горизонтальный StackView — ограничения top, leading и trailing установлены на 24;
кнопки — ограничение по высоте 42, все четыре кнопки размещены внутри stackView.

У каждой кнопки должен быть ассоциированный с ней тэг. Добавьте его через инспектор атрибутов:

Button1 — тэг 1;
Button2 — тэг 2;
Button3 — тэг 3;
Button4 — тэг 4.

Далее создадим пользовательский класс TableViewClassс пользовательским XIB. Для этого:

Создайте новый класс Cocoa Touch Class, в качестве субкласса задайте UITableViewCell и отметьте галочкой пункт о создании файла XIB.
Откройте XIB-файл, относящийся к UITableViewCell.

Для этой ячейки мы добавили одиночный containerView внутри представления содержимого. Верхние и нижние ограничения (top и bottom) здесь установлены на 5, а ведущие и конечные ограничения (leading и trailing) — на 12.

Пишем код

Сначала добавим код в класс UITableViewCell.

Класс UITableViewCell устроен очень просто.

Мы добавляем точку выхода для containerView и задаём две переменные:

TableViewHeight — высота ячейки при доступе из viewController;
Color — цвет ячейки.

Также мы добавили код, который задает в качестве стиля none и закругляет края ячейки.

Далее создадим класс TableViewAnimator и добавим его в ранее созданный класс, чтобы анимировать TableView.

Рекомендую всегда создавать отдельный класс для анимирования так, чтобы он был универсальным и его можно было применить к любым представлениям. В создании пользовательского класса есть и еще одно преимущество: он сохраняет богатые возможности настройки, так что в блоке инициализации можно предоставлять желаемые эффект и продолжительность анимации.

Далее создадим перечисление TableAnimationFactory и добавим четыре метода анимации:

Мы добавили перечисление, содержащее в себе четыре типа анимации. Это перечисление служит фабрикой, которая предоставляет анимацию классу-аниматору. Вот список добавленных анимаций:

Анимация постепенного появления (Fade-In). Анимирует ячейки TableView на основе альфы ячейки.
Анимация движения вверх (Move-Up). Анимирует ячейки TableView на основе их положения.
Анимация движения вверх с постепенным появлением (Move-Up-Fade). Анимирует ячейки TableView на основе альфы ячейки и ее положения одновременно.
Анимация движения вверх с подпрыгиванием (Move-Up-Bounce). Анимирует ячейки TableView на основе положения ячейки с помощью анимации подпрыгивания.

Далее, чтобы не загромождать ViewController, создадим с помощью ещё одного перечисления поставщик данных, который обеспечивает получение анимаций из фабрики анимации. Также добавим каждому варианту в перечислении функцию получения заголовка tableView.

Перечисления отлично подходят для того, чтобы сопоставить функцию каждому варианту из списка: это предохраняет код от появления ошибок. Чтобы обеспечить поступление данных в ViewController, создадим файл Tables.swift и перечисление TableAnimation:

Мы определили перечисление TableAnimation, где содержатся четыре варианта, по числу анимаций, вместе с соответствующими значениями, предоставляющими методы фабрики анимации.

Перечисление, кроме того, содержит две функции:

GetAnimationвозвращает анимацию из animationFactory в зависимости от варианта в перечислении и связанных с ним значений.
GetTitleвозвращает название анимации в зависимости от варианта в перечислении.

Теперь напишем код для ViewController. Начнем с того, что подключим во ViewController точки выхода для представления (также нам понадобятся функции точек выхода для кнопок, но их мы определим чуть позже).

Добавим к ViewController переменные:

Краткое описание переменных:

Colors — цвета в TableView.
TableViewHeaderText — заголовок TableView.
CurrentTableAnimation — значение типа в определённой ранее модели перечисления; устанавливает переменную TableViewHeaderText при изменении самого перечисления.
AnimationDuration — длительность анимации ячейки.
Delay — задержка между анимацией каждой ячейки.
FontSize — размер символов на кнопках.

Далее зарегистрируем TableView и напишем метод жизненного цикла ViewController.

Мы зарегистрировали пользовательский класс UITableViewCell с нашим TableView, задали для viewController делегат и источник данных и установили, что кнопка button1 будет выглядеть выбранной. Кроме того, мы асинхронно перезагружаем данные, чтобы воспроизвести анимацию. Далее определим методы делегата и источника данных для TableView в viewController.

Мы добавили стандартные методы для инициализации TableView. Вкратце пробежимся по ним:

numberOfRowsInSection определяет, сколько ячеек будет отображаться в TableView.
heightForRowAt определяет высоту ячеек TableView.
cellForRowAt инициализирует ячейку для indexPath, назначает ей цвет и возвращает в TableView.
viewForHeaderInSection определяет представление для TableHeader. Мы настроили его так, чтобы он показывал метку со значением, полученным из перечисления.
heightForHeaderInSection — высота TableHeader.
willDisplay — самый важный метод в этом руководстве. С его помощью мы извлекаем анимацию из перечисления currentAnimation, инициализируем с этой анимацией класс TableViewAnimator, далее анимируем ячейку, вызывая анимирующий метод.

И, наконец, добавим код для взаимодействия кнопок. Каждая кнопка должна перезагружать таблицу со значением, полученным из перечисления Table.

Важно! Все четыре кнопки должны быть назначены на одну точку выхода. Для этого руководства я выбрал функцию animationButtonPressed.

Поскольку нам хочется, чтобы в качестве выбранной отображалась только одна кнопка за раз, мы по умолчанию назначаем всем кнопкам символ незакрашенного кружка, снимая закрашивание с ранее выбранной кнопки.

Теперь переключение помогает “закрасить” символ кнопки, основываясь на тэге, назначенном этой кнопке. Соответственно этому выбору также устанавливается значение переменной currentTableAnimation.

Button1 применяет к TableViewCells анимацию Fade-In.
Button2 применяет к TableViewCells анимацию Move-Up.
Button3 применяет к TableViewCells анимацию Move-Up-Fade.
Button4 применяет к TableViewCells анимацию Move-Up-Bounce.

Вот и всё! Теперь при запуске приложения вы увидите на TableView очаровательную анимацию, которая изменяется по нажатию на разные кнопки. И вот он, конечный результат. Нажимаем на кнопки — и табличное представление анимируется.

Ресурсы

Заключение

Чему мы научились?

Мы начали с того, что добавили в файлMain.storyboard необходимые для анимации TableView компоненты.
Затем мы создали пользовательский UITableViewClass и добавили компоненты в его XIB-файл.
Создали класс TableViewAnimator, который анимирует TableView (помните об отдельном классе для каждого анимирования). Мы также создали перечисление TableAnimationFactory, внутри которого определили четыре анимации.
Мы создали новое перечисление TableAnimation, чтобы путем создания функций соединить названия и анимации, образовав варианты.
В конечном счете, мы написали код для ViewController, настроили TableView, добавили функцию точек выхода для кнопок и назначили анимации для TableView. Спасибо, что прочитали и до скорых встреч!