Посмотрим на исходный файл main.m

1. Удостоверьтесь, что навигатор проекта открыт в навигационной панели.

Навигатор проекта показывает все файлы в вашем проекте. Если навигатор проекта не открыт, нажмите крайнюю левую кнопку на панели переключения навигации. (Или откройте его, нажав View > Navigators > Show Project Navigator.)

2. Откройте каталог Supporting Files в навигаторе проекта кликнув по треугольнику рядом за ним.

3. Выберете main.m.

Xcode откроет исходный файл в основной области редактирования, как на рисунке:

Или вы можете дважды кликнуть на файл main.m, чтобы открыть его в отдельном окне.

Файл main.m и функция UIApplicationMain

Функция main в main.m вызывает функцию UIApplicationMain внутри autorelease pool

1. @autoreleasepool {

2. returnUIApplicationMain(argc, argv, nil, NSStringFromClass([XYZAppDelegateclass]));

3. }

Оператор @autoreleasepool здесь для управления памятью в вашем приложении. Автоматический подсчёт ссылок (ARC) делает управление памятью простым, давая компилятору выполнять работу по отслеживанию того, кто владеет объектом. @autoreleasepool — это часть инфраструктуры управления памятью.

Вызов UIApplicationMain создаёт 2 важных начальных компонента вашего приложения:

· Экземпляр класса UIApplication, называемый объектом приложения.

Объект приложения управляет циклом событий и координирует другие высокоуровневые особенности поведения приложения. Этот класс определённый в UIKit фреймворке, не требует от вас писать какой-либо дополнительный код, для его работы.

· Экземпляр класса XYZAppDelegate, называемый делегатом приложения.

Xcode создаёт этот класс для вас как часть создания шаблона Single View Application. Делегат приложения создаёт окно, где рисуется контент вашего приложения и предоставляет место, для реагирования на изменение состояния приложения. Это то где вы пишете свой код. Как и все классы, класс XYZAppDelegate определён в двух файлах в вашем приложении: в файле интерфейса XYZAppDelegate.h, и в файле реализации XYZAppDelegate.m.

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

Исходный файл Делегата Приложения

Для того чтобы глубже понять роль делегата приложения, посмотрите его исходные файлы, AppDelegate.h (файл интерфейса) и AppDelegate.m (файл реализации). Чтобы посмотреть файл интерфейса делегата выберете AppDelegate.h в навигаторе проекта. Интерфейс делегата приложения содержит всего одно свойство: window. С помощью этого свойства делегат приложения следит за окном, в котором написан весь контент вашего приложения.

После посмотрите файл реализации делегата приложения. Для этого выберите AppDelegate.m в навигаторе проекта. Реализация делегата приложения содержит «скелеты» важных методов. Эти предопределённые методы позволяют объекту общаться с делегатом. В момент важного события времени выполнения, например, запуска приложения, предупреждения о загруженности памяти и завершения приложения — объект приложения вызывает соответствующий метод в делегате приложения, давая ему возможность отреагировать соответственно. Вам не нужно делать что-то особенное, для того, чтобы быть уверенным в том, что эти методы вызовутся в нужный момент времени — объект приложения берёт на себя эту часть работы.

Каждый из этих автоматически реализованных методов имеет поведение по умолчанию. Если вы оставите «скелет» реализации пустым или удалите его из вашего AppDelegate.m файла, вы получите поведение по умолчанию когда бы эти методы ни были вызваны. Используйте эти «скелеты» для того, чтобы добавить код, который будет исполнен когда метод будет вызван. В этом руководстве, вам не требуется использовать специальный код, поэтому вам не нужно вносить какие-либо изменения в файл AppDelegate.m.

Открытие Storyboard

На данный момент вы уже готовы создать Storyboard для вашего приложения. Storyboard — это визуальное представление пользовательского интерфейса приложения, которое отображает экраны с содержимым и переходы между ними. Вы используете Storyboard’ы для описания последовательности представлений.

Для того чтобы открыть storyboard нужно:

· В навигаторе проекта надо выбрать Main.storuboard.

Xcode откроет storyboard в Interface Builder — в визуальном редакторе интерфейса, в области редактирования. Всё, что вы видите в окне представления — это рабочая область. На ней вы добавляете и размещаете элементы интерфейса.

Storyboard вашего приложения должна выглядеть вот так:

На этом этапе storyboard в вашем приложении содержит всего одну сцену, которая отображает экран с контентом. Стрелка, с левой стороны сцены — это индикатор главной сцены, который означает что она загружается первой во время запуска приложения. Сейчас сцена, которую вы видите, содержит одно Представление, которое управляется Контроллером Представлений. Вы узнаете больше о роли представлений и контроллеров представлений после этого урока.

Когда вы запускаете приложение на iPhone 6 iOS Симуляторе первое, что вы увидите на экране — это представление, добавленное на сцену. Но, когда вы посмотрите на сцену, которая находиться на рабочей области, вы заметите, что у неё нет точного размера экрана iPhone 6. Это происходит потому что у сцены имеется общее отображение интерфейса, которое может применяться на любом устройстве с любой ориентацией экрана. Вы используете эту функцию для создания Приспосабливающегося Интерфейса, который может автоматически регулировать отображение контекста в зависимости от устройства и ориентации. Вы узнаете больше о том, как сделать ваш интерфейс Приспосабливающимся чуть позже.

Построение Базового Интрефейса

Настало время построить базовый интерфейс для сцены, который позволит добавить новый элемент в список дел.

Xcode предоставляет библиотеку объектов, которую вы можете добавить в файл storyboard. Некоторые из этих объектов — элементы интерфейса, которые являются частью представления, такие как кнопки и текстовое поле. И другие, такие как контроллеры представлений и распознование жестов, которые определяют поведение приложения и не видны на экране.

