Автоматическая компоновка - это система компоновки на основе ограничений, позволяющая разработчикам создавать отзывчивый и адаптивный пользовательский интерфейс. В большинстве случаев разработчикам сложно выучить его, и они избегают его использования. И поверьте мне, когда вы разрабатываете приложение сегодня, вы не сможете управлять вещами и продолжать работать без него.
Если создание макетов экрана с поддержкой iPhone и iPad или iWatch доводит вас до крайности безумия? Не отчаивайся, я принесу тебе бальзам для сердца!
«Итак, давайте погрузимся в неизведанное. Вырви страницы; пусть жизнь развернется ». - Грэм Колтон - Держись за мое сердце
«Начнем с ура. Заблудиться в городских огнях, утонуть в колыбельной ... »-
Ваник - Самурай
Что ж, сейчас не может быть более актуальной и интересной, не так ли?
С чего мы начинаем? Это целевая страница с основными элементами, а именно логотипом, ярлыками и кнопкой.
Начнем с логотипа. Используя графическое программное обеспечение, экспортируйте логотип всех трех размеров: 1x, 2x и 3x. Я предпочитаю Bohemian Coding’s Sketch 3.
Экспортируйте и добавьте PNG в набор изображений в папке Assets.xcassets.
Когда все будет готово, перетащите UIImage в Storyboard.
Что особенного? - Мы не собираемся жестко кодировать даже одно ограничение.
1. Размещение логотипа в правильном вертикальном и горизонтальном положении.
I. Проверьте верхнее, начальное и конечное поля с помощью графической программы.
II. Назначьте «Центр по вертикали в контейнере» с помощью раскадровки.
III. Нажмите на ограничение и перейдите на панель инспектора атрибутов.
IV. Пора вычислить множитель. До сих пор в Auto Layout использовались ограничения с постоянной шириной и высотой, но есть другой способ. Для этого используются множители.
Расчет множителя:
Что у нас есть?
- Верхнее поле для логотипа составляет 61+ (половина высоты логотипа) 31,5, то есть всего 91,5
- Общая высота экрана составляет 667
Шаг 1. Половина высоты экрана = 667/2 = 333,5
Шаг 2. Множитель = 91,5 = 333,5 * x
Шаг 3. x = 91,5 / 335,5 = 0,274
Ответ: Множитель = 0,274
V. Обновите множитель до 0,274 с 1 по умолчанию.
VI. Добавьте ограничение «Центрировать по горизонтали в контейнере» в режим раскадровки.
2. Установка ширины логотипа.
I. Назначьте «Равную ширину» в режиме раскадровки.
II. На данный момент ширина логотипа равна ширине экрана. Давай исправим.
III. Нажмите на ограничение и перейдите на панель инспектора атрибутов, затем пора вычислить множитель.
Расчет множителя:
Что у нас есть?
- Правое и левое поля и ширина логотипа (61)
- Общая ширина экрана 375
Шаг 1. Примените формулу, т. Е. Ширина объекта = Размер экрана * x
Шаг 2. 61 = 375 * x
Шаг 3. x = 61/375 = 0,162
Ответ: Множитель = 0,162
V. Обновите множитель до 0,162 с 1 по умолчанию.
Логотип размещен.
Думаю, на сегодня хватит. Остальная часть учебника будет опубликована в понедельник. ;) Спасибо.
Со мной можно связаться по адресу [email protected]
Изменить: я не смог опубликовать оставшуюся часть учебника. Однако опубликованное выше дает понять, как вы работаете с множителями.
