Интересные статьи об Apple, приложениях для iPhone и iPad, iTunes

Начните разрабатывать приложения для iOS сегодня, часть 3

Начните разрабатывать приложения для iOS сегодня, часть 3
Автор: Applifto 16 января 2015, 19:00 #apple #xcode #ios #iphone #ipad #программирование #обучение

Начните разрабатывать приложения для iOS сегодня, часть 1

Начните разрабатывать приложения для iOS сегодня, часть 2

Руководство: Storyboard’ы

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

Это руководство научит вас:

  • Использовать storyboard’ы для формирования контента приложения и разделов
  • Управлять множеством контроллеров представлений
  • Добавлять действия к элементам в интерфейсе

После того, как вы закончите все шаги по этому руководству у вас будет вот такое приложение:

Создание второй сцены

Ранее вы работали с одной сценой, под управлением контроллера представлений, который представляет страницу, куда вы можете добавлять элементы в ваш список дел: сцену добавления элементов списка. Теперь настало время создать сцену, которая покажет полный список дел. К счастью, iOS имеет мощный встроенный класс, называемый table view (UITableView), разработанный специально для отображения прокручивающегося списка элементов.

Для добавления сцены с table view в storyboard вам необходимо:

  1. В навигаторе проекта выберете Main.storyboard. Если навигатор проекта свёрнут, разверните его, нажав кнопку Navigator на панели Xcode. Если область редактирования ещё открыта вернитесь к стандартному редактированию, нажав кнопку Standard.

2. Откройте библиотеку Объектов в области утилиты (для открытия библиотеки с помощью командного меню выберете View > Utilities > Show Object Library).

3. В библиотеке Объектов наберите в поле фильтра table view controller, чтобы найти этот объект быстрее.

4. Перетащите объект Table View Controller из списка и отпустите его на область слева от сцены добавления элементов. Если необходимо, вы можете получить дополнительное пространство для перетаскивания, используя Editor > Canvas > Zoom. Если вы видите table view с содержимым и ничего не происходит когда вы пытаетесь перетащить его на область, возможно, вы перетащили table view раньше чем контроллер представления. Table view — это один из элементов, под управлением контроллера представлений таблицы, но если вы хотите задействовать всю функциональность найдите контроллер представления таблицы и перетащите его на рабочую область.

Теперь у вас есть две сцены, одна для отображения списка элементов и одна для добавления в этот список элементов.

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

Для того, чтобы установить контроллер представлений сцены как исходную сцену, нужно:

  1. Перетащите указатель стартового контроллера из сцены добавления элементов списка на контроллер представлений сцены.

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

Проверка: запустите приложение. Вместо сцены добавления элементов с текстовым полем, вы должны увидеть пустое представление таблицы — экран, поделённый горизонтальными разделителями на строки, но без какого-либо контента внутри.

Отображение Статического Контента в table view

Так как вы ещё не изучали ничего о хранении данных, ещё рано создавать хранилище списка элементов и выводить их в table view. Но вам не нужны реальные данные для прототипа вашего интерфейса. Xcode позволяет вам создавать статический контент в table view в Interface Builder. Это позволяет проще понять как ваш интерфейс ведёт себя и это полезная возможность воплотить разные идеи.

Для создания статической ячейки вашего представления таблицы:

  1. Если необходимо, откройте структуру сценыimage: ../Art/outline_view_toggle_2x.png.
  2. В области структуры сцены выберете Table View внутри Table View Controller.
  3. С выбранным table view откройте Инспектора Атрибутов image: ../Art/inspector_attributes_2x.pngв области утилиты.
  4. В Инспекторе Атрибутов выберете Static Cells, которые появятся, после того как вы выберете в меню опцию Контент. Три пустых ячейки появятся в вашем table view.
  5. В области структуры сцены выберете верхнюю ячейку.

6. В Инспекторе Атрибутов выберете Базовый из всплывающего меню, после того, как вы выберете опцию Стиль. Базовый стиль включает label, поэтому Xcode создаст label с текстом «Заголовок» в ячейке.

7. В области структуры сцены выберете label.

