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

Документация, представленная Apple, предназначена для людей с техническим образованием. Книги по iPhone и IPad  подразумевают, что вы имеете представление об Objective-C. Многочисленные онлайн-учебники отличаются по качеству, многие из них содержат уже устаревшую и неактуальную информацию.

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

Результат будет выглядеть вот так:

Переходим на родные

Говоря о родном приложении для IOS, мы имеем в виду использование Apple Software Development Kit (SDK) и языка программирования Objective-C для создания приложения. Прежде чем узнать, как это сделать, стоит отметить, почему мы хотели бы сделать приложение таким образом, чтобы возможно было создать его альтернативный вариант под другие платформы.

В представленных нормативах в сентябре 2010 года компания Apple упростила программистам создание приложений для своих устройств, позволяя использовать сторонние библиотеки, и такие знакомые языки как  HTML, CSS и JavaScript. Примерами таких инструментов являются Appcelerator’s Titanium, Nitobi’s PhoneGap (приобретенный Adobe в 2011) и appMobi’s XDK. В дополнение к выгодам от использования более привычных веб-языков, таких как HTML, CSS и JavaScript, у авторов программ появилась возможность адаптировать их под другие платформы, например Android и BlackBerry, с минимальным переписыванием исходного кода.

 

Недостаток использования сторонних инструментов заключается в том, что в результате приложение не будет столь же эффективным, как первоначальный вариант, написанный автором для устройств Apple. Соответственно, все новейшие возможности операционной системы и аппаратного обеспечения не будут доступны. Каждая система также имеет свою довольно обширную библиотеку функций, которые должны быть изучены наряду с отличительными особенностями каждой из систем, ошибками и способами их устранения. Кроме того, чтобы выложить свое приложение в App Store, вам нужно использовать Xcode от Apple. Это приложение используется для работы с IOS SDK, поэтому минимальное знакомство с родными процессами все-таки необходимо.

Возможен также и третий вариант — использование сторонних программ, таких как  Cocos 2D для iPhone и PugPig. Они позволят вам соединить исходные данные с проектом  Objective-C для конкретной цели. Например, для создания игры или приложения. Чтобы воспользоваться этим способом, да и любым другим, вам необходимо базовое понимание SDK.

Поэтому, если вы заинтересованы в разработке приложений для iPhone, iPod и iPad, и вы понимаете, что какой бы вариант работы вы ни выбрали, писать код придется вам самому, первое, что необходимо сделать, это начать разбираться в родном SDK.

Как начать

Вам понадобятся две вещи, чтобы начать работу с IOS SDK:

• Mac, с последней версией OS X (в настоящее время не существует вариантов написания приложения для IOS на Windows или Linux, хотя, существуют  обходные пути);
• Приложение Компании Apple Xcode.

Получить Xcode можно, скачав его с Mac App Store. Это бесплатно, но весит он почти 1,5 ГБ и процесс установки может занять около получаса. Так что вам придется выделить время на его скачивание и установку.

Подготовка графики

В ожидании завершения загрузки, мы можем рассмотреть вопрос о том, как вы могли бы подготовить и экспортировать графику для IOS с использованием Photoshop.

Из-за того, что все IOS приложения имеют одну из двух возможных плотностей пикселей (стандартный или Retina), вы должны работать в Photoshop, чтобы вам не пришлось разрабатывать графику дважды. Под графикой подразумевается: создание кнопок и элементов интерфейса с использованием векторной формы и слоев, и использование смарт-объектов изображений там, где это возможно. Рекомендуемый подход предполагает сначала работу на Retina дисплее, а потом увеличение всех объектов в размере до стандартного разрешения. Правда, иногда свертывание дает плохие результаты.

Множество шаблонов уже готовых элементов для IOS доступно в Интернете. Компания Teehan + Lax, предлагает один из популярных и широко используемых вариантов. Кроме того, что готовые шаблоны избавляют вас от необходимости писать некоторые элементы самостоятельно, они также показывают, сколько места осталось для контента, и таких элементов как статус, навигация и панель инструментов и прочего.

Чтобы создать новый документ iPhone в графическом редакторе, вам понадобятся вот эти настройки:

• 640 × 960 пикселей,
• 72 DPI,
• RGB.

Это вариант для iPhone 4, 4S и IPod Touch четвертого поколения. Для старых устройств действует вариант  320 × 480, и это ровно половина от первоначального размера.

Если вы пишете программу для iPhone 5, то вам также потребуется создать документ с новым 640 × 1136 размером.

Для изучения дополнительной информации о дизайне для IOS, смотрите статью Марка Эдвардса “Проектирование для iPhone 4 Retina Display“.

Некоторые Quick Image Экспорт Tips

Несколько советов по быстрому экспорту изображений

