Подробности руководства:Технология: iPhone SDK 4
Сложность: Начальная
Время на выполнение: 45 минут
Данное руководство посвящено разработке при помощи iPhone SDK. Вы получите информацию о платформе iPhone, о том, как установить и настроить среду разработки, а также пройдете по необходимым этапам создания простенького приложения «печенья-гадания».
О платформе
iOS – это оптимизированный под мобильные устройства вариант Mac OS X, разработанный Apple Inc. Он устанавливается на все устройства iPod touch, iPhone и iPad, и занимает всего около 500 мб дискового пространства.
Существует три различных подхода в разработке iOS:
1. Разработка веб-приложенияОригинальная iPhone OS 1.0 требует, чтобы все приложения, разработанные не Apple, находились в интернете, и выполнялись при помощи веб-браузера Mobile Safari. Так как Mobile Safari не поддерживает плагины вроде Adobe Flash или Microsoft Silverlight, это означает, что все сторонние приложения должны были быть написаны на HTML, CSS и javascript. Этот метод разработки и на сегодняшний день применяется, особенно в разработке приложений, которые должны запускаться при помощи различных устройств или командами разработчиков, которые недолюбливают Mac OS X и Objective-C.
2. Разработка «родных» приложенийС выходом iPhone OS 2.0 и представлением iPhone SDK и iTunes App Store, разработчики принялись создавать родные приложения для iPhone используя Objective-C и Xcode. Родные приложения – это такие приложения, которые создаются и выпускаются эксклюзивно для конкретных типов устройств или ОС. Эти приложения имеют определенный уровень доступа к аппаратному оснащению устройства, и только родные приложения могут распространяться посредством iTunes App Store. Так как iPhone OS присутствует также и на iPod touch, iPhone, и на iPad, большинство приложений можно разрабатывать для всех трех устройств, с незначительными различиями в коде, и это дает существенное преимущество с точки зрения оптимизации вашего приложения для больших разрешений экрана iPad.
3. Разработка гибридных приложенийТакже есть возможность комбинировать эти подходы, и создавать iPhone-приложения, которые устанавливаются на устройство пользователя, но при этом написаны на HTML, CSS и javascript, и распространяются посредством iTunes App Store. Такие приложения стремительно набирают популярность благодаря библиотекам открытого исходного кода вроде QuickConnect и платформам вроде PhoneGap, AppCelerator и rhomobile.
Мы расскажем вам об этих методах разработки под iPhone OS, но данное руководство сосредоточено на разработке родных приложений с использованием официального iPhone SDK и Objective-C + Xcode. Это рекомендованный компанией Apple метод разработки родных iPhone OS-приложений, которые впоследствии можно будет распространять посредством iTunes App Store.
Приступаем к разработке
Для того чтобы разрабатывать iPhone SDK-приложения и продолжить чтение данной статьи, вам потребуется следующее:
Mac на базе Intel с установленной Mac OS X Snow LeopardДля того чтобы писать родные приложение на официальном iOS SDK и тестировать собственные приложения на официальном iPhone/iPad Simulator от Apple, вам понадобится возможность запустить Snow Leopard, последнюю версию ОС для настольных ПК от Apple.
Аккаунт разработчика в AppleЭто необходимо для того, чтобы скачать iPhone SDK 4, Xcode IDE, и iPhone Simulator. Вам нужно зарегистрировать
аккаунт разработчика. Регистрация бесплатна, и позволит вам запускать приложения в симуляторе iPhone. Бесплатный аккаунт – это все, что вам потребуется в данном руководстве, но для того, чтобы ваши приложения запускались на устройствах или для того, чтобы вы могли опубликовать их в iTunes App Store, вам нужно будет заплатить членский взнос в iPhone Developer Program.
Xcode и iPhone SDK 4После авторизации в
аккаунт разработчика, скачайте и установите Xcode 3.2.5 и iPhone SDK 4 (либо любые новые доступные версии).
После того, как вы проделаете всё это, вы сможете перейти к разработке приложения «Fortune Crunch» - простенького iPhone-приложения, которое позволяет пользователям «разламывать» печенье-гадание и читать сообщение.
Этап 1. Запустите Xcode и создайте новый проект
Xcode – это интегрированная среда разработки (IDE), которая сочетает в себе множество инструментов, необходимых для разработки iPhone-программ. Запустите Xcode посредством ярлыка, либо пройдите в каталог установки (стандартный путь установки: /Developer/Applications/Xcode).
Из диалогового окна выберите пункт создания нового Xcode-проекта (Create a new Xcode project).
Выберите пункт создания приложения (Application) в левой колонке iOS. Познакомьтесь с различными типами шаблонов приложений, доступных на панели контента. Это приложение будет простеньким, с одним окном, поэтому выбирайте соответствующий пункт (View-based Application) и нажмите кнопку Choose.
Введите текст «FortuneCrunch» в поле Save As для того, чтобы задать имя вашего проекта.
Шаблон проекта FortuneCrunch должен теперь отобразиться на экране.
Важно осознавать, что на данном этапе это полностью функционирующая программа. Продолжайте и, используя симулятор, запустите шаблон, нажав «Build and Run» (Создать и запустить), либо в меню выбрав пункт Build > Build and Run.
Хотя шаблон стандартного приложения довольно сырой, симулятор iPhone вовсе нет. Нажмите кнопку возвращения домой в симуляторе для того, чтобы вернуться во вкладку iPhone и немного осмотритесь. Также обратите внимание на горячие клавиши управления симулятором:
Command + стрелка влево: Повернуть устройство влево.
Command + стрелка вправо: Повернуть устройство вправо.
Ctrl + Command + Z: Эмулирует жесты (визуально это не будет отображено).
Этап 2: Запустите разработчик интерфейсов (Interface Builder) и создайте интерфейс
Стандартный интерфейс, предложенный в выбранном нами шаблоне приложения, невероятно скучный, поэтому давайте продолжим создание пользовательского интерфейса нашего приложения с печеньем-гаданием. Мы используем два изображения печенья, которые были сделаны специально для данного руководства: cookie-closed.png и cookie-crunched.png. Вы можете видеть эти файлы в приложенном к данной статье архиве (они распространяются бесплатно под лицензионным соглашением WTFPL).
После того, как у вас будут необходимые изображения печенья, запустите Interface Builder, пройдя к панели групп и файлов (Groups & Files) в Xcode, раскрыв папку ресурсов (Resources) и дважды кликнув по файлу FortuneCrunchViewController.xib.
Interface Builder представляет собой графический инструмент, который позволяет вам быстро и просто создавать разметку для вашего приложения без необходимости писать даже строки Objective-C-кода. Как видно, он также позволяет вам визуально определить отношения между объектами вроде кнопок и методов, которые вы вписываете в ваше приложение.
Есть 4 основных окна инструмента Interface Builder, о которых вам следует знать:
1. Окно XIB. Это окно называется «FortuneCrunchViewController.xib» и оно отображает нам всё, что хранится в XIB-файле, по которому вы дважды кликнули в Interface Builder. File’s Owner отображает нам положение класса FortuneCrunchViewController. Вы можете расценивать обзор (View) в окне XIB как холст для вашего однооконного приложения, а First Responder – это заглушка для объекта, определенного в runtime, который будет отвечать на события вроде прикосновений к экрану.
2. View Instance. Это окно в частности представляет собой холст для данного приложения, и вы уже должны быть знакомы с ним после запуска шаблона приложения в Этапе 1. Вы будете встречаться с этим окном, когда нам нужно будет создавать и запускать приложение. Если это окно не открыто или вы хотите открыть его снова после того, как закрыли, то его можно отобразить, дважды кликнув по иконке Вид (View) в окне XIB.
3. Library. Библиотека отображает объекты вроде кнопок, ярлыков и текстовых полей, которые вы можете использовать в окне разработки. Объекты можно создавать на холсте путем простого перетаскивания их. Для того чтобы вручную открыть библиотеку, пройдите в меню Tools > Library.
4. Inspector. Окно контроля предоставляет вам расширенный обзор атрибутов и связей между вашими объектами. Откройте окно контроля, пройдя в меню Tools > Inspector, если оно до сих пор не открыто. Обратите внимание на 4 вкладки в самом верху окна контроля: attributes, connections, size и identity (атрибуты, связи, размеры и идентификаторы).
Теперь, когда вы познакомились с конструктором интерфейсов, мы можем продолжить создание интерфейса нашего приложения.
Сначала давайте изменим цвет фона с серого на белый. Это можно сделать, выбрав окно View Instance. Окно контроля (Inspector) теперь уже должно быть заполнено информацией о параметрах. Выберите вкладку атрибутов в окне контроля, найдите атрибут фона и цветовую палитру и измените цвет на белый.
Сейчас мы создадим кнопку, которая будет представлять наше печенье. В окне библиотеки в строку поиска в самом низу впишите «UIButton».
Далее перетащите кнопку на окно положения (Instance).
Теперь нам нужно добавить изображения cookie-closed.png и cookie-crunched.png в папку ресурсов Xcode. Переключитесь обратно к основному окну Xcode и перетащите каждое изображение в папку Resources в панели групп и файлов (Groups & Files). Перед вами появится диалоговое окно. Поставьте отметку на пункте копирования элементов в папку назначения группы (Copy items into destination group’s folder), и нажмите на кнопку добавления (Add).
Переключитесь обратно к конструктору интерфейсов и выберите UIButton, созданную ранее. Используйте вкладку атрибутов в окне контроля для того чтобы изменить параметр изображения на cookie-crunched.png, а тип изображения на пользовательский (custom). Масштабируйте UIButton под размер изображения, выбрав пункт меню Layout > Size to Fit.
Сейчас у нас на экране виднеется разломленное печенье. Давайте создадим нашу «судьбу», перетащив UILabel из библиотеки на окно просмотра. Измените текст на «Happy iPhone Hacking» и используйте вкладку атрибутов в окне контроля для того, чтобы изменить размер шрифта на 12, а свойство на полужирный. Адаптируйте размер UILabel под текст и расположите элемент поверх белой бумаги так, чтобы он выглядывал поверх изображения сломанного печенья. Теперь поставьте отметку на пункте Hidden, так как нам нужно, чтобы этот ярлык отображался только после того, как пользователь прикоснется к кнопке.
Снова выберите UIButton и измените параметр изображения во вкладке атрибутов окна контроля на cookie-closed.png.
Не забудьте сохранить проделанную работу в конструкторе интерфейсов, а затем вернитесь обратно к Xcode, и создайте и запустите приложение. Теперь перед вами должна показаться кнопка в виде целого печенья.
Этап 3. Пишем код головного файла FortuneCrunchViewController
После того, как мы закончили с интерфейсом, давайте приступим к разработке Objective-C, и начнем писать код, который будет выполнять функции нашего приложения.
Вернувшись в Xcode, выберите файл FortuneCrunchViewController.h в папке Classes на панели групп и файлов. Этот файл представляет собой то, что мы понимаем под файлами «шапки» (header), интерфейса (interface) или объявления (declaration) для класса FortuneCrunchViewController. Именно здесь мы объявляем внутренние переменные, методы, протоколы и другие компоненты, которые будут использованы в классе.
Класс FortuneCrunchViewController был визуально представлен в конструкторе интерфейса в качестве «холста», на который мы перетаскивали элементы UILabel и UIButton. Сейчас нам нужно обновить классовый файл шапки, чтобы мы позже могли сослаться на эти объекты в коде.
Обновите файл шапки, внеся в него следующие изменения:
#import <UIKit/UIKit.h> @interface FortuneCrunchViewController : UIViewController { IBOutlet UIButton *fortuneCookieButton; IBOutlet UILabel *fortuneLabel; } @property(nonatomic, retain) IBOutlet UIButton *fortuneCookieButton; @property(nonatomic, retain) IBOutlet UILabel *fortuneLabel; -(IBAction)crunchCookie:(id)sender; @end
Линия 1 подразумевает под собой директиву препроцессора и сообщает препроцессору о том, чтобы сделать платформу UIKit доступной к использованию внутри класса.
Линия 3 использует @interface для заявления о том, что это определение интерфейса для класса FortuneCrunchViewController. “: UIViewController” в данной строке означает, что FortuneCrunchViewController – это дочерний класс класса UIViewController.
Линия 5 объявляет классовый указатель UIButton под названием fortuneCookieButton как IBOutlet. Тег IBOutlet не имеет никакого значения для компилятора, и используется только конструктором интерфейса для определения, какие объекты в классе могут быть соединены с их визуальным представление в XIB-файле конструктора интерфейса. Класс UIButton должен быть знаком вам из второго этапа нашего процесса разработки.
Линия 6, также как и линия 5, объявляет классовый указатель UILabel под названием fortuneLabel как IBOutlet.
Линии 10 и 11 используют заявление @property, чтобы сообщить компилятору, что fortuneCookieButton и fortuneLabel будут доступны как параметры класса, но мы будем объявлять методы для того, чтобы позже динамически осуществлять доступ к ним.
Линия 13 представляет собой сигнатуру функции для метода crunchCookie. Здесь -(IBAction) объявляет, что данный метод будет иметь тип данных IBAction, что в принципе то же самое, что и тип данных void, за исключением единственного различия в том, что IBAction делает данный метод доступным в качестве действия в конструкторе интерфейса. Заявление “:(id)sender” сообщает компилятору о необходимости принять аргумент под названием “sender” типа данных “id”. В Cocoa-Touch id представляет собой универсальный тип данных, который может выступать в роли указателя ссылки на какой-либо подкласс NSObject, и в нашем приложении вызов метода crunchCookie за счет нажатия fortuneCookieButton будет отсылать ссылку на fortuneCookieButton в виде объекта “sender”. Для нашего приложения это не обязательно, но здесь оно включено потому что, что это распространенная условность, с которой вы часто будете сталкиваться.
Наконец, линия 15 указывает на то, что это конец нашего объявления @interface.
Этап 4. Привязываем конструктор интерфейса к FortuneCrunchViewController
Обратите внимание на то, что мы объявили внутреннюю переменную и методы, которые будут использоваться нашим приложением, а также обозначили их тегами с IBOutlet и IBAction. Теперь нам нужно завершить цикл, соединив наши объекты из конструктора интерфейса с классом FortuneCrunchViewController.
Двойной клик по файлу FortuneCrunchViewController.xib снова запустит конструктор интерфейсов.
Далее кликните правой кнопкой мыши по объекту File’s Owner в XIB-контроллере. Перед вами появится блок с перечислением различных объектов в File’s Owner, которые могут быть привязаны к объектам XIB. Учтите, что view уже привязан к нам.
Нажмите на круг справа от fortuneCookieButton и перетащите его с блока File’s Owner на уже существующую UIButton на нашем холсте. Блок File’s Owner должен быть графически обновлен, и должен отображать связь между fortuneCookieButton и объектом UIButton таким же образом, как он отображает связь между объектом View и результатом view.
Теперь проделайте то же самое для соединения fortuneLabel.
Теперь нам нужно установить соединение между UIButton и нашим методом crunchCookie. Конструктор интерфейса предоставляет нам различные способы реализации этого. Кликните правой кнопкой мыши по кнопке печенья-гадания для того, чтобы перед вами появился список доступных событий.
Здесь можно выделить 2 наиболее часто используемые опции:
* Touch Down. Данная опция сообщает конструктору интерфейсов о том, что нужно запускать наш метод тогда, когда будет зарегистрирован событие нажатия пальцем по экрану.
* Touch Up Inside. Данная опция сообщает конструктору интерфейсов о том, что нужно запускать наш метод после того, как пользователь дотронулся до элемента на экране, а затем отпустил палец.
Touch Up Inside чаще используется при работе с кнопками, но в нашем случае нам нужно, чтобы печенье ломалось в момент, когда пользователь дотрагивается до него, так что мы к нашему методу crunchCookie привяжем событие Touch Down. Это можно сделать, перетащив курсоры мыши от окружности к объекту File’s Owner в окне XIB, а затем не забудьте выбрать метод crunchCookie из появившегося диалогового окна.
Сохраните работу в конструкторе интерфейса, а затем переключитесь обратно на Xcode.
Этап 5. Разработка кода файла исполнения FortuneCrunchViewController
Настроив XIB-файл нашего конструктора интерфейса, и написав класс нашего интерфейса, все, что нам осталось сделать, это создать классовые методы, которые приложение будет использовать, чтобы разломать наше печенье, отображая ярлык с текстом. Файл исполнения класса называется FortuneCrunchViewController.m, откройте его (выбрав его в папке Classes на панели групп и файлов).
Обновите код следующим образом:
#import "FortuneCrunchViewController.h" @implementation FortuneCrunchViewController @synthesize fortuneCookieButton; @synthesize fortuneLabel; // This method changes the cookie image when the button is pressed: -(IBAction)crunchCookie:(id)sender { NSLog(@"In crunchCookie"); [fortuneCookieButton setImage:[UIImage imageNamed:@"cookie-crunched.png"] forState:UIControlStateNormal]; fortuneLabel.hidden = NO; } // These methods are related to memory management: - (void)viewDidUnload { [fortuneCookieButton release]; fortuneCookieButton = nil; } -(void)dealloc { [fortuneCookieButton release]; [fortuneLabel release]; [super dealloc]; } @end
Линия 1 представляет собой директиву препроцессора, которая включает файл интерфейса перед компилированием класса.
Линия 3 стартует внедрение нашего класса.
Линия 5-6 использует заявление @synthesize для динамического создания методов для осуществления доступа и сохранения указателей объектов fortuneCookieButton и fortuneLabel, которые вы обозначили в файле header. Этот этап исключает необходимость вручную писать код методов getVariable() и setVariable для всех объектов, которые мы обозначаем.
Метод crunchCookie находится на линиях 8-12, и он представляет собой сердце нашей программы.
На линии 9-10 мы создаем новый объект UIImage используя изображение cookie-crunched.png. Затем мы вносим данный объект в метод setImage: forState: объекта fortuneCookieButton. Данный метод изменит атрибут изображения, который вы выставили вручную на cookie-closed.png в конструкторе интерфейса, на объект UIImage, который мы внесли только что. Передача сообщения – это центральный компонент языка Objective-C, и в основном следует следующему шаблону:
[myObject methodParam1:value1 methodParam2:value2];
Линия 11 осуществляет доступ к атрибуту hidden объекта fortuneLabel, и выставляет его значение на NO. Это позволит нам раскрыть наш объект ярлыка после того, как изображение обновляется на разломленное печенье.
Все оставшиеся линии кода отвечают за проблемы, связанные с управлением памяти, и это мы охватим более детально в наших следующих статьях. Дабы подытожить, когда наш view выгружается, вам нужно быть уверенными в том, что вы выпустили все объекты IBOutlet, которые были созданы. Что касается метода dealloc, то это разрушитель объектов, и запускается он тогда, когда объект должен быть уничтожен. Оба эти метода уже присутствуют в классе по умолчанию, но вам понадобится добавить к ним строки кода.
Завершив работу над кодом, мы можем сохранять, компилировать и запускать наше готовое приложение!
Завершение
Данное руководство кратко рассказывает о разработке родных приложений iPhone OS посредством Xcode, Interface Builder и iPhone SDK. Мы охватили некоторые основы данной платформы, и теперь вы наверняка чувствуете себя более уверенно в Interface Builder и Xcode.
Материал, предоставленный в данном руководстве, будет расширен в следующих статьях, где мы планируем глубже окунуться в Objective-C, Cocoa-Touch и iPhone SDK.
Скачать исходные материалыВнимание! У вас нет прав для просмотра скрытого текста.
