Несмотря на то, что мы уже многому научились в этой серии по разработке под iOS, я уверен, что вы готовы начать создавать приложения для iOS, которые делают что-то классное или полезное. В этом уроке ваше желание исполняется. Используя XCode, вы создадите проект iOS с нуля, измените исходный код проекта и запустите свое приложение на iOS Simulator или на физическом устройстве.
цветистый
Colorific — это название приложения, которое мы собираемся создать. Идея Colorific проста: каждый раз, когда пользователь касается экрана устройства, цвет экрана меняется. Несмотря на то, что концепция является базовой, Colorific идеально подходит для начала и изучения преимуществ разработки под iOS.
1. Создайте новый проект Xcode
Как мы видели ранее в этой серии, каждое iOS-приложение проходит через проект Xcode. Что такое проект Xcode? Проект XCode — это контейнер или репозиторий, содержащий файлы, ресурсы и информацию, необходимые для создания одного или нескольких продуктов.
Обратите внимание, что это не ограничивается исходным кодом и активами проекта, такими как изображения и другие медиафайлы. Проект также отслеживает связи между различными элементами и знает, как создать конечные продукты из своих элементов.
Запустите Xcode и создайте новый проект Xcode, выбрав New> Project … в меню File . Альтернативным вариантом является нажатие клавиш Shift + Command + N
Если при запуске Xcode открывается окно приветствия Xcode, я предлагаю закрыть его, чтобы вы узнали, как создать новый проект с помощью меню Xcode.
2. Выберите шаблон приложения
Начать работу с новым приложением или проектом в Xcode легко благодаря шаблонам приложений, которые поставляются с ним. Для приложения, которое мы собираемся создать, нам нужен шаблон приложения Single View . Не стесняйтесь взглянуть на другие шаблоны приложений, но обязательно выберите шаблон приложения Single View для Colorific.
3. Настройте проект
После выбора шаблона приложения Single View и нажатия кнопки « Далее» XCode предоставляет вам список опций, позволяющих вам настроить новый проект. Давайте посмотрим на различные варианты.
- Название продукта: название продукта будет названием вашей заявки. Я назвал свое приложение Colorific, но не стесняйся называть свое приложение как угодно.
- Название организации. Название организации может быть вашим собственным именем или названием вашей компании. Xcode использует название организации для различных целей, таких как добавление уведомления об авторских правах в каждый исходный файл.
- Идентификатор компании. Идентификатор компании — это уникальная строка, которую XCode использует (вместе с названием продукта) для создания идентификатора пакета приложения. Apple рекомендует принять соглашение об именовании обратного домена, чтобы сделать его уникальным. Обратите внимание, что используемый вами домен не связан с DNS-системой или доменными именами в Интернете. Например, моя компания называется Code Foundry и находится в Бельгии, что означает, что моей компанией является be.codefoundry . Однако я также мог бы использовать be.code-foundry или com.codefoundry . Для целей данного руководства я установил идентификатор компании com.tutsplus .
- Идентификатор пакета : даже если вы не можете указать идентификатор пакета при создании нового проекта XCode, вы можете изменить его после создания проекта. По умолчанию идентификатор пакета представляет собой комбинацию идентификатора компании и названия продукта. Имейте в виду, что пробелы в имени продукта заменяются черточками в идентификаторе пакета, поскольку идентификатор пакета не должен содержать пробелов.
- Префикс класса: при создании пользовательских классов в вашем проекте важно, чтобы имена классов не конфликтовали с существующими именами классов. Указав префикс класса, Xcode будет префикс новых классов с этим пользовательским префиксом класса, чтобы обеспечить предотвращение конфликтов имен. Обычный подход заключается в использовании ваших инициалов, BJ в моем случае или комбинации, которая относится к вашей компании или организации, такой как TSP для Tuts +.
- Устройства: в текущей версии XCode (5.1 на момент написания) раскрывающееся меню устройств содержит три параметра: iPad, iPhone и Universal. Эта опция конфигурации сообщает Xcode, на какие устройства нацелен ваш проект. Выбрав последний вариант, Universal , ваш проект будет нацелен на семейство устройств iPad и iPhone. IPod Touch является членом семейства устройств iPhone, как вы уже догадались.
Теперь вы должны хорошо понимать различные параметры конфигурации при настройке нового проекта XCode. Для этого проекта я рекомендую использовать параметры, показанные на скриншоте выше. Обратите внимание, что большинство параметров можно легко изменить после создания проекта. Нажмите кнопку « Далее» , когда закончите настройку проекта.
4. Сохраните проект
На следующем шаге Xcode спросит, где вы хотите сохранить ваш новый проект. Возможно, вы заметили маленький флажок внизу окна с надписью Создать репозиторий git на Моем Mac . Серый текст под флажком гласит: Xcode поставит ваш проект под контроль версий .
Как я упоминал ранее в этой серии, контроль исходного кода незаменим при разработке программного обеспечения. Эта серия не будет подробно освещать эту тему, но если вы серьезно относитесь к разработке программного обеспечения, я настоятельно рекомендую ознакомиться с системой контроля версий.
Git — самая популярная система управления исходным кодом в сообществе какао. Однако вполне возможно использовать другую систему SCM, например SVN или Mercurial.
Укажите Xcode, где вы хотите сохранить свой проект, установите флажок, чтобы авторизовать Xcode для создания git-репозитория для проекта, и нажмите кнопку « Создать» .
5. Изучение пользовательского интерфейса XCode
Прежде чем мы продолжим, я хочу потратить несколько минут на изучение пользовательского интерфейса Xcode. Вы можете увидеть четыре отдельных области:
- панель инструментов вверху
- боковая панель слева
- главный вид в центре
- боковая панель справа
Панель инструментов
Панель инструментов в верхней части содержит кнопки и меню, которые вы часто используете. Как мы видели ранее в этой серии, кнопки для запуска и остановки приложения находятся на панели инструментов.
Дисплей в центре панели инструментов похож на дисплей в iTunes. Он отображает информацию о состоянии вашего проекта, например, он сообщит вам, когда сборка будет успешной или неудачной.
Два сегментированных элемента управления в правой части панели инструментов можно использовать для настройки пользовательского интерфейса XCode. Поиграйте с различными элементами управления, чтобы узнать, как каждый из них меняет пользовательский интерфейс XCode.
навигатор
Основное назначение левой боковой панели — навигация, и ее часто называют навигатором XCode.
В навигаторе есть разные вкладки, а навигатор проекта находится слева. Выбор в левой боковой панели определяет, что отображается в главном представлении Xcode, рабочей области.
Главный вид или рабочая область
Главный вид или рабочее пространство — это область, где вы проводите большую часть своего времени. Это рабочая лошадка Xcode, которая отображает все, что выбрано в навигаторе.
Инспектор
В то время как левая боковая панель контролирует то, что отображается в главном представлении XCode, содержимое правой боковой панели отражает то, что отображается или выбирается в главном представлении.
Правая боковая панель, также известная как инспектор , адаптируется к тому, что пользователь выбирает на главном экране.
6. Изучение проекта
Пришло время взглянуть на сам проект. Содержимое проекта отображается в Навигаторе проектов , первой вкладке на левой боковой панели. Выберите первый элемент в Навигаторе проекта, чтобы увидеть детали проекта в главном представлении.
Основной вид состоит из двух разделов: боковой панели слева и подробного вида справа. На боковой панели вы видите два элемента: ваш проект с одним элементом и цели с двумя элементами.
Рано знать, в чем разница между проектом и целью. Как я упоминал ранее, проект — это хранилище для файлов, ресурсов и данных, необходимых для создания одного или нескольких продуктов. Однако цель относится к одному из этих продуктов. Цель содержит необходимые инструкции для создания продукта с использованием ресурсов проекта. Это означает, что проект может содержать несколько целей для создания нескольких продуктов. Как видите, проект Xcode — это больше, чем просто папка с кучей файлов в нем.
7. Построй и беги: возьми 1
Прежде чем мы начнем изменять исходный код проекта, может быть интересно создать и запустить новый проект, чтобы увидеть, что шаблон приложения дал нам бесплатно. Нажмите кнопку « Выполнить» в левом верхнем углу и убедитесь, что активная схема настроена для запуска приложения в симуляторе iOS, выбрав iPhone Retina (4 дюйма) .
Если все прошло хорошо, iOS Simulator должен запустить ваше приложение и отобразить пустой белый вид со знакомой строкой состояния вверху.
8. Изменить пользовательский интерфейс
Давайте запачкаем руки и изменим пользовательский интерфейс приложения. Откройте Навигатор проекта и выберите файл с именем Main.storyboard . Файл с расширением .storyboard является файлом пользовательского интерфейса. В этом файле мы создаем пользовательский интерфейс приложения.
Раскадровка содержит один элемент, контроллер представления с белым видом, который вы видели в iOS Simulator несколько минут назад. Рабочая область состоит из боковой панели, показывающей объектное представление сцен раскадровки. Большая часть рабочей области содержит сцены или пользовательский интерфейс приложения.
Выберите объект с именем View в View Controller Scene на левой боковой панели и посмотрите, как рабочее пространство и правая боковая панель обновляют свое содержимое. Куча вкладок появляется в верхней части правой боковой панели. Каждая из вкладок содержит набор атрибутов, связанных с объектом с именем View .
Нижняя половина правой боковой панели содержит раздел с четырьмя вкладками. Третья вкладка представлена изображением трехмерного блока. Это поле показывает, как объекты обычно отображаются в XCode.
Нажмите на вкладку со значком поля и прокрутите список, который появляется. Список называется библиотекой объектов и содержит различные элементы пользовательского интерфейса, такие как кнопки, ползунки и переключатели.
В начале этого урока я говорил вам, что мы собираемся создать приложение с некоторой интерактивностью пользователя. Пользователь должен иметь возможность касаться экрана, чтобы изменить его цвет.
Обнаружение касаний в приложении iOS может быть сделано несколькими способами. Одним из решений является использование кнопки. В библиотеке объектов найдите элемент с именем UIButton и перетащите его из библиотеки объектов в белый вид в рабочей области XCode.
Пользователь должен иметь возможность касаться любой части экрана, а это означает, что кнопка должна охватывать весь экран. Вы заметили шесть крошечных квадратов по краям кнопки? Перемещая крошечные квадраты, вы можете изменить размеры кнопки.
Отрегулируйте размер кнопки, чтобы она покрывала весь экран. Не беспокойтесь о строке состояния в верхней части экрана.
Вид за кнопкой — это вид, который меняет цвет, когда пользователь касается экрана. На данный момент кнопка блокирует представление от представления пользователя, поэтому нам нужно изменить атрибуты кнопки.
Возможно, вы заметили, что кнопка была добавлена в список объектов на левой боковой панели, под объектом с именем View . Выберите кнопку из списка объектов и выберите « Инспектор атрибутов» на правой боковой панели — четвертую вкладку слева. Нам нужно только сделать две корректировки.
Начните с изменения типа кнопки с System на Custom . Это сделает кнопку прозрачной.
Второе изменение, которое нам нужно сделать, это сообщить пользователю, что делать, изменив заголовок кнопки. Текстовое поле рядом с надписью Заголовок в настоящее время читает кнопку . Измените это на Tap, чтобы изменить цвет и установите цвет текста на черный, чтобы он был читабельным.
9. Добавьте действие в контроллер вида
Если вы знакомы с шаблоном MVC ( M odel- V iewController), то у вас есть преимущество в освоении разработки под iOS. Шаблон MVC — это шаблон, который можно найти во многих языках и средах, таких как Ruby on Rails и CodeIgniter.
Представление в нашем пользовательском интерфейсе относится к категории V в шаблоне MVC. Представление контролируется контроллером. Посмотрите на имена файлов в Project Navigator слева. Файлы представляют контроллер представления, который контролирует представление в нашем пользовательском интерфейсе.
Что делает контроллер представления? Контроллер представления может делать все, что вы хотите, но он в первую очередь отвечает за обработку всего, что происходит в представлении, которым он управляет. Это включает, например, прикосновения от пользователя. Если пользователь касается кнопки в представлении, контроллер должен обработать событие касания.
Как мы справляемся с сенсорным событием? В случае нашей кнопки мы добавляем действие в контроллер представления. Действие — это причудливое название метода. Что такое метод? В основе метода лежит функция C. Подождите. Какая? Не стоит слишком беспокоиться о терминологии. Следующие два поста будут охватывать C и Objective-C более подробно. Необходимо помнить, что метод подобен методу в Ruby и PHP или функции в JavaScript.
Если вы вызываете метод контроллера, он что-то делает в ответ. Другими словами, если пользователь касается кнопки и мы подключаем метод к этому событию касания, то контроллер будет что-то делать в ответ на это событие касания.
Чтобы добавить действие в контроллер представления, который управляет представлением в нашем пользовательском интерфейсе, нам нужно внести некоторые изменения в файл с именем TSPViewController.h . Файлы с расширением .h являются заголовочными файлами . Заголовочный файл контроллера представления содержит информацию о контроллере представления — точнее, классе контроллера представления. Нам нужно только добавить одну строку кода в заголовочный файл. Посмотрите, как я изменил заголовочный файл контроллера представления.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
//
// TSPViewController.h
// Colorific
//
// Created by Bart Jacobs on 27/03/14.
// Copyright (c) 2014 Tuts+.
//
#import <UIKit/UIKit.h>
@interface TSPViewController : UIViewController
— (IBAction)changeColor:(id)sender;
@end
|
Хотя мы не будем фокусироваться на синтаксисе в этом уроке, довольно легко понять, что происходит. Имя действия или метода — changeColor: него есть один аргумент — sender . Тип аргумента — id , что означает любой объект. Какие объекты снова? Терпение кузнечика. Действие заканчивается точкой с запятой.
10. Осуществить действие
Мы добавили действие к контроллеру представления, но это действие мало что делает. Что мы сделали, так это объявили действие . Это просто означает, что любая часть приложения, которая получает пик в заголовочном файле контроллера представления, также знает, что у нее есть действие с именем changeColor: Это как ресторан, предлагающий вам меню. Вы можете увидеть, что он может предложить, но он не показывает, как выглядит или на что похож каждый пункт меню.
Что нам нужно сделать, это реализовать действие, и мы делаем это в файле реализации контроллера представления. Это верно. Файл с расширением .m является файлом реализации. Выберите файл с именем TSPViewController.m и посмотрите его содержимое.
Вы ожидали, что это будет пусто? Xcode дал нам некоторый шаблонный код, который является общим для контроллеров представления. Приятной особенностью Objective-C является то, что он имеет очень удобочитаемые имена методов. Разработчики часто жалуются, что имена методов длинные, но преимущество в том, что вы знаете, что делает метод, просто взглянув на его имя.
Для реализации действия changeColor: мы копируем то, что написали в заголовочном файле, и заменяем конечную точку с запятой открывающей и закрывающей фигурной скобкой.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
//
// TSPViewController.m
// Colorific
//
// Created by Bart Jacobs on 27/03/14.
// Copyright (c) 2014 Tuts+.
//
#import «TSPViewController.h»
@interface TSPViewController ()
@end
@implementation TSPViewController
— (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
— (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
— (IBAction)changeColor:(id)sender {
}
@end
|
Я добавил содержимое всего файла реализации, чтобы вы могли видеть, куда следует добавить реализацию метода. Это должно быть после @implementation TSPViewController и до последнего @end . Также обратите внимание, что он не может быть вложен в реализацию другого метода.
Пришло время сделать что-то полезное в наших действиях. Я не буду подробно объяснять каждую строку кода, но я дам вам суть происходящего.
|
1
2
3
4
5
6
7
8
9
|
— (IBAction)changeColor:(id)sender {
int r = arc4random() % 255;
int g = arc4random() % 255;
int b = arc4random() % 255;
UIColor *color = [UIColor colorWithRed:(r/255.0) green:(g/255.0) blue:(b/255.0) alpha:1.0];
[self.view setBackgroundColor:color];
}
|
Как вы, возможно, знаете, можно разбить цвет на три основных цвета: красный, зеленый и синий. В нашем действии мы генерируем три случайных числа от 0 до 255 и используем эти числа для создания случайного цвета.
Метод, который мы используем для создания цвета, очень описательный, colorWithRed:green:blue:alpha: В последней строке нашего действия мы установили цвет фона представления в нашем пользовательском интерфейсе на этот новый, случайно сгенерированный цвет.
Само слово относится к контроллеру представления. Не волнуйтесь, если ничего из этого не имеет смысла. Это станет более понятным, как только мы рассмотрим основы C и Objective-C в следующих уроках.
Комментарии важны при написании кода. Вы changeColor: комментарии, которые я добавил к реализации changeColor: Однострочные комментарии начинаются с двух косых черт ( // ), тогда как многострочные комментарии начинаются с /* и заканчиваются */ .
11. Подключите действие
Метод реализован, но ничего особенного не произойдет, когда мы создадим и запустим приложение. Попробуйте, если не верите мне.
Чего не хватает, так это связи между кнопкой и действием контроллера представления. Как контролер представления должен знать, что действие changeColor: должно быть changeColor: при нажатии кнопки?
Сделать это просто. Откройте раскадровку, выбрав файл с именем Main.storyboard и выберите объект View Controller в представлении View Controller Scene .
Выбрав объект View Controller , откройте инспектор соединений на правой боковой панели — первой вкладке справа. Если вы правильно выполнили эти шаги, вы должны увидеть наше новое действие в разделе « Полученные действия» .
Вы должны увидеть пустой кружок справа от действия changeColor: . Нажмите и перетащите из круга на кнопку в нашем пользовательском интерфейсе.
Когда вы отпустите кнопку мыши, появится меню. Всплывающее меню содержит список типов сенсорных событий. Событие касания, которое нас интересует, называется Touch Up Inside . Это событие срабатывает, когда пользователь касается кнопки и поднимает палец. Это наиболее распространенное поведение большинства кнопок.
После подключения кнопки и действия вы увидите, что правая боковая панель отражает только что установленное соединение. Отлично. Вы успешно завершили свое первое реальное заявление.
12. Построй и беги: возьми 2
Создайте и запустите приложение в iOS Simulator и начните нажимать на экран симулятора. Каждый раз, когда вы нажимаете на экран, его цвет должен меняться на новый, случайный цвет. Как это круто?
Вывод
Мы рассмотрели много вопросов в этом уроке. Несмотря на то, что этот пост был довольно длинным, мы на самом деле не очень много делали. Если вы знаете теорию, вы можете создать Colorific менее чем за пять минут.
В следующих двух постах я расскажу об основах C и Objective-C. Это подготовит вас к интересным вещам в остальной части серии.