• IOS принимает ряд форматов изображений, но рекомендованный формат – PNG, поскольку он поддерживает альфа-прозрачность.
• Графика для кнопки должна быть, в большинстве случаев, экспортирована только в качестве фонового изображения, без сопроводительного текста. Потому что в этом случае возможны локализация (на разных языках), доступность и изменения размера текста с Retina на экран со стандартным разрешением.
• Экспортируя графические кнопки, убедитесь, что пиксели кнопки расположены в центре кадра экспортируемого изображения, потому что Interface Builder не дает вам контроль над расположением кнопки фоновых изображений или текста на переднем плане. Возможно, вам придется вручную компенсировать падение тени на противоположную сторону.
• Там, где это возможно, сглаженные элементы дизайна следует создавать из нескольких слоев в одном файле изображения. Восстановление слоистых компонентов пользовательского интерфейса в Interface Builder может быть проблемным; плюс, сокращение количества ресурсов поможет вашему приложению работать быстрее, и занимать меньшее количество оперативной памяти. Только компоненты интерфейса, которые реагируют на действия пользователя, и только те компоненты, которые будут контролировать приложение, должны быть экспортированы в виде отдельных файлов.
• Вам нужен будет Retina экран, и стандартные версии каждого экспортируемого изображения. Всем им следует дать одинаковые имена, с @2xsuffix для Retina версии, например вот так:

1. image.png
2. image@2x.png

• Вы можете использовать мои SuperSlicr Photoshop action (входит в комплект) для автоматизации масштабирования и экспорта элементов из ваших PSD файлов
• Каждая пара изображений, которые Вы создаете, должна быть названа уникальным именем, так как они будут храниться одном и том же каталоге. Имена файлов должны иметь только буквенно-цифровые знаки (без каких-либо других символов) и подчеркивания и дефисы вместо пробелов. Можно использовать заглавные буквы.
• Photoshop не очень подходит для сжатия PNG файлов, так что лучше пропустить их через porneL в ImageOptim чтобы уменьшить их размер перед импортом в Xcode. Xcode будет также пытаться применять свое собственное сжатие для импортированных изображений, увеличивая при этом размер файла, но эту функцию можно заблокировать.

Обзор XCODE

Вы успешно установили Xcode? Отлично!

Теперь вам нужно скачать и распоковать архив шаблонов. Архив включает в себя PSD, PNG и необходимый начальный код.

В пакете, перейдите в папку, под названием  Begin Here. Далее вам нужно локализовать документ Xcode под названием Portfolio.xcodeproj. Дважды кликните по этому файлу, чтобы открыть его в Xcode.

После загрузки документа, нажмите на синий значок слева, под названием Portfolio, 1 target, iOS SDK, и перед вами появится график проекта в главном интерфейсе Xcode, как показано ниже. Позже мы подробнее рассмотрим его содержание в деталях.

Область навигатора слева, тут расположены все файлы, уже связанные с вашим проектом. Они могут быть расширены с помощью голубой иконки. В основном нас будут интересовать файлы, которые содержатся в желтой папке, под названием Portfolio или «группа». Тут расположены три типа файлов:

• .h A “header” (или интерфейс)
• .m A “message” (или реализация)
• ..xib An “XML interface builder, который иногда называют NIB.

Область «Редактора» будет меняться в зависимости от того, какую задачу выполняет программа. Так как сейчас мы выбрали область с документами голубой иконки в навигаторе, мы видим на экране « Target Summary». Перед нами появляются некоторые базовые опции для нашего приложения, в том числе типы устройств, IOS версии и варианты дисплея, которые должны поддерживать наше приложение. Мы также можем указать изображение для использования в качестве иконки нашего приложения, это мы рассмотрим чуть позже.

Кликните один раз на TestAppDelegate.m. Редактор превращается в редактор кода и отображает код, содержащийся в этом файле.

А сейчас кликните по MainWindow.xib в навигационной области. Редактор будет отображать Interface Builder, интегрированный графический пользовательский интерфейс (GUI) для сборки воедино вашего приложения.

Область «Inspector» имеет несколько вкладок управления в верхней части, с которыми вы должны быть уже знакомы. Последние четыре являются наиболее важными:

Еще один важный момент — это большая кнопка “Run” в верхнем левом углу Xcode. Нажав на нее, вы скомпилируете код проекта в приложение, а затем запустите его в симулятор IOS, после этого вы сможете увидеть, работает ли он без загрузки на реальном устройстве. Если вы нажмете эту кнопку сейчас, то запустится симулятор. И перед вами появится большой виртуальный iPhone.

Симулятор работает аналогично реальным устройствам. Существуют игры, в которых можно увидеть, как он себя ведет. В разделе меню «Оборудование» вы можете выбрать различные устройства и IOS версий, а также моделирования вращения и встряхивания устройства. Блокировка alt позволяет работать с масштабом. С помощью основных кнопок вы сможете работать с версиями мобильного Safari (который, кстати, отлично подходит для тестирования локально размещенных сайтов).

Более подробное руководство по интерфейсу доступно на Xcode 4.

Импорт графики в Xcode

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

Для импорта изображений в ваш проект, выберете папку «Images» и опцию  «Add Files to ‘Portfolio».