8. В Инспекторе Атрибутов измените текст label с «Заголовок» на «Подстричь лужайку». Для закрепления изменения нажмите Ввод или кликните за пределы области утилиты. Ещё вы можете редактировать label, кликая два раза по ней и вносить изменения прямо в тексте label.

9. Повторите шаги 4–7 для других ячеек, называя их другими возможными элементами из списка дел.

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

Проверка: запустите приложение. Вы должны увидеть table view с предварительно сконфигурированными ячейками, которые вы добавили в Interface Builder. Посмотрите как новое table view ведёт себя когда вы прокручиваете список. Попробуйте перевернуть устройство на симуляторе — посмотрите как уже сконфигурированное table view располагает контент. Вы получили множество готового поведения, просто используя table view.

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

Добавление Сегвея для Навигации Вперёд

Настало время сформировать путь для навигации из созданного table view, с его списком элементов, к первой созданной сцене, где пользователь сможет сделать новый список дел. Как вы узнали из раздела «Определение взаимосвязи» переходы между сценами называются segues (сегвеями).

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

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

  1. В области структуры сцены выберете Table View Controller.
  2. С выбранным table view controller выберете Editor > Embed In > Navigation Controller.

Xcode добавит новый контроллер навигации в ваш storyboard, установит исходную сцену и создаст взаимосвязи между новым контроллером навигации и уже существующим контроллером table view.

На рабочей области если вы выберете иконку соединяющую две сцены, вы увидите, что у этой иконки тип связи «Корневой Контроллер». Это означает, что представление для вывода контента ниже навигационной панели будет вашим table view. Указатель стартового контроллера storyboard устанавливается в контроллере навигации, так как контроллер навигации содержит весь контент, который вы выводите в вашем приложении — это хранилище для обеих сцен: списка дел и добавления элементов списка.

Проверка: запустите приложение. Наверху table view вы должны теперь увидеть дополнительное пространство. Это навигационная панель, предусмотренная контроллером навигации. Навигационная панель увеличивает пространство сверху, там где находится панель статуса, поэтому теперь панель статуса больше не накладывается на ваш контент.

Теперь вы добавите заголовок (к списку дел) и кнопку (для добавления дополнительных элементов в список) в навигационную панель. Навигационная панель получают их заголовки из контроллера представлений, того, который теперь отображается, сами по себе они не имеют заголовка. Вы устанавливаете заголовок, используя элемент навигации из вашего списка дел (table view controller), до того как установить их в навигационной панели.

Для конфигурации навигационной панели, нужно:

  1. В области структуры сцены или на рабочей области выберете Navigation Item внутри Table View Controller.

2. В Инспекторе Атрибутов напечатайте To-Do List в поле Заголовка. Нажмите Ввод для сохранения. Xcode поменяет описание сцены с «Table View Controller Scene» на «To-Do List Scene», для того, чтобы вам было проще понимать суть сцены. Описание появится в структуре сцены.

3. В библиотеке Объектов найдите объект Bar Button Item.

4. Перетащите Bar Button Item в правый край навигационной панели в контроллере табличного представления. Кнопка содержит текст «Элемент», показывающий, куда вы перетаскиваете кнопку навигационной панели.

5. В области структуры сцены или на рабочей области выберете bar button item.

6. В Инспекторе Атрибутов найдите опцию Identifier в разделе Bar Button Item. Выберете Добавить из всплывающего меню Identifier. Кнопка изменилась на кнопку Добавления (+).

Проверка: запустите приложение. Панель навигации должна теперь иметь заголовок и отображать кнопку Добавить. Пока эта кнопка ничего не делает. В дальнейшем вы это исправите.

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

Для конфигурации кнопки Добавить необходимо:

  1. На рабочей области выберете кнопку Добавить.
  2. Осуществите перетаскивание с зажатым CTRL от кнопки до контроллера представления добавления списка элементов.

Всплывающее меню, которое называется Action Segue появиться там, где перетаскивание заканчивается.

Меню Action Segue позволяет вам выбрать какой тип segue должен быть использован для перехода из списка дел к контроллеру представления добавления элементов списка, когда пользователь нажимает на кнопку Добавить.

