Reveal 3 – отладка интерфейса iOS-приложения в реальном времени

Опубликовано

Любой разработчик скажет вам, что отладка пользовательских интерфейсов в iOS-приложения — та ещё головная боль. Когда требуется выполнить дебаггинг программного кода, без проблем подключается LLDB, но по части выстраивания визуальной иерархии приложения он бессилен. Поэтому на данном этапе будет включаться Reveal, который делает фактически то же самое, что веб-инспектор Safari, позволяющий изучить и разобрать DOM веб-страницы вдоль и поперёк, но с тем отличием, что отладка сопровождается красивыми 2D/3D-анимациями. Сейчас мы рассмотрим Reveal на примере проекта Artsy.

Подготовка

Сперва необходимо загрузить и скомпилировать проект Artsy с Github. Чтобы это сделать, вставьте в терминал следующие строки и нажмите Enter:

git clone https://github.com/artsy/eigen.git

cd eigen

git checkout 0590e315e3246b88209003885f8466af30c6dc0b bundle install make oss

bundle exec pod install

open Artsy.xcworkspace

Команда clone продублирует репозиторий Arsy, а checkout запустит 0590e315e3246b88209003885f8466af30c6dc0b.

Когда Artsy откроется в Xcode, выберите симулятор iPhone 6 Plus (или любую модель с экраном 5,5″), создайте билд и запустите его, чтобы убедиться в работоспособности. Далее мы состыкуем Artsy и Reveal, чтобы посмотреть на отладку.

Интеграция с Reveal

Загрузите пробную версию Reveal на 14 дней, либо приобретите программу за $60, если уже наслышаны и наш обзор стал финальным аргументом. Хоть первоначальное знакомство способно отпугнуть новичка дебаггинга, поскольку на экране не наблюдается ровным счётом ничего, не переживайте – это легко поправить за счёт интеграции с образцовым проектом Artsy. Обозреваемой программе потребуется запустить определённый код в вашем приложении, чтобы установить связь посредством Bonjour. Есть два способа:

  1. Статичная привязка фреймворка, используя Reveal.framework — самый простой и народный вариант;
  2. Динамическая привязка фрейморвка внутри приложения при запуске, используя libReveal.dylib — позволяет подробнее отслеживать загрузку библиотек в приложение.

Чтобы не перегружать читателей и без того замороченным обзором/уроком, выберем первый способ — статическую привязку:

  1. Убедитесь, что окно Reveal активно и перейдите в: Help -> Show Reveal Library in Finder. Там как раз спрятались статические и динамические библиотеки Reveal.framework и libReveal.dylib соответственно.
  2. Перетяните Reveal.framework в Project Navigator в Xcode, в группу Frameworks. Поставьте галочку на Copy items if needed и отметьте Artsy. Затем Finish.
  3. Выберите проект Artsy в Project Navigator, затем перейдите: Build Phases -> Link Binary with Libraries и добавьте libz.dylib, нажав на значок «+» в левом нижнем углу. Пропишите libz в поле поиска, потом выберите libz.dylib и кликните Add.
  4. Удалите приложение из симулятора, а потом создайте билд и запустите. Во время запуска, в выпадающем меню, у вас должно отобразиться Artsy (iPhone Simulator). Выберите его и произойдёт чудо! :)

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

 Введение в Reveal

Функция Refresh (Обновить)

Перед глазами раскрывается слоёная развёртка проекта Artsy, которая может измениться в мгновение ока, если пользователь Reveal внесёт какие-либо изменения. Однако, ничего не произойдёт, пока вы не нажмёте кнопочку Refresh, чтобы обновить проект. В качестве примера нажмите на SIGN UP в обозреваемом макете: приложение перейдёт в раздел Sign Up, но Reveal будет по-прежнему показывать оригинальный экран. Исправляется недоразумение кнопкой Refresh в правом верхнем углу.

Хотите вернуть всё назад? Жмите стрелочку назад и снова Refrech. Не понравилось? Вносите корректировки и — Refresh. Только так изменения вступят в силу.

Интерфейс

Reveal придерживается классического трёхпанельного интерфейса. Центральная панель является самой интересной для тех, кто любит книжки с картинками — здесь отображается «слоёный пирог» вашего проекта, вся иерархия приложения (в нашем случае — Artsy), которая любезно разворачивается в 3D-виде, позволяя обнаружить любые тонкости дизайна. Чтобы прокрутить своё творение, просто щёлкайте левой кнопкой мыши и двигайте конструкцию. Также Reveal добавляет немного свободного пространства между слоями, дабы вы могли оценить, как они гармонируют друг с другом.

На самом верху центральной панели находятся 3 регулировки:

  • Три иконки, отвечающие за отображение сегментов: View Wireframes (тонкая граница, каркас), View Contents (содержимое) и View Both (каркас вместе с содержимым).
  • Выпадающее меню с масштабированием, которое — обратите внимание — соотносится с естественным размером элементов приложения.
  • Оставшаяся опция переключает 2D и 3D перспективы. Трёхмерный вид активирован по умолчанию.

Левая панель — это дерево, содержащее в себе весь контент проекта, который перестраивается, опираясь на действия пользователя. Например, нажмите на кнопку SIGN UP на центральной панели, а затем посмотрите на левую, где подсветится ARWhiteFlatButton. Теперь вы знаете, что отвечает за описанную кнопку.

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

