www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Координатор приложений для проектирования адаптивного пользовательского интерфейса

Дата публикации Oct 3, 2019

Введение

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

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

Каковы координаторы?

Координаторы - это объекты, отвечающие за реализацию управления потоком в приложении. Это может включать в себя такие задачи, как навигация, аутентификация, работа в сети и многое другое. В конкретном случае координаторы могут рассматриваться как объекты, которые «босс вокруг”Посмотреть контроллеры в приложении для iOS. Но общая концепция заключается в том, что они способствуют разделению между вашими представлениями и удерживают их в фокусе на конкретных задачах, а не навязчивых задач от реализации необходимого управления потоком в приложении.

Углубление работы с координаторами выходит за рамки этой статьи, но есть много полезных ресурсов, включаяВот,Вота такжеВот!

В URBN мы используем шаблон координаторов, используя их для управления контролем потока в наших приложениях. Координаторы, которые мы используем, принимают несколько форм, таких как управление контроллером представления, создание дочерних координаторов и выполнение одноразовых задач, часто в комбинации.

Задний план

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

Мы реализуем навигационную парадигму parent-child с интерфейсом в стиле гармошки, как показано ниже.

Аккордеонная навигация

В нашей кодовой базе эта парадигма представления реализована вCategoryNavigationViewControllerи сокращенное резюме следует:

Суть для CategoryNavigationViewController & Delegate

CategoryNavigationViewControllerотображает элементы навигации (содержащие категории продуктов и другие пункты назначения) вUITableViewэкземпляр и отвечает на ввод пользователя. Если выбранная ячейка соответствует категории продукта с дочерними элементами, она либо расширяет, либо сворачивает аккордеон связанных категорий, как показано выше.

Но что произойдет, если у выбранного элемента нет детей? Должен ли этот контроллер представления отображать контроллер представления плитки продукта, как в нашем примере выше? Если это так, должен ли он быть помещен в стек навигации или представлен модально? Возможно, пользователь должен быть перенаправлен в совершенно другую часть приложения? Очевидно, что управление всей этой бизнес-логикой выходит за рамки обязанностей контроллера представления.

Вместо того, чтобы сворачивать наш код представления со сложной бизнес-логикой, у нас есть контроллер представления, зависящий от абстракции, определеннойCategoryNavigationDelegateпротокол. Этот метод известен какинверсия зависимостии позволяет нам отделить представление от бизнес-логики в нашем приложении. Мы используем концепцию «Координатор приложения» и определяем объект «Координатор потока», который, в соответствии с нашим протоколом, реализует желаемое поведение при выборе элемента навигации.

Топология координатора для CategoryNavigationViewController

Ограничения текущего дизайна

Наша архитектура контроллера и координатора представления хорошо подходит для устройств iOS, когда горизонтальный класс размера представления является «компактным», как в случае устройств iPhone в портретном режиме. Тем не менее, дизайн плохо масштабируется, когда горизонтальный класс размера представления «обычный», который включает в себя множество устройств iPad. Рассмотрим следующий экран, где контроллер представления реализован на iPad.

Навигация в аккордеонном стиле на iPad

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

Развитие лучшего опыта

Чтобы улучшить наш опыт просмотра на iPad, наши команды разработчиков и разработчиков UX тесно сотрудничали, чтобы установить четкие цели для нашего нового дизайна:

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

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

Дизайн должен вносить минимальные изменения в существующий код.Мы хотим избежать появления новых ошибок и длительных регрессий QA.

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

CategoryBrowseViewController - гибридная навигация

Концепция дизайна сохраняет привычный дизайн аккордеона на левой панели, но вместо того, чтобы растягивать аккордеон по экрану для более крупных устройств, мы реализуемProductBrowseViewControllerна правой панели, чтобы отобразить прокручиваемый список плиток продукта. На небольших устройствах новый контроллер просмотра только отображаетCategoryNavigationViewControllerи поддерживает существующую функциональность. Таким образом, новый дизайн является адаптивным для устройства любого размера и использует существующие модули в нашем приложении.

Гибридная категория Просмотр опыта

Теперь наши пользователи iPad имеют опыт просмотра, который объединяет категории с соответствующими продуктами, не покидая область просмотра.

Построение интерфейса

На первый взгляд наш новый контроллер представления сильно напоминает UIKitUISplitViewController, Однако мы решили написать собственный контроллер представления контейнера по нескольким причинам:

  • Больше контроля над шириной основного и дополнительного контроллеров представления и возможность переопределять их коллекции признаков
  • Гибкость использования вида в любом месте стека навигации (Apple рекомендует использоватьUISplitViewControllerв качестве корневого контроллера)
Gist for CategoryBrowseViewController

CategoryBrowseViewControllerинициализируется двумя дочерними контроллерами представления:

  • CategoryNavigationViewController(основной) требуется
  • ProductBrowseViewController(вторичный) является необязательным, поскольку для данной категории могут не быть связанные продукты

isExpandedсвойство определяет макет дочернего контроллера представления и основывается на горизонтальном классе размеров контроллера представления, если он «компактный»,толькоосновной контроллер представления показан. Если это «регулярно»,и то и другоеосновной и дополнительный контроллеры представления показаны.

Если представление контроллера представления расширено, вторичным контроллером представления можно манипулировать, используяupdateBrowseViewController(_ :)функция, которая удаляет существующиеProductBrowseViewControllerэкземпляр и заменяет его. Это позволяет пользователю переключаться между категориями в одном представлении.

Больше функциональности, больше ответственности?

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

Опять же, мы сталкиваемся с вопросом о том, где должна жить эта бизнес-логика. Сначала мы могли бы попытатьсяCategoryBrowseViewControllerсоответствуют протоколам, которые абстрагируют функциональность обоих дочерних контроллеров представления. Эти протоколы ниже:

Навигация по категориям и протоколы просмотра продуктов

Но это проблематично по нескольким причинам:

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

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

Координация контроллеров представления

Чтобы реализовать новые функциональные возможности нашего проекта и поддерживать существующее поведение, мы реализуем новый модуль,CategoryBrowseCoordinatorв наше приложение. Его обязанности:

  • Поддерживать экземплярCategoryBrowseViewController
  • СоответствоватьCategoryNavigationDelegateпротокол
  • Поддерживать ссылку наforwardingDelegateобъект (подробнее об этом чуть-чуть)

Суть этого координатора ниже:

CatalogLandingCoordinator быстрый

В соответствии сCategoryNavigationDelegateэтот координатор функционирует как «прокси» между нашим контроллером представления и координатором потока нашего приложения, обрабатывая выбор элементов навигации следующим образом:

  • Если контроллер представления расширен, обновите вторичный дочерний контроллер представления новым экземпляромProductBrowseViewController
  • Если вид свернут, передайте выборforwardingDelegateтак что он может решить, как маршрутизировать элемент навигации

Так что именноforwardingDelegate? Это объект, который соответствует новому протоколу под названиемCategoryBrowseDelegate, который использует композицию протокола Swift для объединения интерфейсов, определенныхCategoryNavigationа такжеProductBrowseпротоколы:

Категория Просмотр Делегат Гист

Этот делегат является важным объектом для нашего координатора по нескольким причинам:

  • Это указывает насуществующийобъект, который может обрабатывать желаемое поведение при маршрутизации, когда интерфейс контроллера представления свернут
  • Он используется для инициализации новых экземпляровProductBrowseViewControllerкогда представление расширяется, так как делегат указывает насуществующийобъект, который реализует методы интерфейса этого представления контроллера.

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

Мы можем показать отношения между нашими модулями представления, интерфейсами и координаторами на диаграмме ниже:

Каталог Просмотр архитектуры для представлений и координаторов

Вывод

Мы показали, что шаблон проектирования App Coordinator является мощным инструментом для разработки новых пользовательских интерфейсов на основе существующих компонентов. Когда ориентированные на пользователя модули представления зависят от абстракций, координаторы могут реализовать бизнес-логику с учетом контекста без изменения существующего кода представления. Мы также показываем, что состав протокола может использоваться для перенаправления функциональности существующим модулям во избежание добавления избыточного кода. Помимо нашего опыта просмотра категорий, мы использовали этот подход для улучшения других функций в наших приложениях путем повторного использования существующего кода и конструкций UX из нашего опыта iPhone.

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map