STANFORD UNIVERSITY: Разработка iOS 8 приложений с Swift CS193P

 Лекция 2: Больше Xcode и Swift

Профессор Пол Хэгарти (Paul Hegarty)

Лекцию на английском языке и слайды модно найти на  iTunes название “2. More Xcode and Swift, MVC”.

Это продолжение: 3 — ая часть лекции (44 минута — конец ) —  Autolayout , MVC. Код для Swift 1.2 этой части на GitHub. Код для Swift 2.0 этой части на GitHub.

Начало: 1 — ая часть лекции (0 — 30 минут) — находится здесь, код для этой части на GitHub.

Продолжение: 2 — ая часть лекции (30 минута — 44 минута )- находится здесь, код для этой части на GitHub.

Последняя вещь, которую я собираюсь сделать — это выполнить Autilayout над кнопками: цифровая клавиатура и кнопки с операциями.

Я хочу, чтобы мои кнопки распределились по всему экрану, потому что вы видите, что у нас теряется пространство — справа, на iPhone в портретном режиме. Кроме того потеряна вся нижняя часть экрана. Тоже самое в ландшафтном режиме.
Действительно, я хочу, чтобы мои кнопки были большими, чтобы они растянулись.
Для того, чтобы это осуществить, нужно разработать некоторую стратегию.
Конечно, мы могли бы взять каждую отдельную кнопку и начать использовать CTRL-  перетягивание к соседям и выставлять «лидирующие» и «хвостовые» зазоры, может быть их выравнивать, делать у них одинаковую ширину и высоту. О боже, вы потратили бы на это целый день.
Я не собираюсь это делать, а буду использовать специальные кнопки внизу, которые могут делать очень полезные вещи для Autolayout.

Моя стратегия заключается в том, чтобы сделать идеальную сетку. Но у нас не хватает одной кнопки в нижнем левом углу, поэтому я добавлю «фантомную» кнопку обычным  copy / paste. У нее не будет заголовка, но нужно CTRL-кликнуть на ней и удалить все связи, если там такие есть: связей не должно быть.

Эта кнопка не должна посылать никакие сообщения.
Теперь у меня есть идеальная сетка.

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

С помощью голубых линий эти кнопки наверху, распознают метку в качестве ближайшего соседа, и левый край экрана в этом участвует, если мы используем голубые линии.
Но если вы не использовали голубые линии или сделали какие-то ошибки при размещении, не учтя голубые линии, то наша стратегия может не сработать, Я показываю это на демонстрации, показываю как выполнить дополнительное задание в вашей домашней работе. Если вы не сможете это сделать, то не беспокойтесь сильно об этом. Пусть ваши кнопки будут в левом верхнем углу и этого достаточно. Но если вы все-таки хотите попытаться это сделать, то ключом к нашей стратеги сделать идеальную сетку являются голубые пунктирные линии.

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

С помощью этой кнопки вы можете делать выравнивание UI.  Вы можете сделать их выровненными по левому краю ( Leading Edges) , по правому краю (Trailing Edges),  по верхнему краю (Top Edges), по нижнему краю (Bottom Edges) элементов или по центру. Но для нашей стратегии я это использовать не буду.
Моя стратегия совсем другая: сделать кнопки одинакового размера и с одинаковыми зазорами, поэтому я буду использовать следующую кнопку в палитре средств Autolayout,

И вы видите, здесь я могу сделать размеры моих кнопок одинаковыми, не в том смысле, что они будут иметь указанный размер 64 х 64, нет, они приобретут другой размер, но будут одинаковыми. Поэтому мы выбираем  Equal Widths  и Equal Heights.
Верхняя часть этого окна относится к заданию зазоров между соседями ( Spacing to nearest neighbor ). Именно здесь я должен устанавливать зазоры ( Constrain to margins).
Я использую их все.

Вы видите здесь 8, она сразу была установлена, так как я использовал голубые линии для верхней части моей сетки. Это стандартный размер (количество points) между элементами  UI. Другие были установлены в Multiple, потому что некоторые далеко отстоят от соседей — правого края, например.
Я устанавливаю все в 8 и нажимаю линии в виде «распорки», говоря, что я прошу принудительно это установить.

Теперь мы хотим добавит все эти правила ( Add 87 Constraints ). Их 87. Если их не такое количество, а типа 100 или что-то еще, значит вы не все выровняли по голубым линиям. Их должно быть в нашем конкретном случае ровно 87. Нажимаем и смотрим, что происходит.

