Статьи

iOS с нуля с Swift: основы автоматического макета

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

Откройте Xcode и создайте новый проект, выбрав шаблон приложения Single View . Назовите свое приложение Auto Layout и установите для устройства значение Universal . Сообщите Xcode, где сохранить проект, и нажмите « Создать» .

Конфигурирование проекта

Помните, что ранее в этой серии универсальное приложение работало на iPad и iPhone (и на iPod Touch). Это означает, что пользовательский интерфейс должен адаптироваться к устройству, на котором он работает. Давайте рассмотрим, как это работает и какие проблемы нам нужно решить, чтобы достичь этого.

В проекте откройте Main.storyboard и добавьте пять меток в представление контроллера представления. Как вы можете видеть на скриншоте ниже, я разместил одну метку в центре вида и по одной в каждом из его углов.

Добавление пяти меток

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

Защелкивая ярлык в угол
Защелкивая ярлык в центр

Поскольку мы создаем универсальное приложение, оно должно хорошо смотреться как на iPad, так и на iPhone. Запустите приложение в симуляторе и выберите iPad Retina (или любой другой симулятор iPad) в качестве места назначения.

Установка адресата для iPad Retina

Уч. Пользовательский интерфейс не выглядит так здорово на iPad. Только верхняя левая метка расположена правильно.

Ярлыки расположены неправильно

Измените место назначения на iPhone 6 (или любой другой симулятор iPhone) и запустите приложение еще раз.

Установка адресата для iPhone 6

Пользовательский интерфейс выглядит еще хуже на iPhone. Две метки даже не видны на iPhone. Как и на iPad, только верхняя левая метка расположена правильно.

Ярлыки расположены неправильно

Цель этого руководства — исправить проблемы пользовательского интерфейса с помощью Auto Layout. Прежде чем мы сможем применить Auto Layout, нам нужно знать, что это такое и как оно может нам помочь.

Auto Layout был представлен на iOS с выпуском iOS 5, несколько лет назад. Auto Layout — это система макетов, которая носит описательный характер и основана на ограничениях. Это просто означает, что вы сообщаете механизму макета, как вы хотите, чтобы пользовательский интерфейс был размечен. Другими словами, вместо того, чтобы сообщать механизму макета, что кнопка должна быть расположена в определенном месте, вы описываете, где она должна быть расположена.

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

Преимущество Auto Layout просто. Благодаря описательной природе автоматической компоновки механизм компоновки обновляет пользовательский интерфейс независимо от размеров или ориентации устройства, на котором работает ваше приложение. Это также делает ваше приложение перспективным. Когда Apple представит устройство с новым размером экрана, ваше приложение автоматически настроит интерфейс пользователя в соответствии с новым размером экрана. Это не так, если вы жестко программируете пользовательский интерфейс вашего приложения.

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

Вы помните синие ориентиры, которые вы видели, когда добавляли метки в представление контроллера вида? Это не те ограничения, которые вы ищете. Как я уже сказал, это рекомендации, которые помогут вам позиционировать элементы пользовательского интерфейса. Это не что иное, как подсказки, которые Xcode дает вам придерживаться Руководства Apple по человеческому интерфейсу .

Есть несколько способов добавить ограничения к элементу пользовательского интерфейса. Одним из способов является использование меню Pin в нижней части Interface Builder . Выберите метку в левом верхнем углу и нажмите меню Pin внизу.

Открытие меню Pin

Метка в левом верхнем углу еще не имеет никаких ограничений. Давайте изменим это, прикрепив метку к верхнему левому углу родительского представления или суперпредставления. Используя меню Pin , мы можем добавить несколько ограничений одновременно. Давайте также добавим ограничения, чтобы установить фиксированную ширину и высоту метки, установив флажки « Ширина и высота» . Вот как должно выглядеть меню Pin . Обратите внимание, что флажок Ограничить поля не установлен.

Добавление ограничений на метку

В нижней части меню «Закрепить» текст кнопки теперь выглядит как « Добавить 4 ограничения» . Xcode говорит нам, что мы еще не добавили никаких ограничений. Нажмите кнопку, чтобы добавить ограничения, которые мы указали в меню Pin . Положение метки теперь определяется или описывается четырьмя ограничениями. Это представлено в раскадровке четырьмя синими линиями, окружающими этикетку.

Ограничения этикетки

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

Добавление ограничений в нижнюю правую метку

