Вступление
Sympli — это сервис, который упрощает преобразование профессионально разработанного пользовательского интерфейса в формат, совместимый с приложениями (например, раскадровка для iOS или XML для Android). Он работает от передачи дизайна в Sketch и Photoshop до реализации на Android, iOS или в Интернете. Если вы еще не работали с Sympli и хотите узнать больше о том, как он облегчает передачу дизайна разработчикам, прочитайте нашу статью здесь по Envato Tuts +, которая знакомит с Sympli с точки зрения дизайнера . В ближайшее время у нас будет еще одна статья о Sympli, которая будет охватывать более широкие аспекты того, как разработчики могут использовать Sympli для более быстрой реализации в Android Studio и Xcode.
-
Разработка приложенийКак передать дизайн Photoshop и эскизов с помощью Sympli
В этой статье я покажу вам, как разработчик, чтобы взять дизайн интерфейса, созданный с помощью Sympli, и легко импортировать их в Xcode для ваших приложений iOS.
1. Настройка проекта и дизайна
При бесплатном использовании Sympli у вас может быть один проект, который может содержать множество проектов. Если вы хотите следовать, есть PSD (документ Photoshop), включенный в файлы завершенного проекта на GitHub для этого урока, который мы будем использовать в качестве нашего дизайна. В противном случае, если у вас нет Photoshop и вы работаете с дизайнером, попросите их импортировать дизайн PSD или Sketch в проект Sympli iOS, чтобы поделиться им с вами и присоединиться к части учебника по Xcode.
Чтобы создать проект, перейдите на веб- сайт Sympli и выполните вход (или зарегистрируйтесь и подтвердите новую учетную запись, если у вас ее еще нет). После того, как вы вошли в систему, вы должны перейти на экран « Проекты» со следующим сообщением в середине:
Нажмите « Создать новый проект» и установите следующие сведения о новом проекте:
Вы можете называть свой новый проект как хотите, но из-за наличия PSD вы должны убедиться, что вы установили Платформу на iOS и Разрешение на @ 2x .
Во-первых, чтобы добавить PSD в проект Sympli, загрузите плагин Sympli Photoshop и установите его. После установки плагина откройте загруженный PSD-файл и нажмите кнопку Sympli на правой панели инструментов Photoshop:
Если вы не можете найти эту кнопку, то плагин также можно открыть, перейдя в Window> Extensions> Sympli в строке меню. Сначала вам нужно будет войти в Sympli, и после этого должен появиться следующий экран:
Открыв файл Interface.psd (как показано в верхней части окна плагина Sympli), все, что вам нужно сделать, — это нажать кнопку Sync , чтобы загрузить свой интерфейс в ваш проект.
Теперь, когда наш проект и дизайн полностью готовы, мы готовы начать работу в Xcode.
2. Настройка Sympli с Xcode
Во-первых, вам нужно будет скачать плагин Sympli для Xcode . После загрузки откройте файл .dmg и запустите программу установки.
Теперь вы можете запустить Xcode как обычно. Когда вы впервые откроете Xcode после установки Sympli, вы увидите следующее предупреждение:
Убедитесь, что вы нажимаете Load Bundle, чтобы включить функции Sympli в XCode.
После этой очень простой настройки вы готовы начать использовать Sympli!
3. Использование Sympli в раскадровках
Sympli можно использовать сразу с любым существующим проектом, но для этого урока я собираюсь начать с шаблона iOS> Приложение> Single View Application . Если вы подписаны, то вы можете создать свой собственный проект из этого шаблона.
Сначала вы увидите, что в правом верхнем углу окна Xcode есть новая кнопка:
Нажмите на эту кнопку, и появится следующее приглашение, позволяющее войти в свою учетную запись Sympli:
После успешного входа в систему вы должны увидеть все свои проекты, перечисленные в панели Sympli вашего окна Xcode:
Нажмите на любой проект, из которого вы хотите загрузить интерфейс, а затем снова нажмите на дизайн, который вы хотите использовать, на следующем экране:
Прежде чем мы начнем создавать наш интерфейс с помощью Sympli, откройте файл Main.storyboard вашего проекта, удалите существующий контроллер представления и перетащите контроллер навигации из библиотеки объектов . Чтобы облегчить работу с интерфейсом, также измените класс размера на Компактная ширина и Обычная высота . Теперь ваша раскадровка должна выглядеть следующим образом:
Прежде чем мы начнем перетаскивать элементы интерфейса, нажмите кнопку в правом верхнем углу панели Sympli и выберите параметр « Импорт активов» :
Затем вам будет показано следующее приглашение:
Это приглашение позволяет вам выбрать, какие активы вы хотите импортировать в ваш проект. По умолчанию Sympli импортирует все ваши активы всех необходимых размеров в основной каталог вашего проекта Assets.xcassests .
Теперь нам пора начать создавать наш интерфейс! Важно отметить, что хотя ваши PSD могут выглядеть идентично интерфейсу iOS, Sympli может создавать только базовые элементы интерфейса, такие как UIView , UIImageView и UIButton . Для специфичных для платформы и сгенерированных системой представлений, таких как UINavigationBar и UITableView , вам все равно придется вручную создавать и настраивать их в раскадровке.
Во-первых, мы собираемся настроить наше табличное представление. Нажмите на табличное представление в раскадровке и в инспекторе размера установите для высоты строки значение 90 :
Вы можете увидеть размеры, указанные в дизайне, нажав на любой из ваших элементов интерфейса на панели Sympli. В этом случае, если вы щелкнете по любому из элементов табличного представления, вы увидите высоту строки 90 пунктов:
Поскольку мы просто собираемся создать одну ячейку и затем использовать ее повторно, нам нужно создать начальную ячейку со всеми необходимыми элементами интерфейса. Для этого мы скопируем элементы интерфейса из последнего элемента представления таблицы Screenshots .
Представления из дизайна Sympli можно просто перетащить прямо в вашу раскадровку. По умолчанию, когда он помещается в раскадровку, Sympli позиционирует ваш элемент так, чтобы он занимал ту же позицию, что и в исходном PSD. Для большинства интерфейсов это работает нормально, но для ячеек табличного представления это может быть проблематично, поскольку они чаще всего размещаются за пределами редактируемой ячейки.
Из-за этого может быть проще использовать интерфейс Sympli для применения определенных частей вашего дизайна к представлению. Это можно сделать, выбрав элемент на панели Sympli и нажав кнопку « Применить» на многих атрибутах представления, таких как цвет фона, размер и границы. Когда вы нажимаете кнопку « Применить» , атрибуты немедленно назначаются выбранному вами представлению. Попробуйте это, перетащив представление в ячейку табличного представления, выбрав красный квадрат предварительного просмотра в Sympli, а затем применив атрибуты размера, цвета фона и макета:
Обратите внимание, что когда вы применяете цвет заливки, вы можете выбрать между текстом или фоном . Выберите « Текст» при использовании метки, текстового представления или чего-либо подобного.
Аналогично для меток, Sympli извлекает текст и информацию о шрифтах из Photoshop или Sketch, чтобы вы могли легко перетаскивать их или применять к другим меткам в вашем интерфейсе:
Используя интуитивно понятный интерфейс Sympli, на самом деле так просто создать интерфейс приложения в раскадровке из файла Sketch или PSD. Однако после того, как вы добавили все свои элементы интерфейса, вам по-прежнему необходимо реализовать автоматическую компоновку и создать ограничения для всех ваших представлений. Sympli просто упрощает процесс перехода от стадии проектирования к стадии полной разработки.
4. Использование Sympli в коде
Хотя Sympli в первую очередь предназначен для использования в Xcode с файлами раскадровки, он также предлагает очень маленькую, но очень полезную функцию, связанную с программированием.
Если вы редактируете файл кода с открытым Sympli, когда вы наводите указатель мыши на атрибут цвета, появляется маленькая кнопка копирования. Когда вы нажимаете эту кнопку, Sympli скопирует код, необходимый для создания объекта UIColor представляющего этот цвет, в буфер обмена. Затем вы можете вставить это прямо в код, что намного быстрее, чем искать значения RGB для цвета и затем вводить их вручную.
Также важно отметить, что в верхней части боковой панели Sympli вы можете выбрать используемый язык программирования, чтобы можно было создать правильный код:
Вывод
В целом, Sympli значительно упрощает копирование и реализацию пользовательского интерфейса дизайнера как разработчика. Хотя некоторая ручная, специфичная для платформы работа все еще должна быть сделана с точки зрения автоматической разметки и специализированных элементов интерфейса, Sympli устраняет множество утомительных ручных процессов, таких как точное соответствие цветов и размеров.
Как всегда, пожалуйста, оставляйте свои комментарии и отзывы в комментариях ниже. Не забудьте проверить наш другой учебник по Sympli и следите за обновлениями!
-
Разработка приложенийКак передать дизайн Photoshop и эскизов с помощью Sympli