Навчання Swift, Xcode Storyboard, Auto Layout і Designable Views
Чи необхідно навчання Swift і Xcode для дизайнера?
У минулому році я писав Главу 3 під Objective-C і Xcode 5. З тих пір багато чого кардинально змінилося. Код Swift істотно спростився, через що він став одним з найпопулярніших мов для розробки додатків. Xcode 6 представив ряд нових інструментів, включаючи Playground. Vector Assets і Designable Views. Крім того, Адаптивні макети стали неймовірно затребувані в зв'язку з виходом iPhone 6 і 6 Plus.
Глава 1. Навчання Swift і Xcode для дизайнера, створення свого застосування на Swift
Жоден дизайнер не захоче витратити тиждень тільки на те, щоб дізнатися, що його задум не спрацює.
Знаючи, як користуватися Storyboard, Auto Layout і трохи навичок в Swift не тільки дозволить вам створити власний додаток, а й частково перейняти на себе навантаження по розробці. Ви зможете працювати нога в ногу зі своєю командою, виконуючи ітерації разом з програмістами. Швидкість розвитку проекту обмежена швидкістю виконання самого повільного процесу. Розробка займає 80% часу, а 20% припадають на візуальний дизайн. Є ще 30%, які ви можете взяти на себе. Оскільки дизайнери отримали можливість навчитися для цієї частини, можна серйозно оптимізувати роботу всієї команди.
У цьому розділі ми навчимося, як роздобути ті відсутні 30%. Я буду описувати з точки зору дизайнера.
швидке прототипування
Незважаючи на те, що Xcode надає дійсно потужні можливості, він також хороший для створення простих прототипів. І все це без єдиної рядки коду.
Є 6 типів переходів між екранами в iOS: Cover Vertical (наплив по вертикалі), Flip Horizontal (горизонтальне перегортання), Cross Dissolve (перехресне розчинення), Partial Curl (частковий вихор), None (ефект відсутній) і Push (витіснення) (вимагає Navigation Controller).
Бонус: якщо вам потрібно завантажити демо-проект Xcode для цього уроку, він тут. Повністю реалізований в Storyboard.
Проектування дизайну в Storyboard
Storyboard працює дуже схоже на артборди в Sketch. Він стає неймовірно інтуїтивним і простим інструментом, як тільки ви рятуєтеся від страху перед Xcode. У Storyboard ви можете управляти призначеним для користувача інтерфейсом свого застосування самим звичайним чином. Це навіть простіше, ніж HTML і CSS, тому що вам не потрібно вчити код (ще поки не потрібно), щоб дістатися до цього етапу.
Як дизайнеру, вам буде корисно вміти впроваджувати свій дизайн в код програми, не кажучи вже про те, що це дуже цікаво. Нам пощастило мати такий функціональний інструмент, як Storyboard. Навіть розробники користуються ним. З ним ви зможете не тільки прототіпіровать, але і створювати високоякісну верстку на рівні кінцевого коду продукту.
адаптивна верстка
Адаптивна верстка - один з найважливіших навичок, які ви можете розвинути. В майбутньому, де кількість мобільних пристроїв і розмірів екранів стає дедалі більше, ми вже не можемо дозволити собі застрягти на статичному дизайні.
Auto Layout
Авто-макет вимагає 2 параметра: позиція і розмір. Для побудови автоматично підстроюється дизайну цього достатньо. Для цього потрібні два інструменти: Align і Pin.
- Align дозволяє вам відцентрувати елементи і вирівняти їх один з одним.
- Pin дає можливість налаштувати розмір і відступи від країв.
Установка обмежень між двома об'єктами
Інструмент Preview в Assistant Editor дозволяє швидко перевірити, як дизайн буде виглядати на iPhone 3.5 ', 4', 4.7 ', 5.5' і iPad в портретному і альбомному режимах без необхідності запускати додаток на кожному пристрої.
класи розмірів
Size Classes - зручний інструмент для установки обмежень в авто-макеті і контенті для різних груп пристроїв. Ви можете додати додаткове меню або збільшити якусь частину контенту залежно від пристрою, на якому ви працюєте.
Робота з квітами
Як дизайнер зі знаннями в програмуванні, я зазвичай працюю з палітрою кольорів в 16-річної системі. Ці інструменти допоможуть вам ефективно конвертувати кольору з Sketch в Xcode.
- HEX Color Picker - дуже простий 16-ковий селектор кольору. Дуже корисний інструмент при роботі зі стандартним селектором кольору в Mac, який є в Sketch і в Storyboard Color Picker.
- Sip Color - відмінний інструмент для збору квітів і подальшого конвертування в код Swift.
- Skala Color Picker - відмінна альтернатива першим двом інструментам.
Vector Assets
Замість генерації 3 зображень в різному масштабі (1x, 2x, 3x) для кожного исходника, вам знадобиться всього один файл. У Sketch потрібно імпортувати їх в PDF. Важливо врахувати 3 моменту.
- Дозвіл має значення. Ви повинні експортувати в масштабі 1x, щоб переконатися, що дизайн виглядає добре в Storyboard.
- Ви не можете змінювати розмір векторного зображення в Storyboard на свій розсуд.
- Xcode перетворює їх у файли PNG в масштабах 1x, 2x і 3x.
представляємо Spring
Рік тому я представив вам Canvas. iOS-бібліотеку анімацій, яка призначена для спрощення процесу створення анімації за допомогою Runtime Attributes (атрибути робочого циклу) в Storyboard. Він був досить простий, щоб будь-який дизайнер без навичок в коді міг успішно розробляти динамічні ефекти інтерфейсу.
З тих пір багато чого сталося. Swift прийшов на зміну, а Xcode 6 значно все спростив. Тепер Runtime Attributes можна встановити, використовуючи IBInspectables. Замість того, щоб вручну прописувати кілька атрибутів, таких як тип анімації, затримка і тривалість, ви можете просто вказати значення безпосередньо в Attribute Inspector (інспектор атрибутів).
Я вирішив засісти за планшет і попрацювати в новій бібліотеці анімацій під назвою Spring. за допомогою двох iOS-розробників. Цей проект розпочався, коли я представив свою книгу Swift Chapter в допомогу дизайнерам і новачкам для вивчення Swift. Ця книга допомагала скоротити код анімації і вчила, як встановлювати властивості шару, які ще не доступні в Attribute Inspector - cornerRadius (радіус заокруглення кута), shadowColor (колір тіні), shadowOpacity (непрозорість тіні) та інші.
Ця бібліотека виросла в повноцінну бібліотеку анімації, яка підтримує всі можливі уявлення, переходи, анімації завантаження і багато іншого.
установка Spring
Використовуючи Spring, ви можете швидко анімувати будь-який шар без єдиної строчки коду. У вас є доступ до більш, ніж 25 передустановках анімації, таких як slideDown, zoomIn, squeezeUp і т. Д. Ви можете гратися з опціями x, y, масштабу і обертання. Крім того, ви можете експериментувати з параметрами кривої, уповільнення і швидкості.
Для простих анімацій:
- У Identity Inspector, встановіть Spring Class для вашого шару.
- Виберіть потрібні атрибути Spring.
Гра з додатком Spring
Анімації в коді
З кодом ви можете набагато більше. Spring побудований так, що ви можете запускати анімації або ланцюг анімацій на будь-яку подію.
Ви можете активувати їх під час viewDidAppear () або в IBAction.
layer.animation = «squeezeDown»
layer.animate ()
Я рекомендую зберігати всі параметри анімації в Storyboard і просто викликати функцію animate () або animateTo () в коді. Таким чином, ви можете уникнути занадто великої кількості коду в файлах класів.
Навчання Swift для дизайнера
За допомогою Swift Playground ви можете експериментувати з кодом в реальному часі. Це чудовий майданчик для експериментів з усіма можливостями, без обмежень графічного інтерфейсу. Вивчення використання функцій, класів і робота з UIKit може зробити ваше додаток набагато більш потужним.
Мені подобається розцінювати код як ще один інструмент дизайну. Програмні продукти зроблені з коду, він неминучий.
Ця книга була написана з урахуванням останніх стандартів, прийнятих Apple. Я консультувався у двох iOS-розробників під час її написання, і вони люб'язно переглядали весь мій код, щоб переконатися в дотриманні найвищих стандартів.
Як дизайнер, який вивчає код, ви можете:
- Виконати будь-яка зміна в анімації або призначеному для користувача інтерфейсі на основі подій.
- Працювати з реальними даними з будь-якої бази даних або API.
- Продуктивніше працювати разом з розробниками, розуміючи технічні обмеження і розробляти дизайн поза цих обмежень.
Створення свого застосування на Swift
Читайте також:
Глава 1. Навчання Swift і Xcode для дизайнера, створення свого застосування на Swift