При наличии ограничений запустите приложение в симуляторе. Это то, что вы должны увидеть в симуляторе iPhone 6. Это выглядит намного лучше. У метки центра еще нет никаких ограничений. Давайте добавим немного сейчас.

Это выглядит намного лучше

Выберите центральную метку и добавьте два ограничения, чтобы зафиксировать ширину и высоту метки, используя меню Pin внизу. Вы ожидали увидеть две синие линии? Если вы правильно добавили ограничения, вы должны увидеть красные линии, а не синие. Это почему? Красные линии показывают, что что-то не так. Xcode говорит нам, что у метки недостаточно ограничений, чтобы избежать двусмысленности. Описание позиции ярлыка в настоящее время неполное.

Отсутствующие ограничения

Мы сказали Xcode, что метка должна иметь фиксированную ширину и фиксированную высоту. Мы еще не определили горизонтальное и вертикальное положение метки. Вы можете узнать больше о проблеме, изучив ошибку на панели слева. Вы должны увидеть красную стрелку слева от View Controller Scene . Нажмите на стрелку, чтобы прочитать сообщение об ошибке.

Сообщения об ошибках XCode
Сообщения об ошибках XCode

Ошибки говорят нам, что позиции X и Y не определены. Если вы щелкнете по красному кружку рядом с ошибкой, Xcode даст вам возможность исправить проблемы, добавив отсутствующие ограничения. Давайте не будем лениться и сами решим проблему.

Чтобы центрировать метку независимо от размеров и ориентации устройства, на котором запущено приложение, мы не можем использовать меню « Закрепить» . Вместо этого мы используем меню Align слева от меню Pin . Выбрав метку, откройте меню « Выровнять» и добавьте два ограничения, чтобы центрировать метку в родительском представлении. Добавляя эти ограничения, красные линии заменяются синими линиями.

Добавление недостающих ограничений

Пришло время узнать больше об ограничениях. Ограничения не являются статичными, и они, конечно, не магические. Вы можете добавлять, удалять и изменять ограничения. В качестве примера, давайте посмотрим на ограничения метки центра. Выберите метку и откройте инспектор размера слева. В разделе « Ограничения » перечислены ограничения текущего выделения, метка центра. Каждое ограничение имеет кнопку « Редактировать» для изменения атрибутов ограничения.

Проверка ограничений

Нажмите кнопку « Изменить» для ограничения « Ширина равна: 42» . Изменяя свойство Constant , вы можете изменить ширину метки. Установите Constant на 100 и нажмите Enter или Return, чтобы зафиксировать изменение. Размер метки в раскадровке немедленно отражает изменения, которые мы внесли.

Изменение ограничений

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

Конфликтующие ограничения

Выберите метку и откройте инспектор размера, чтобы проверить ограничения. Есть два ограничения, устанавливающих ширину метки. Нажмите кнопку « Редактировать» для ограничения « Ширина равна: 100» и установите « Приоритет» в значение « Высокий» (750) . Ширина метки в раскадровке меняется до 200, а одна из синих линий меняется с сплошной на пунктирную, что указывает на то, что это ограничение отменяется ограничением с более высоким приоритетом. Пунктирное ограничение все еще активно, но в настоящее время оно не применяется из-за его более низкого приоритета по сравнению с ограничением, которое устанавливает ширину метки равной 200 .

Превосходящие ограничения

Есть еще один способ решить проблему. Установите приоритет обоих ограничений на Обязательный (1000) . В то же время, изменить = на > = для ограничения, которое читает Ширина равна: 100 . Это также решает проблему. Результат не тот же, однако. Оба ограничения действуют вместе, чтобы определить положение метки. Теперь ограничение определяет, что ширина метки должна быть больше или равна 100 .

Совместные ограничения

Я уже упоминал, что есть несколько способов добавить ограничения в конструктор интерфейса. Давайте посмотрим на другую популярную технику. Откройте библиотеку объектов справа и добавьте текстовое поле в представление контроллера представления. Чтобы закрепить текстовое поле в верхней части представления, выделите текстовое поле, нажмите клавишу « Управление» и перетащите его из текстового поля в верхнюю часть представления. Посмотрите на скриншот ниже для пояснения.

Еще один способ добавить ограничения

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

Добавление вертикального интервала в руководство по верхнему макету

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

Добавление ограничения

