Как понять наших дизайнеров и создать красивое приложение Hello World на iOS

Руководство по реализации того, что дает нам команда дизайнеров

Запуск проекта без раскадровки

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

Установка диспетчера ограничений

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

Вы можете увидеть, как установить библиотеку здесь: PureLayout.

После установки переходим к следующему шагу.

Понимание нашего прекрасного дизайна Hello World

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

Итак, сначала мы разберемся с нашим дизайном, а затем создадим тот красивый экран, который соответствует требованиям нашего дизайнера (в моем случае - меня).

Во-первых, какие элементы мы видим?

Название: «Это привет, мир с PureLayout».
Описание: «Это планета Земля, она только одна. Заботиться о нем!"
Изображение: Прекрасное изображение нашего мира.
Торговое название: «Средний».

Тогда мы уже знаем, что нам нужно создать четыре элемента в наших представлениях… но достаточно ли этого?

Предположим, что эти рекомендации дал нам дизайнер.

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

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

Создание элементов нашего прекрасного Hello World

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

Центрированный вид

Контейнерное представление большинства элементов является простым UIView без дополнительной настройки.

Название

Теперь, что касается заголовка, у нас есть определенные спецификации от нашего любимого дизайнера: заголовок представляет собой полужирный текст размером 28 пунктов и с текстом «Это Hello World с PureLayout» с разрывом строки после слова «World» и центрированное выравнивание.

Вот как это видит дизайнер:

Вот как мы это видим:

«Почему lazy var?

Замыкание, связанное со свойством lazy, выполняется, только если вы читаете это свойство. Итак, если по какой-то причине это свойство не используется (возможно, из-за решения пользователя), вы избегаете ненужного выделения и вычислений.

Вы можете заполнить свойство lazy значением сохраненного свойства. Вы можете использовать self в закрытии объекта lazy ». - Спасибо Лукасу Анджелетти за объяснение.

Описание

Как и в названии, он также имеет свои характеристики: обычный шрифт размером 14 пунктов с текстом: «Это планета Земля, она только одна. Заботиться о нем!" с разрывом строки после абзаца «есть только ...» и выравниванием по центру.

Вот как это видит дизайнер:

Вот как мы это видим:

Изображение

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

Вот как это видит дизайнер:

Вот как мы это видим:

Название бренда

Спецификации торговых марок очень похожи на спецификации заголовков, жирным шрифтом, размером 28 пунктов и текстом «Средний» с выравниванием по центру.

Вот как это видит дизайнер:

Вот как мы это видим:

Добавление элементов в главный вид

Прежде всего, мы добавим наши элементы в каждое представление по мере необходимости:

Вид Main содержит centeredView и название бренда.
CenteredView содержит заголовок, описание и изображение.

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

Вот как это видит дизайнер:

Вот как мы это видим:

Для преобразования шестнадцатеричных кодов в UIColor вы можете использовать этот инструмент: UIColor.xyz.

Последний шаг, установка ограничений

Центрированный просмотр

Нам нужно центрировать это представление внутри его основного контейнера (как мы видели ранее, это centeredView находится внутри основного ViewController представления).