3. Выберете показать из меню Action Segue.

Xcode устанавливает segue и конфигурирует контроллер представления для отображения в контроллере навигации — вы увидите навигационную панель в Interface Builder.

Проверка: запустите приложение. Вы можете нажать на кнопку Добавить и перейти к контроллеру представления добавления списка элемента из table view. Обратная навигация обрабатывается автоматически так как вы используете контроллер навигации с show segue. Это означает что вы можете нажать кнопку Назад, чтобы вернуться к table view.

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

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

Для изменения стиля segue необходимо:

  1. В области структуры сцены или на рабочей области выберете segue от контроллера табличного представления к контроллеру представления добавления списка элементов.

2. В Инспекторе Атрибутов выберете Present Modally из всплывающего меню, которое появится при нажатии на опцию Style.

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

Для добавления контроллера навигации в контроллер представления добавления списка элементов нужно:

  1. В области структуры сцены выберете View Controller.
  2. С выбранным контроллером выберете Editor > Embed In > Navigation Controller.

Как и раньше Xcode добавляет контроллер навигации и показывает панель навигации вверху контроллера представления. Далее, сконфигурируйте эту панель, добавляя заголовок к этой сцене, а также две кнопки, Отмена и Готово. Позже, вы соедините эти кнопки с действиями.

Для конфигурации навигационной панели в контроллере представления добавления списка элемента, необходимо:

  1. В области структуры сцены или на рабочей области выберете Navigation Item в Контролере Представления.
  2. В Инспекторе Атрибутов наберите Add To-Do Item в поле Заголовок. Xcode поменяет описание сцены с «View Controller Scene» на «Add To-Do Item Scene» для того, чтобы вы легче находили сцену. Описание появится в области структуры сцены.

3. Перетащите объект Bar Button Item из библиотеки Объектов в правый край навигационной панели в контроллере представлений добавления элементов списка.

4. В Инспекторе Атрибутов выберете Готово из всплывающего меню, которое появиться после нажатия опции Идентификатор. Название кнопки изменится на «Save».

5. Перетащите другой объект Bar Button Item из Библиотеки Объектов в левый край навигационной панели в контроллере представлений элементов списка.

6. В Инспекторе Атрибутов выберете Отмена из всплывающего меню, которое появиться после нажатия на опцию Идентификатор. Название кнопки изменится на «Cancel».

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

Создание пользовательских контроллеров представлений

Вы закончили все конфигурации без надобности написания какого-либо кода. Хотя конфигурация завершения контроллера добавления элемента списка требует написания кода и вам нужно место куда его написать.

Сейчас Xcode сконфигурировал контроллер добавления элемента списка как основной для кода в ViewController.h и ViewController.m в навигаторе проекта. Эти файлы представляют пользовательский подкласс контроллера представлений, который будет создан как часть шаблона Single View Application. Очень важно узнать как создавать и конфигурировать пользовательские классы, так как это общая задача в разработке приложения. Поэтому сейчас, вы создадите пользовательский класс, называемый AddToDoItemViewController для соответствия со сценой добавления элементов списка в storyboard. AddToDoItemViewController — это подкласс UIViewController, поэтому у него всё базовое поведение этого контроллера.

(Продолжите и удалите ViewController.h и ViewController.m если хотите, так как вы не будете использовать их. Для удаления файла из проекта выбирете его в навигаторе проекта, нажмите клавишу Delete и выбирете Move to Trash в всплывающем меню.)

Для создания подкласса UIViewController, нужно:

  1. Выберете File > New > File (или нажмите Command-N).
  2. Слева от появившегося диалога выберете Source для iOS.

3. Выберете Cocoa Touch Class и нажмите Далее.

4. В поле Классы наберите AddToDoItem.

5. Выберете UIViewController во всплывающем меню «Подкласс от». Заголовок класса измените на «AddToDoItemViewController». Xcode помогает вам назвать создаваемые контроллеры, оставьте именно такое название.

6. Убедитесь что опция «Also create XIB file» не выбрана.

7. Убедитесь в том, что опция Язык установлена на Objective-C.

8. Нажмите Далее. Местом для сохранения по умолчанию будет директория вашего проекта. Опция Группа по умолчанию имеет значение, совпадающее с названием приложения, ToDoList. В разделе Цели выберете цель для вашего приложения, и не выберайте тест вашего приложения.

9. Оставьте эти пункты как они есть по умолчанию и нажмите Создать. Xcode создаст пару файлов, которые определены в классе AddToDoItemViewController: файл интерфейса (AddToDoItemViewController.h) и файл реализации (AddToDoItemViewController.m).

Теперь когда вы создали пользовательский подкласс контроллера представлений вам нужно сказать storyboard использовать его: вы переключаете сцену добавления элементов с использования старого класса ViewController на новый класс AddToDoItemViewController.

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

  1. В навигации проекта выберете Main.storyboard.
  2. Если необходимо выберете область структуры сценыimage: ../Art/outline_view_toggle_2x.png.
  3. В области структуры сцены выберете View Controller в Add To-Do Item Scene.
  4. С выбранным контроллером нажимаете на третью кнопку слева в области утилиты для того, чтобы открыть Инспектор Идентификацииimage: ../Art/inspector_identity_2x.png. Инспектор Идентификации позволяет вам редактировать свойства объекта в storyboard, и связанные с объектом особенности, такие как, к какому классу он принадлежит.

5. В Инспекторе Идентификации откройте всплывающее меню, которое появиться после нажатия на опцию Класс. Вы увидите список классов всех контроллеров, которые известны Xcode. Первым в списке должен быть ваш пользовательский контроллер AddToDoItemViewController.

6. Выберите его, чтобы использовать этот контроллер для этой сцены.

Заметьте, что Xcode поменял описание вашего контроллера добавления элемента списка с «View Controller» на «Add To-Do Item» в структуре сцены. Xcode интерпретирует имя пользовательского класса, чтобы проще понимать то, что происходит в storyboard.

Во время выполнения ваш storyboard создаст экземпляр AddToDoItemViewController — ваш пользовательский подкласс контроллера. Экран добавления элемента списка в приложении получит интерфейс, определённый в storyboard и поведение, определённое в AddToDoItemViewController.m.

Теперь создадим пользователский класс для соответствия со сценой списка в storyboard. Так как сцена списка — это контроллер table view, этот класс будет подклассом UITableViewController. UITableViewController предпологает базовое поведение как у UIViewController с некоторыми специальными частями как у table view.

Для создания подкласса UIViewController, необходимо:

  1. Выберете File > New > File (или нажмите Command-N).
  2. Слева выберете Source для iOS, потом выберете Cocoa Touch Class. Если вы до сих пор не создавали каких-либо классов с последней ступени руководства, то, возможно, этот класс уже выбран.

3. Нажмите Далее.

4. В поле Класс напечатайте ToDoList до ViewController.

5. Выберете UITableViewController из всплывающего меню «Подкласс от». Заголовок класса сменится на «ToDoListTableViewController». Оставьте его таким.

6. Проверьте чтобы опция «Also create XIB file» была не выбрана.

7. Убедитесь в том, что опция Язык установлена на Objective-C.

8. Нажмите Далее. Местом для сохранения по умолчанию будет директория вашего проекта. Опция Группа по умолчанию имеет значение, совпадающее с названием приложения, ToDoList. В разделе Цели выберете цель для вашего приложения, и не выберайте тест вашего приложения.

9. Оставьте эти пункты как они есть по умолчанию и нажмите Создать. Xcode создаст пару файлов, которые определены в классе ToDoListTableViewController: файл интерфейса (ToDoListTableViewController.h) и файл реализации (ToDoListTableViewController.m).

Ещё раз убедитесь что вы конфигурируете ваш пользовательский контроллер ToDoListTableViewController в storyboard.

Для установки ToDoListTableViewController как класса для сцены списка дел:

  1. В навигаторе проекта выберете Main.storyboard.
  2. В области структуры сцены выберете Table View Controller в сцене Список дел и откройте Инспектор Идентификацииimage: ../Art/inspector_identity_2x.png в области утилиты.
  3. В Инспекторе Идентичности выберете ToDoListTableViewController из всплывающего меню, которое появиться после нажатия на опцию Классы.

Теперь вы готовы добавить ваш пользовательский код в контроллер представлений.

Разработка Обратного Сегвея для Навигации Назад

В дополнении к show и modal segues Xcode предоставляет unwind segue. Этот segue позволяет пользователям уходить с текущей сцены назад к предыдущей сцене, а также он предоставляет место, куда вы можете добавлять код, который будет выполняться когда пользователи перемещаются к предыдущей сцене. Вы можете использовать этот тип segue для обратной навигации из AddToDoItemViewController в ToDoListTableViewController.

Чтобы создать unwind segue вам нужно добавить метод действия в целевой контроллер представления (контроллер, в который вы хотели вернуться). Этот метод, должен вернуть действие (IBAction) и принимать segue storyboard (UIStoryboardSegue) как параметр. Так как вам нужно вернуться к сцене списка дел, вам нужно добавить метод действия в интерфейс и реализацию ToDoListTableViewController.

Для добавления метода действия в ToDoListTableViewController, необходимо:

  1. В навигаторе проекта откройте ToDoListTableViewController.h.
  2. Добавьте следующий код, ниже строки @interface:
  3. — (IBAction)unwindToList:(UIStoryboardSegue *)segue;
  4. В навигаторе проекта откройте ToDoListTableViewController.m.
  5. Добавьте следующий код, ниже строки @implementation:
  6. — (IBAction)unwindToList:(UIStoryboardSegue *)segue{

}

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

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

Для создания unwind segue, соедините кнопки Отмена и Готово с действием unwindToList:. В вашем storyboard вы делаете это с помощью иконки Выход, которая находится на панели исходного контроллера представления AddToDoItemViewController.

Для соединения кнопок с методом действия unwindToList: нужно:

  1. В навигаторе проекта выберете Main.storyboard.
  2. На области, с зажатым Ctrl начните перетаскивание от кнопки Отмена до элемента Выход вверху на панели сцены добавления элемента списка. 

Если вы не видите элемент Выход, а взамен видите описание сцены, увеличьте область, нажав Editor > Canvas > Zoom, пока не увидите его. Меню покажется на том месте где вы остановите перетаскивание.

3. Виберете unwindToList: из всплывающего меню. Это действие, которое вы только добавили в файл ToDoListTableViewController.m. Теперь когда пользователи нажмут на кнопку Отмены, они вернутся к сцене со списком элементов. В этот момент будет вызван unwindToList:.

4. На области, с зажатым Ctrl начните перетаскивание от кнопки Готово до элемента Выход наверху на панели сцены добавления элементов списка. 

Меню покажется на том месте где вы остановите перетаскивание.

5. Выберете unwindToList: из всплывающего меню. Теперь когда пользователи нажмут на кнопку Готово, они вернутся к сцене со списком элементов. В этот момент будет вызван unwindToList:.

Заметьте, что вы используете одинаковые действия для обеих кнопок Отмены и Готово. В следующем руководстве вы поймёте различия между этими двумя разными вариантами, когда будете писать код для собственного unwind segue.

Проверка: теперь запустите ваше приложение. В момент запуска вы увидите table view, но без каких-либо данных. Вы можете нажать на кнопку Добавить и переместиться в сцены добавления элементов списка из сцены списка дел. Вы можете нажать на кнопки Отмены и Готово, чтобы вернуться назад к сцене списка.

Так, почему же ваши данные не показались? Table views имеют два способа получить данные — статически и динамически. Если контроллер table view реализовал обязательные методы протокола UITableViewDataSource, table view запрашивает данные для отображения у контроллера, в независимости от того были ли статичные данные сконфигурированы в Interface Builder. Если вы посмотрите в файл ToDoListTableViewController.m вы заметите, что в нём реализованы три метода: numberOfSectiomsInTableView:, tableView:numberOfRowsInSection:, tableView:cellFprRowAtIndexPath:. Вы будете работать с этими методами в следующем руководстве, чтобы отобразить динамические данные.

Резюме

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