Выделите текстовое поле, нажмите клавишу « Управление» и перетащите на метку слева от текстового поля. В меню выберите Горизонтальный интервал . Повторите этот шаг для метки справа от текстового поля. Мы почти там.

Добавление дополнительных ограничений

Чтобы установить фиксированную высоту метки, выберите текстовое поле, нажмите клавишу « Управление» и перетащите курсор от верхней части текстового поля к нижней части текстового поля. Выберите « Высота» в появившемся меню. Это определяет ограничение относительно самого текстового поля, его высоты.

Фиксирование высоты текстового поля

Я уверен, что вы согласны с тем, что основы Auto Layout легко понять. Хотя иногда это может быть довольно сложно. То, что мы рассмотрели до сих пор, это основы, Auto Layout сгибает свои мышцы. Давайте закончим этот урок, посмотрев на очень распространенную проблему, которая легко решается с помощью Auto Layout.

Нередко вы хотите, чтобы подпредставление охватывало ширину и высоту родительского представления. Например, табличное представление очень часто имеет тот же размер, что и его родительское представление. Давайте посмотрим, как мы можем справиться с этим, используя Auto Layout.

Добавьте представление из библиотеки объектов в представление контроллера представления. Откройте инспектор атрибутов и установите синий цвет фона представления, чтобы убедиться, что он выделяется. Запустите приложение в симуляторе iPad, чтобы увидеть, с чего мы начинаем.

Добавление синего подпредставления

Вы можете нажать Command + Стрелка влево или Command + Стрелка вправо, чтобы повернуть устройство. Похоже, что вид сохраняет свою ширину и высоту, но он застрял в верхнем левом углу. Цель состоит в том, чтобы он охватывал ширину и высоту родительского представления. Выберите синий вид и добавьте следующие ограничения, используя меню Pin .

Добавить четыре ограничения в синий вид

Прежде чем нажать кнопку « Добавить 4 ограничения» , убедитесь, что вы добавляете ограничения относительно суперпредставления синего вида. Что это обозначает? Ограничение описывает отношение между двумя представлениями. Вы собираетесь применить эти ограничения к синему представлению относительно его ближайших братьев и сестер. Однако мы хотим добавить ограничения, которые определяют положение синего представления относительно его содержащего или родительского представления. Вы определяете, какое представление определяет ограничение, щелкая маленький треугольник рядом с числом (которое определяет константу ограничения). Взгляните на следующий скриншот для пояснения.

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

Дважды проверьте, что каждое ограничение применяется к синему представлению и его родительскому или содержащему представление. Когда вы будете готовы, добавьте четыре ограничения.

Вместо синих линий вы, вероятно, видите оранжевые линии с цифрами. В Xcode оранжевый означает предупреждение. Оранжевые линии предупреждают вас, что текущая позиция синего вида не совпадает с позицией синего вида во время выполнения. Вы заметили оранжевые пунктирные линии по краям родительского вида синего вида? Эти пунктирные линии символизируют рамку синего вида, если действуют только что примененные ограничения. Это происходит во время выполнения.

Оранжевое Средство Предупреждение

Если вы мне не верите, я советую вам запустить приложение в симуляторе iPad, чтобы проверить себя. Синий вид охватывает ширину и высоту родительского вида, даже если вы поворачиваете симулятор из портретной в альбомную и наоборот.

Оранжевые линии излишне загромождают рабочее пространство, и то, что вы видите, не то, что вы получаете во время выполнения. Лучше исправить проблему, обновив рамку синего вида. Это просто Выберите синий вид и выберите « Обновить кадры» в меню « Устранить проблемы с автоматической компоновкой» в правом нижнем углу.

Убедитесь, что вы понимаете, что мы рассмотрели в этом руководстве, потому что оно понадобится нам в оставшейся части этой серии. В следующем уроке мы будем обсуждать представления таблиц и будем применять некоторые методы, обсуждаемые в этом уроке. Чтобы узнать больше об Auto Layout, просмотрите Apple Auto Layout Guide .

Сказать, что Auto Layout является мощным, значит преуменьшение. Несмотря на то, что в этом уроке мы только коснулись поверхности, теперь вы должны иметь представление о том, что такое Auto Layout и что оно может сделать для вас.

В оставшейся части этой серии мы продолжим использовать Auto Layout. Если вы застряли, обязательно посетите этот учебник или напишите мне в комментариях. Вы также можете связаться со мной в Twitter .