Чтобы добавить элемент в список дел вам нужно текстовое поле — элемент интерфейса, который позволяет пользователю вносить строки в текст.

Для добавления текстового поля на вашу сцену:

1. Откройте бибилиотеку Объектов.

Библиотрека Объектов покажется внизу области утилиты. Если вы не видите Библиотеку, нажмите на третью кнопку слева на панели переключения библиотеки. (Ещё вы можете отобразить её, выбрав View > Utilities > Show Object Library.)

Посвившийся список отображает каждое имя объекта, описание и визуальное изображение.

2. В библиотеке Объектов напечатайте в поле фильтра text field, чтобы найти объекты Текстового Поля быстрее.

3. Перетащите объект Поле Текста из списка на вашу сцену.

Если необходимо вы можете увеличить изображение выбрав Editor > Canvas > Zoom.

4. Перетащите поле текста так, чтобы центр поля был посередине вертикальной направляющей и размещалось слева экрана.

Остановите перетаскивание, когда увидите что-то вроде этого:

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

5. Если необходимо, нажмите на поле текста, чтобы выделить и изменить размеры.

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

6. Изменяйте положение левого и правого краёв поля текста, пока не увидите три вертикальные направляющие.

Прекратите изменение размера, когда увидите что-то вроде этого:

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

Для конфигурации заполнителя текстового поля:

1. С выбранным полем текста откройте Инспектор Атрибутов во вспомогательной области.

Инспектор Атрибутов показывается когда вы выбираете четвёртую кнопку слева на панели переключения Инспекторов. Он позволяет вам редактировать свойства объекта в вашем storyboard.

2. В Инспектор Атрибутов найдите поле, обозначающее Заполнитель, и наберите New to-do item.

3. Для того чтобы новый заполнитель отобразился нажмите Ввод.

Предспросмотр Вашего Интерфейса

Периодически просматривайте ваше приложение, чтобы удостовериться в том, что всё выглядет именно так, как и ожидалось. Вы можете предварительно просмотреть интерфейс, используя assistant editor, который оттобразит второй редактор, рядом с основным.

Для предпросмотра вашего интерфейса нужно:

1. Нажмитена кнопку Assistan t на панели инструментов Xcode, чтобы открыть assistant editor.

1. На панели editor selector, переключите этот редактор из положения Автоматически в положение Предпросмотр.

3. Если вам нужно больше пространства для работы сверните навигатор проекта и вспомогательную область, нажав кнопки Navigator и Utilities на панели Xcode.

Ваше окно Xcode должно выглядеть вот так:

Как видите, текстовое поле выглядит неправильно. Оно заканчивается примерно на середине экрана. Определённый в storyboard интерфейс отображается правильно, так почему это происходит в предпросмотре?

Как вы узнали ранее вы теперь разрабатываете Приспосабливаемый интерфейс, который масштабируется в зависимости от размеров iPhone и iPad. Сцена, которую вы видите в storyboard по-умолчанию отображается как общая версия интерфейса. Здесь вам нужно указать как интерфейс должен подгоняться к разным устройствам. Например, когда интерфейс сжимается до размеров iPhone, и текстовое поле тоже должно сжаться. Когда интерфейс расширяется до размеров iPad, текстовое поле тоже должно расшириться. Вы може определить эти правила масштабирования интерфйса используя Авто расположение.

Добавление Авто Расположения

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

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

Для расположения текстового поля, используя Авто Расположение, необходимо:

1. В вашем storyboard выберете текстовое поле.

2. На рабочей области выбирете иконку Auto Layout Align.

3. Выбирете пункты «Horizontal Center in Container» и «Vertical Center in Container».

4. Нажмите на кнопку Добавить два ограничителя.

5. На рабочей области выбирете иконку Auto Layout Pin.

6. Под «Spacing to nearest neighbor» выбирете два красных ограничителя, нажав на них.

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

7. Нажмите на кнопку Добавить два ограничителя.

Предпросмотр интерфейса обновится для отображения новых ограничителей:

Если вы не получаете того поведения, что ожидаете, используйте функцию Xcode по поиску ошибок в Автоматическом Расположении. С выбранным текстовым полем нажмите на иконку Resolve Auto Layout Issues и выбирете Reset для SuggestedConstraints для того, чтобы Xcode обновил интерфейс с действующими ограничениями, описанные выше. Или нажмите на иконку Resolve Auto Layout Issues и выбирете ClearConstraints для удаления всех ограничений в текстовом представлении и после попробуйте снова шаги, описанные выше.

Проверка: запустите ваше приложение на iOS Симуляторе, чтобы убедиться, в том, что созданная сцена выглядет так как ожиалось. У вас должно получится кликнуть внутри текстового поля и ввести строку, используя клавиатуру (если хотите, вы можете переключить клавиатуру, нажав Command-K). Если вы перевернёте устройство (Command-Левая Стрелка или Command-Правая стрелка) или запустите приложение на другом устройстве, текстовое поле должно расшириться или сжаться в зависимости от размера устройства и его ориентации.

Несмотря на то что ваша сцена добавления элемента пока не очень функциональна, но, базовый интерфейс есть и он функционирует. Рассмотрение разметки с самого начала руководства позволяет вам быть уверенным, что у вас твёрдый фундамент для надстройки.

Резюме

Теперь вы на правильном пути чтобы суметь создать базовый интерфейс используя storyboards. В оставшихся руководствах вы узнаете как добавить взаимодействие с вашим интерфейсом и напишите код для создания пользовательского поведения. Главы в промежутках между руководствами познакомят вас с концепциями, которые вы используете на практике, работая над вашим приложением.