Я получил множество голубых линий, показывающих мне эти правила. Очень большое их количество связано с тем, что указано равенство ширины и высоты у всех кнопок. Кроме того есть малюсенькие линии, отражающие правила для зазоров от соседей. И много желтого. Желтое означает, что да, правила установлены, но текущее положение элементов UI в данный момент им не подчиняется, а вот если бы подчинялись, то они бы «переехали» на те места, которые указаны пунктирными желтыми линиями.

Мы можем поступить также, как и вначале нашей демонстрации с меткой дисплея. Мы перейдем в Схему UI ( Document Outline ) с помощью маленькой иконки в левом нижнем углу и увидим выбранные нами кнопки. А также маленькую желтую стрелочку наверху. А что если она красная? Красное означает, что вы не просто получили предупреждение о том, что ваши  UI элементы не на правильных местах (желтый случай), а что у вас ошибка, говорящая о конфликте установленных вами правил. Например, вы попросили Autolayout принудительно выполнить несовместимые правила. Такие правила работать не будут. Так что если вы получили красное, то это работать не будет.

Я продолжу, а через минуту покажу что делать, если что-то идет не так, а не просто элементы  UI не на нужных местах.  Кликаем на желтой стрелочке.
И мы видим здесь все проблемы наших правил для Autolayout, то есть новые места для наших кнопок, которые сейчас на неверных местах. Мы можем выделить любую проблему и на storyboard будут подсвечиваться элементы  UI, участвующие в этой проблеме.
Вы можете выбрать любую из них и кликнуть на маленьком желтом указателе. Появится всплывающее окно, а в нем замечательная опция Apply to all views in container (Примерить ко всем views в контейнере). Мы не хотим исправлять проблемы для каждой кнопки индивидуально, поэтому мы выберем опцию Apply to all views in container. И как обычно остается выбранной наша любимая опция Update frame.

Нажимаем на кнопку  «Fix Misplacement«.

Все переезжает на новые места, все становится голубым. И нет ошибок Autolayout.  Все выглядит прекрасно. Запускаем приложение на симуляторах разных устройств: iPhone 6, iPhone 4S в портретном и ландшафтном режиме, пробуем работать. Все работает.

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

Эта кнопка позволяет вам переустанавливать ваши правила (constraints) и в верхней секции всплывающего окна вы видите опции для выделенных элементов UI. У меня что-то выделено и я могу переустановить правила для этого выделенного контента. А вот нижняя секция касается всех views в контейнере и удаляет все правила Autolayout (constraints) целиком. Опция Reset to Suggested Constraints имеет отношение к вашим голубым пунктирным линиям, но если у вас правила не работают (красный цвет), то пунктирные линии не включены в любом случае. И вы можете выбрать опцию Clear Constraints, которая очистит все ваши правила. То есть не только правила для ваших кнопок, но также и для меток.
Вы можете переустановить метку заново с помощью голубых пунктирных линий и CTRL — перетягивания к краям экрана, как это мы делали вначале. Если ваши кнопки огромные, например, они стали огромными, но не попали на нужное место, вы можете изменить размер ваших кнопок в Области Утилит ( Utility Area ) в Инспекторе Размеров. Вы можете напечатать тот размер, который вам нужен, может быть сделать прежнем 64 х 64.

Возможно, что лучше заново перетянуть их на позиции, чтобы работали голубые линии. И не забывайте, что при перемещении к голубым линиям вы должны взять всю сетку целиком и разместить под меткой дисплея. Если у вас возникли какие-то проблемы с меткой при таком перемещении ( возможно случайные), вы
можете очистить правила Autolayout только для этой метки — опция Сlear Сonstraints, в верхней секции, а затем переустановить предполагаемые правила (голубые пунктирные линии) для этой метки с помощью опции
Rest Suggestion Constraints в верхней секции, так она будет работать только для вашей метки и она передвинется на нужную позицию.

И опять сильно не расстраивайтесь по поводу Autolayout  — это дополнительное задание в вашей первой домашней работе. Во второй домашней работе это будет обязательным заданием, и вам придется его делать. Но у меня будет очень большая лекция по теме Autolayout через пару недель. Вот там я покажу, что она умеет делать, я научу вас как пользоваться Autolayout  в реальной ситуации и в каких-то особенных случаях. Autolayout  — очень важная тема, связанная с тем, что мы ведем разработку в квадратной области, а хотим, чтобы UI работал на всех типах приборов. Именно поэтому мы начали ею пользоваться прямо с самого начала, чтобы приобрести опыт работы с ней.

Код для этой части на GitHub.

Это все, что касается Autolayout . Дальше, на этой лекции я хочу поговорить о парадигме конструирования MVC.

Примечание переводчика. Вы можете познакомиться с материалом по MVC здесь. Это лекция прошлого года, но за год парадигма MVC не претерпела изменений.