Лекция 2 CS193P Winter 2015 — Больше Xcode и Swift, MVC. (часть 3 — Autolayout)

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.

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

Screen Shot 2015-02-04 at 9.51.57 AMЭта кнопка не должна посылать никакие сообщения.
Теперь у меня есть идеальная сетка.

Screen Shot 2015-02-04 at 10.00.13 AM

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

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

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

Screen Shot 2015-02-04 at 10.22.52 AM
С помощью этой кнопки вы можете делать выравнивание UI.  Вы можете сделать их выровненными по левому краю ( Leading Edges) , по правому краю (Trailing Edges),  по верхнему краю (Top Edges), по нижнему краю (Bottom Edges) элементов или по центру. Но для нашей стратегии я это использовать не буду.
Моя стратегия совсем другая: сделать кнопки одинакового размера и с одинаковыми зазорами, поэтому я буду использовать следующую кнопку в палитре средств Autolayout,
Screen Shot 2015-02-04 at 10.31.51 AM
И вы видите, здесь я могу сделать размеры моих кнопок одинаковыми, не в том смысле, что они будут иметь указанный размер 64 х 64, нет, они приобретут другой размер, но будут одинаковыми. Поэтому мы выбираем  Equal Widths  и Equal Heights.
Верхняя часть этого окна относится к заданию зазоров между соседями ( Spacing to nearest neighbor ). Именно здесь я должен устанавливать зазоры ( Constrain to margins).
Я использую их все.

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

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

Screen Shot 2015-02-04 at 10.58.29 AM

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

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

Screen Shot 2015-02-04 at 12.26.54 PM

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

Screen Shot 2015-02-04 at 1.15.09 PMНажимаем на кнопку  «Fix Misplacement«.

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

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

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

Screen Shot 2015-02-04 at 3.01.01 PM

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

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

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

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

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

Лекция 2 CS193P Winter 2015 — Больше Xcode и Swift, MVC. (часть 3 — Autolayout): 7 комментариев

  1. Подскажите, получилось ли у вас воспроизвести шаг за шагом то, что профессор делал в 3 лекции? За 11:08 до конца видео среда подчеркиват ему переменную operation, но приложение компилится. У меня же сыпятся ошибки, начиная от нехватки аргументов в функции evaluate (которую в соответствии с синтаксисом Swift’а мы определили 2 раза и одно из определений не требует аргументов) до невозможности приведения типа к Double (если я делаю operation? явно опшионал). Даже о скобочках меня предупреждал — на Stack Overflow с подобной проблемой заключили, что это Swift неверно их интерпретирует и проблема решалась стиранием скобочек. Но там речь шла о switch. В общем, если у вас получилось запустить калькулятор в конце 3 лекции, то было бы здорово получить ваш код — может быть у меня где-то закралась ошибка. Хотя я уже несколько раз все проверил. И уже тогда разбираться, в чем проблема. На вашем форуме пока этого нет. Отправил запрос на добавление. В любом случае спасибо!

  2. Татьяна, Вы молодец! Отличные переводы. Пожалуйста, не бросайте!

  3. Великолепные лекции и переводы! Очень хорошо помогает разобраться в материалах после лекций на английском(особенно в специфичных терминах, таких как опционы, замыкания и тому подобное). Спасибо!

    • Да, лекции действительно потрясающие. И именно такое использование переводов я предполагала: как вспомогательный материал к пониманию видео лекций Пола Хэгерти.
      Но если вы заметили, я намеренно не перевожу термин Optional как «опцион», потому что «опцион» — это финансовый термин, а если сюда добавить перевод implement вы как «реализовать», то вы уже не в среде программирования, а на бирже. Но это — чисто субъективно, похоже, термин «опционал» (все-таки так) уже закрепляется в русском языке.

Обсуждение закрыто.