Расстановка объектов интерфейса

Мы поставили своей целью реализовать компьютерную версию игры для iPad и iPhone. В случае компьютера это монитор, неподвижно стоящий на столе, клавиатура и мышка. В нашем случае это одно из устройств, которые могут менять ориентацию экрана, которые имеют разные разрешения, которые умеют реагировать на прикосновения, встряхивание и многое другое.

Возьмем из классической игры основные элементы интерфейса и дадим им имена:

  • gameFieldView — часть экрана, на которой будет выводиться игровое поле
  • highScoreLabel — рекордное количество очков
  • scoreLabel — текущее количество очков
  • restartButton — кнопка, позволяющая начать игру с начала
  • menuButton — кнопка вызова меню

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

Выбираем Main.storyboard. В нем мы будем расставлять объекты интерфейса и для iPad и  для iPhone. Все возможные размеры и ориентации указаны ниже. Можно в ходе расположения объектов видеть, как они будут выглядеть на различных устройствах.

Покрасим фон

Найдите Библиотеку объектов в правой нижней части окна проекта.  В ней находится список объектов, которые вы можете использовать в своем приложении. Для удобства есть поле фильтра, где вы можете ввести часть имени объекта, при этом в списке останутся только те объекты, которые содержат введенные вами символы. Нам понадобятся:

  • Label для вывода теста на экран
  • View для вывода игрового поля
  • Button для кнопки

добавляем View

ширину и высоту устанавливаем равной 320

 

Найдем объект Label и перенесем его в правый верхний угол

Во вкладке Attributes inspector текст поля: 0, Font: Helvetica Bold, размер 20.0, зеленый цвет, выравнивание текста по правому краю

С нажатой клавишей Option двигаем мышкой, созданную нами Label, в левый верхний угол. Таким образом мы сдублировали объект

Значением текстового поля поставим 100, выравнивание выберем по левому краю

В левый нижний угол переносим объект Button

В правый нижний угол дублируем

Дважды щелкнув по кнопке Button мы получим возможность отредактировать название кнопки. Напишем Restart.

 

а левой кнопке дадим название Menu

Для того чтоб посмотреть как выглядят наши объекты на различных устройствах не обязательно запускать симулятор. Нажмите на кнопку Assistant Editor и выберете Preview > Main.storyboard. Можно свернуть боковые панели, чтоб получить больше пространства.  В правом окне появится превью нашего экрана. В данном случае в той же ориентации и с тем же размером. А значит выглядит так же.

Но что будет если нажать на кнопку поворота? Экран развернется на 90 градусов и мы не увидим нижних объектов. Не порядок! Если нажать на кнопку плюс в нижнем левом углу окна превью, то можно выбрать другие устройства из списка и увидеть как будет выглядеть наше расположение при других разрешениях экрана.

Для решения вопроса расположения объектов в зависимости от изменения размера экрана есть ограничения (constraints) — правила, описывающие расположение одних объектов относительно других и каких размеров они должны быть. К примеру, в нашем случае мы ожидали, что при повороте экрана наши объекты останутся в соответствующих угла. Если мы будем использовать constrains, то мы привяжем каждый из наших объектов к своему углу.

Закрепляем View

 

Для верхнего, правого объекта  добавляем ограничения:

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

Аналогично привязываем остальные объекты к соответствующим углам.

Проверяем:

Все работает отлично! Не зависимо от размера и расположения экрана, наши объекты будут оставаться той же ширины и высоты и располагаться на одинаковом расстоянии от краев. На данном этапе нам этого более чем достаточно. Позже мы разберем, как можно делать активными те или иные constrants в зависимости от различных устройств и расположений.

Создание проекта Начало Связь объектов …