Правая панель специализируется на редактировании — она содержит множество различных «инспекторов»:

  • Application Inspector: предоставляет исчерпывающую информацию о подключённых девайсах, версии ОС, текущей ориентации и другие параметры.
  • Identity Inspector: показывает выбранный объект или узел, такой как класс, занимаемую память и универсальный доступ.
  • Attributes Inspector: показывает общие свойства для каждого класса в иерархии подобно Builder. Например, верхняя секция под название UILaber будет обладать атрибутами вроде Text и Font.
  • Layout Inspector показывает рамки, связки, маски, автоматически меняющие размер, и характеристики Auto ILayout — по степени значимости контента и изменения его габаритов.
  • Layer Inspector: показывает границу слоя, радиус углов, не забывает подметить растровый контент и прочие параметры.

Ограничения по слоям

Снова нажимаем на SIGN UP, что на центральной панели. Далее разворачиваем узел ARWhiteFlatButton, чтобы посмотреть «детские» категории. Там вместе с кучей записей вы обнаружите узел под названием Constraints (ограничения). Данные ограничения прикручиваются к определённому виду. Расширив Constraints, вы увидите 2 правила крепления: 280 точек по ширине и 44 точки по высоте.

На правой панели откройте четвёртую вкладку Layout Inspector и пролистайте до секции Participating Constraints, содержит два ограничения для кнопки LOG IN, по примеру предыдущей обозначенные как UIButton. Также обратите внимание, что ограничения синего цвета генерируются автоматически, а фиолетовые отметки добавляются вручную разработчиком (ограничения напрямую зависят от контента). У кнопки SIGN UP в нашем примере используется синий цвет, потому система сама подобрала данные ограничения.

Основной рабочий экран

Вот мы и добрались до главного козыря Reveal. Он заключается в том, что приложение помогает разработчику осознать, из каких деталей конструируется его проект. Чтобы продемонстрировать это, нужно перейти на основной рабочий экран и выбрать опцию 3D в самом верху центральной панели, таким образом «запустив приложение на iPhone».

Активируйте Identity Inspector на второй вкладке правой панели и щёлкните по свободному месту рядом с вашим «слоёным пирогом» — волшебным образом включилась подсветка видов. Правая панель пополнилась различными деталями, из которых стоит выделить ARSignUpSplashTextViewController, куда перебрался View Controller.

Непосредственные виды переворачиваются на 45 градусов, если вы нажмёте и потяните влево на центральной панели.

Самые интересные плюшки скрываются под капотом основного рабочего экрана. Отображающаяся иерархия создаёт жуткий бардак, поэтому зачастую лучше спрессовать элементы приложения. Благо Reveal позволяет гибко настроить вывод информации.

Чтобы сделать определённые части вашего приложения более плоскими (слитыми), перейдите к ARSignUpSplashTextViewController в левой панели и сворачивайте раскрывающиеся слои до тех пор, пока результат не придётся по душе. К слову, аналогичным образом раскрываются папки в macOS (OS X). Самым последним узлом, которым управляются детали на экране, будет UTTransitionView.

Если выберете UILayoutContainerView и заглянете в Identity Inspector на правой панели, то контроллер AROnboardingViewController разграничит содержимое экрана и остатки интерфейса проекта, например, раздел авторизации, который был посещён ранее.

Отладка элементов интерфейса в реальном времени

Думаем, на данном этапе вы достаточно узнали о возможностях Reveal, поэтому пришла пора закрепить теорию. Работать будем всё с тем же шаблоном Astry.

Если вы хотите поменять визуальные стили, такие как текст и цвет заднего фона, всего лишь щёлкните на соответствующих элементах и откройте Attributes Inspector на правой панели. Долистайте то секции UIView, где находится группа Color. Для background мы выбрали Light Gray Color, и Reveal моментально внёс изменения.

Добавить рамок, дабы усилить контраст? Без проблем! Выбираем нужное изображение, в левой панели нажимаем на ARBrowseViewCell (подкласс UIImageView), а затем подкручиваем значение Border на правой панели по вкусу и определяемся с цветом.

Выберите надпись AUCTIONS — Attributes Inspector в это время подготовит поле text, куда можно вписывать всё, что душе угодно. Чтобы избежать сворачивания слов, рекомендуется выставить параметр lines на 0.

Заключение

Работать в Reveal не сложнее, чем в Microsoft Office или в iWork с его панелями-инспекторами. Пусть и на небольшом примере, но мы убедились, что отлаживать интерфейс на «слоёной» вращающейся 3D-модели приложения намного удобнее, чем вслепую, при этом разработчикам не надо обладать исключительными знаниями, ведь всё находится под рукой, на трёх панелях, переключение между которыми быстро войдёт в привычку.

Иными словами, если планируете создавать своё iOS-приложение, то для отладки интерфейса рекомендуем именно Reveal.

Reveal 310
из 10
  • Слоёная 3D-модель приложения
  • Отладка в реальном времени
  • Простое редактирование приложений
  • Не обнаружены
3
версия		 16,2
МБ		 macOS  10.11
или новее		 $59
Для перехода к скачиванию программы с официального сайта кликните по данной плашке