Выберете папку «PNGs» среди скачанных файлов, и выберите все изображения. Выберете опцию «Copy items into destination group’s folder», а затем нажмите кнопку «Add».

Изображения импортированы в ваш проект и доступны для Xcode и Interface Builder. Вы можете добавить больше графики в папку «Images», следуя этой же процедуре.

Редакция шаблона без написания кода

Среди разработчиков IOS идет дискуссия о том, следует ли создать приложение только с помощью кода или XIB файлов, созданных с помощью Interface Builder и его GUI. Оба метода поддерживаются Apple, и каждый из них требует индивидуального подхода. Разработчики, которые не одобряют использование Interface Builder, не замечают мощность этого инструмента, которая позволяет эффективно создать структуру и внешний вид нашего приложения. Для дизайнеров, которые используют для работы Adobe Creative Suite, не будет ничего нового. Поэтому мы будем использовать Interface Builder.

Во-первых, мы будем смотреть на разработку приложения с разных экранов, переключение, которых возможно с помощью панели управления. Нажмите на MainWindow.xib в навигаторе проекта, чтобы активировать Interface Builder. В библиотеке выберите на панели инструментов иконку «Show» (ту, которая похожа на куб), и прокрутите список объектов, пока не найдете «View Controller».

Разверните док с помощью функции «Expand document outline», а затем перетащите экземпляр объекта View Controller из библиотеки в «Tab Bar Controller». Расширьте «The Tab Bar Controller», с указанием вложенного View Controller.

Повторите эту процедуру еще два раза, пока у вас не появится три варианта View Controllers с вложенным «Tab Bar Controller». Холст области также должен показывать Tab Bar, с тремя безымянными закладками.

Если вам интересно, то «View» и «Controller» являются частью «Model View Controller» (MVC). Этот подход в программировании, который отделяет данные приложения, чтобы упростить работу разработчику. «Model» относится к фоновому аспекту, управляющему данными. «View» относится к внешнему пользовательскому интерфейсу. «Controllers» своего рода мост, связующий разные компоненты вашего приложения. В этой статье мы не будем говорить о базах данных, поэтому будем пропускать встречающиеся нам «View» и соответствующие им «Controllers».

Создание классов

Нам нужно создать несколько «классов» для генерации каждого «View». А так как статья рассчитана на новичков в программировании, это действие требует пояснения.

В объектно-ориентированных языках программирования, таких как Objective-C, классы используются как способ определения элементов внутри приложения. Класс определяет качества (или свойства) объекта.  Класс может сформировать один или несколько экземпляров объекта на основе этого определения, и эти экземпляры используются, чтобы заставить ваше приложение работать.

Каждый из трех «View», которые мы хотим создать, являются объектами, поэтому нам нужно создать несколько классов.

Для добавления нового класса Controller View кликните по папке «Портфолио» в навигаторе и выберите «Создать файл» из контекстного меню. На боковой панели выберите «Cocoa Touch», затем «Objective-C».

Выберете «Next». Затем введите «HomeViewController» в поле «класс», выберите «UIViewController» в раскрывшемся поле «Subclass of». Убедитесь, что напротив опции «With XIB for user interface» стоит галочка.

Сохранить  действие вы можете, нажав «Next». Выберите папку «Begin Here > Portfolio», а затем нажмите кнопку «Создать».

Повторите эту процедуру для двух других файлов, выставьте название для каждого класса «PortfolioViewController» и «ContactViewController».

Вы можете изменить порядок файлов в навигаторе с помощью перетаскивания. Это должно выглядеть примерно так:

Настройка вкладок

 Вернитесь в MainWindow.xib. Выберите первую иконку в документе. Выберите «HomeViewController» в раскрывшемся меню.

Теперь перейдите к «Attributes inspector». Введите тип «Home» в поле «Title» и выберите пункт «HomeViewController», как название NIB.

Разверните «View Controller» в документе и выберите его «Tab Bar Item».  В «Attributes inspector», установите название, как в «Home», и выберите в меню tab-icon-home.png. Вам не нужно устанавливать @2x Retina версию при выборе изображения в Xcode, потому что она устанавливается автоматически при запуске приложения.

Повторите описанную выше процедуру для разделов Portfolio и Contact, выбирая соответствующие классы, названия и файлы изображений.

Цвет, которым выделяются панели вкладок можно менять, в меню «Tab Bar» выбрав «Image Tint». Пользовательские оттенки будут отображаться только в устройствах под управлением IOS 5 или выше, IOS 4 и ниже будет по умолчанию показывать синий цвет.

Итак, мы установили все наши вкладки! Чтобы убедиться, что они работают должным образом, мы должны добавить немного фиктивного контента.

Выбираем HomeViewController.xib в навигаторе, а затем перетаскиваем «Label» из библиотеки (в верхней части списка) в представляемый холст. Двойной клик по ярлыку на холсте позволит вам изменить текст. Измените его на “Home”.

Пов …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров