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

• native iOS,
• native Android,
• PhoneGap,
• Appcelerator Titanium.

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

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

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

FasTip — это простое приложение для размещения подсказок. Поскольку это простой пример, то в нем используются стандартные элементы управления пользовательского интерфейса от каждой платформы:

На скриншотах выше показана работа native(родных) iOS, PhoneGap и native Android приложений. В среде Appcelerator Titanium используются родные средства управления, поэтому продукты на её основе выглядят так же, как native iOS и Android приложения. Наше приложение имеет два экрана: основной экран, где выводятся различные подсказки и экран настроек, который позволяет пользователю установить процентные показатели. Чтобы все было просто и понятно, для каждой среды мы будем использовать стили по умолчанию.

Исходный код для каждого приложения представлен на GitHub.

Родная iOS разработка.

Большинство приложений в App Store от Apple написаны на языке программирования Objective-C, а разработчики для создания своих приложений обычно используют Xcode (программа для разработки приложений под OS X и iOS, разработанная корпорацией Apple).

Как получить нужные инструменты.

При создании iOS приложения вы должны использовать Mac OS X; другие операционные системы не поддерживаются. Необходимые вам средства разработки, IOS 7 SDK и Xcode 5, являются бесплатными. Вы можете запустить создаваемое вами приложение в IOS симуляторе, который является частью IOS SDK. Чтобы запустить приложение на реальном устройстве и сделать его доступным в App Store от Apple, вы должны платить $ 99 в год.

• “About Xcode,” Библиотека разработчика iOS, Apple.
• “iOS Dev Center,” Apple.
• “iOS Developer Program,” Apple.

Создание нового проекта.

После установки Xcode, вы должны будете создать новый проект. На экране приветствия выберите “Create a new Xcode project” (создать новый Xcode проект) или используйте меню File → New Project.

Для простых приложений целесообразно использовать команду “Single View”. После нажатия кнопки “Далее” появится диалоговое окно, в котором необходимо ввести основные сведения о приложении:

Значения, которые вы вводите в поле «Class Prefix» позволяют присвоить уникальный префикс каждому классу, который вы создаете с помощью Xcode. Поскольку Objective-C не поддерживает «пространства имен» (набор правил именования, регулирующий видимость объектов в программе или хост-компьютеров в компьютерной сети), в отличие от Java, использование уникального префикса для каждого класса позволит избежать конфликта имен. Настройка поля «Devices» (устройства) позволяет ограничить область поиска приложений для работы только на iPhone или IPad. Вариант «universal» (универсальный) позволит приложению работать на обоих типах устройств.

Навигационные контроллеры и контроллеры представления.

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

Раскадровка: создание визуального пользовательского опыта взаимодействия.

Начиная с iOS 5, в Xcode присутствует возможность раскадровки (последовательность эскизов для визуального планирования сцен перед съёмкой), которая позволяет разработчикам быстро набрасывать серию контроллеров представления и определять содержимое каждого из них. Вот пример нашего приложения в раскадровке:

Контейнер слева представляет собой навигационный контроллер, который позволяет пользователю переходить от экрана к экрану. Два следующих объекта представляют собой два экрана, или контроллеры представления, которые будут основой нашего приложения. Стрелка, ведущая от главного экрана с деревом к экрану настроек, представляет собой переход, и указывает на переход от экрана к экрану. Новый переход создается путем выбора кнопки в начальном представлении, затем нажимается Control клавиша и перемещается мышкой в контроллер представления. Документации Apple содержит более детальную информацию об этом процессе.

В приведенном выше примере мы видим, что было выбрано текстовое поле, а панель свойств используется для настройки различных атрибутов управления. После создания приложения была выбрана опция «universal», которая позволяет этому приложению работать как на iPhone, так и на iPad. В результате были созданы две версии файла раскадровки. Когда приложение работает на iPhone или IPod Touch, будет использоваться версия файла под названием _iPhone, а версия _iPad будет использоваться для iPad. Наличие двух разных файлов позволяет выбрать более подходящий для каждого случая шаблон. Например, для iPad будет использоваться шаблон, который учитывает особенности работы на увеличенном дисплее. Контроллер представления автоматически загрузит соответствующий шаблон. Имейте в виду, что если ваши раскадровки предоставляют различные наборы элементов управления для iPad и iPhone, то вы должны учесть это в коде для контроллера представления.

В дополнение к непосредственному позиционированию элементов на экране с помощью координат, вы также можете использовать Auto Layout system (система автоматического создания шаблона), которая была введена в iOS 6. Появляется возможность определять ограничения в связях между элементами управления и представления. Редактор раскадровки позволяет создавать и редактировать эти ограничения.

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

Привязка раскадровки к вашему коду.

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

1. Выберите File → New File.
2. В появившемся диалоговом окне выберите «Objective-C class»:
3. В следующем диалоговом окне вы должны задать имя класса и убедиться, что оно следует из UIViewController: 
4. После нажатия кнопки «Next» (далее) вам будет предложено подтвердить, в какой именно части проекта должен быть сохранен файл. Для простых проектов достаточно выбрать основной каталог приложения.
5. После нажатия кнопки «Next», вы увидите, что для вашего контроллера представления был создан новый набор файлов. Теперь свяжите вновь созданный контроллер представления с контроллером представления в вашей раскадровке.
6. В открытом окне раскадровки кликните на требуемом контроллере представления. В панели «Identity Inspector» (инспектор идентичности», выберите «Class», с которым этот контроллер представления должен быть связан:
7. Как только этот процесс будет завершен, код для вашего контроллера представления будет правильно ссылаться на заданный объект раскадровки.

Для ссылки на элементы управления, которые вы перетаскиваете в раскадровку из вашего Objective-C кода, необходимо будет обозначить связи. Редактор раскадровки содержит «помощник редактора», который поможет установить все необходимые взаимосвязи. В основном, это сплит-панель просмотра, которая показывает раскадровку и код. В этом примере мы будем ссылаться на кнопки, которые уже размещены в раскадровке:

1. Прежде всего, убедитесь, что вы выполнили все описанные выше шаги и связали класс контроллера представления с соответствующим контроллером представления в раскадровке.
2. Выберите помощник редактора, нажав на соответствующий значок.
3. Откроется сплит-панель просмотра с окном раскадровки слева и классом контроллера представления справа.
4. Выберите кнопку в раскадровке и, удерживая клавишу Control, перетащите кнопку в область интерфейса вашего кода.
5. Появившееся диалоговое окно позволит создать «вывод» кнопки в вашем коде. Просто присвойте кнопке имя и кликните «Connect» (подключить) в диалоговом окне. Теперь вы можете ссылаться на кнопку в контроллере представления прямо из кода.
6. Теперь давайте подключим метод, который будет вызываться при нажатии пользователя на кнопку. Выберите кнопку еще раз и используйте тот же маневр с зажатием клавиши Control и перетаскиванием ссылки в раздел интерфейса вашего контроллера представления.
7. На этот раз в диалоговом окне, которое появляется, мы будем связывать “действия”, а не вывод. Выберите «Action» (действие) из выпадающего меню «Connection» и введите имя следующим образом: Для поля «Event» (событие) по умолчанию используйте «Touch Up Inside» и нажмите кнопку «Connect» (подключить.
8. Обратите внимание, что ваш класс теперь состоит из …
   
   Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
   
   
   
   Главная → Мобильные приложения → 22.11.2013 by Newsbot