Думаю, все знакомы с эмуляторами ударных установок. Сделать такое приложение довольно просто. В этой статье мы создадим Bickboxx — реальное приложение из App Store.

Если хотите получить представление о том, чем мы займемся, скачайте Bickboxx из App Store (бесплатно). Исходный код можно скачать здесь. Его можно свободно загружать, сообщать о найденных проблемах — вплоть до создания собственных версий с изменениями, которые считаете целесообразными.

Примечание: для работы с уроком исходный код скачивать необязательно. Все скриншоты кликабельные.

Начинаем.

Создайте в XCode новый проект на основе представления (View-based) и присвойте ему имя "Bickboxx".



Загрузите zip-архив http://a.theappleblog.com/downloads/BickboxxAssets.zip и распакуйте его. В нем все, что понадобится для приложения Bickboxx — звуки, изображения и пиктограммы. Все эти файлы перетащите в папку "Resources".



Чтобы скопировать объект в папку проекта, пометьте флажком опцию "Copy items into destination group’s folder (if needed)". Настройки должны выглядеть так, как на рисунке. Подтвердите кнопкой "Add".

Добавление фона в Interface Builder.

Двойным щелчком на файле BickboxxViewController.xib откройте его в редакторе IB. Перетащите объект Image View (UIImageView) из библиотеки Library в окно View, получив заполнитель для фона.



Откройте окно "Attributes Inspector". Для элемента "Image" выберите из списка опцию "Background.png".

Создание кнопки в IB.

В окно "View" перетащите элемент "Round Rect Button (UIButton)".


Перейдите в окно "Attributes Inspector". Кнопка в виде несимпатичного белого прямоугольника не интересует: из раскрывающегося меню "Type" выберите вариант "Custom".



Ниже в том же окне установите для состояния кнопки вариант "Normal" (или "Default State Configuration" — в зависимости от версии Xcode). Так будет выглядеть кнопка в состоянии бездействия.


В поле "Image" выберите в качестве изображения кнопки вариант "B Inactive.png". Отрегулируйте размер кнопки в окне View так, чтобы она отображалась полностью.



Теперь измените состояние кнопки на вариант с подсветкой "Highlighted" (или Highlighted State Configuration в зависимости от версии Xcode). Так будет выглядеть кнопка при нажатии.



В качестве изображения в поле "Image" выберите "B Active.png".

Перетащите в окно View еще одну кнопку Round Rect Button (UIButton) и повторите все операции с буквами "E", "А" и "Т". Теперь представление "View" должно выглядеть так:



Пока редактор IB можно закрыть.

Выполнив "Build and Go", убедитесь, что пока все работает. При касании кнопок они должны подсвечиваться.

Добавляем код звука.

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

Удерживая нажатой клавишу <Control>, щелкните по папке "Frameworks" слева. Перейдите в меню "Add → Existing Frameworks...".



В папке "/System/Library/Frameworks" найдите "AudioToolbox.framework".



Щелкните на кнопке OK и добавьте объект к проекту.
Откройте "BickboxxViewController.h" и вставьте в файл следующий код:

#import
#import

@interface BickboxxViewController : UIViewController {
CFURLRef    bNoteFileURLRef;
SystemSoundID  bNoteFileObject;
CFURLRef    eNoteFileURLRef;
SystemSoundID  eNoteFileObject;
CFURLRef    aNoteFileURLRef;
SystemSoundID  aNoteFileObject;
CFURLRef    tNoteFileURLRef;
SystemSoundID  tNoteFileObject;
}

@property (readwrite)  CFURLRef    bNoteFileURLRef;
@property (readonly)  SystemSoundID  bNoteFileObject;
@property (readwrite)  CFURLRef    eNoteFileURLRef;
@property (readonly)  SystemSoundID  eNoteFileObject;
@property (readwrite)  CFURLRef    aNoteFileURLRef;
@property (readonly)  SystemSoundID  aNoteFileObject;
@property (readwrite)  CFURLRef    tNoteFileURLRef;
@property (readonly)  SystemSoundID  tNoteFileObject;

@end

* This source code was highlighted with Source Code Highlighter.

Вверху мы ссылаемся на "AudioServices.h" из импортированной ранее структуры "AudioToolbox".

Ниже — декларация свойств для четырех звуков, соответствующих клавишам "B", "E", "A" и "T"
"bNoteFileURLRef" — ссылка на расположение файла для bNoteFileObject. Этот звук будет воспроизводить клавиша "B".
Там же прописаны параметры для звуков "E", "A" и "T".

Файл BickboxxViewController.m

Откройте "BickboxxViewController.m" — здесь необходимо синтезировать для параметров getter'ы и setter'ы.

Для этого после "@implementation BickBoxxViewController" добавим следующий код:

@synthesize bNoteFileURLRef, bNoteFileObject, eNoteFileURLRef,
eNoteFileObject, aNoteFileURLRef, aNoteFileObject,
tNoteFileURLRef, tNoteFileObject;

* This source code was highlighted with Source Code Highlighter.

Меняем метод viewDidLoad.

Найдите метод "viewDidLoad" — он закомментирован. Для активации знаки комментария нужно удалить.

Метод "viewDidLoad" вызывается после создания всех компонентов пользовательского интерфейса. Это удачный момент для любого кода запуска в приложении. В нашем случае воспользуемся им для привязки параметров к конкретным звукам.

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

Чтобы вызвать основной bundle приложения, после "[super viewDidLoad];" добавьте следующий код:

//Получение основного bundle для приложения
CFBundleRef mainBundle;
mainBundle = CFBundleGetMainBundle ();

* This source code was highlighted with Source Code Highlighter.

Чтобы кнопка "B" обзавелась звуком, нужен путь к назначенному для воспроизведения звуковому файлу. Его имя — "B.aifc". Приведенный ниже код запрашивает URL для воспроизведения найденного файла. Поставьте его сразу за кодом получения основного bundle.

//Создание системного звукового объекта, представляющего звуковой файл
AudioServicesCreateSystemSound//Получение URL для воспроизведения звукового файла
bNoteFileURLRef =  CFBundleCopyResourceURL (
mainBundle,
CFSTR ("B"),
CFSTR ("aifc"),
NULL
);ID (bNoteFileURLRef, &bNoteFileObject);

* This source code was highlighted with Source Code Highlighter.

Обратите внимание, что система поддерживает только файлы с расширениями .wav, .aif и .caf.

Теперь, располагая набором bNoteFileURLRef, можно привязать звуковой файл к звуковому объекту системы bNoteFileObject. Функция AudioServicesPlaySystemSound позволит легко проигрывать короткие звуковые файлы.

После кода с запросом URL звукового файла добавьте следующий код:

//Создание системного звукового объекта, представляющего звуковой файл
AudioServicesCreateSystemSoundID (bNoteFileURLRef, &bNoteFileObject);

* This source code was highlighted with Source Code Highlighter.

Загрузка звука для кнопки "В" завершена. Осталось загрузить звуки для кнопок "E", "A" и "T".

Попробуйте написать код для этой части фрагмент (так должен выглядеть метод "viewDidLoad" по завершении работы).

//Внедрение viewDidLoad для дополнительной настройки после загрузки представления, обычно из nib-файла
- (void)viewDidLoad {
[super viewDidLoad];

//Получение основного bundle для приложения
CFBundleRef mainBundle;
mainBundle = CFBundleGetMainBundle ();

//Получение URL для воспроизведения звукового файла
bNoteFileURLRef =  CFBundleCopyResourceURL (
mainBundle,
CFSTR ("B"),
CFSTR ("aifc"),
NULL
);

//Создание представляющего звуковой файл системного звукового объекта
AudioServicesCreateSystemSoundID (bNoteFileURLRef, &bNoteFileObject);

//Получение URL для воспроизведения звукового файла
eNoteFileURLRef =  CFBundleCopyResourceURL (
mainBundle,
CFSTR ("E"),
CFSTR ("aifc"),
NULL
);

//Создание представляющего звуковой файл системного звукового объекта
AudioServicesCreateSystemSoundID (eNoteFileURLRef, &eNoteFileObject);

//Получение URL для воспроизведения звукового файла
aNoteFileURLRef =  CFBundleCopyResourceURL (
mainBundle,
CFSTR ("A"),
CFSTR ("aifc"),
NULL
);
//Создание представляющего звуковой файл системного звукового объекта
AudioServicesCreateSystemSoundID (aNoteFileURLRef, &aNoteFileObject);

//Получение URL для воспроизведения звукового файла
tNoteFileURLRef =  CFBundleCopyResourceURL (
mainBundle,
CFSTR ("T"),
CFSTR ("aifc"),
NULL
);

//Создание представляющего звуковой файл системного звукового объекта
AudioServicesCreateSystemSoundID (tNoteFileURLRef, &tNoteFileObject);
}

* This source code was highlighted with Source Code Highlighter.

Создание собственных IBActions.

Чтобы кнопки BEAT что-то делали, нужно связать их с функциями IBActions. Для начала задекларируем методы. Откройте "BickboxxViewController.h" и добавьте указанный ниже код перед строкой "@end".

- (IBAction)bSound:(id)sender;
- (IBAction)eSound:(id)sender;
- (IBAction)aSound:(id)sender;
- (IBAction)tSound:(id)sender;

* This source code was highlighted with Source Code Highlighter.

Теперь контроллер BickboxxViewController.h должен выглядеть так:

#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioServices.h>

@interface BickBoxxViewController : UIViewController {
CFURLRef    bNoteFileURLRef;
SystemSoundID  bNoteFileObject;
CFURLRef    eNoteFileURLRef;
SystemSoundID  eNoteFileObject;
CFURLRef    aNoteFileURLRef;
SystemSoundID  aNoteFileObject;
CFURLRef    tNoteFileURLRef;
SystemSoundID  tNoteFileObject;
}

@property (readwrite)  CFURLRef    bNoteFileURLRef;
@property (readonly)  SystemSoundID  bNoteFileObject;
@property (readwrite)  CFURLRef    eNoteFileURLRef;
@property (readonly)  SystemSoundID  eNoteFileObject;
@property (readwrite)  CFURLRef    aNoteFileURLRef;
@property (readonly)  SystemSoundID  aNoteFileObject;
@property (readwrite)  CFURLRef    tNoteFileURLRef;
@property (readonly)  SystemSoundID  tNoteFileObject;

//Вновь добавленный код
- (IBAction)bSound:(id)sender;
- (IBAction)eSound:(id)sender;
- (IBAction)aSound:(id)sender;
- (IBAction)tSound:(id)sender;

@end

* This source code was highlighted with Source Code Highlighter.

Закройте файл, открыв "BickboxxViewController.m". Чтобы методы IBAction издавали определенные системные звуки, запуская метод AudioServicesPlaySystemSound, необходимо добавить реализацию.

Для воспроизведения звука "В" реализованный метод должен вызывать "AudioServicesPlaySystemSound" и использовать созданный ранее объект "bNoteFileObject". После синтезирующего свойства кода добавьте следующее:

- (IBAction)bSound:(id)sender {
AudioServicesPlaySystemSound (self.bNoteFileObject);
}

* This source code was highlighted with Source Code Highlighter.

Аналогичные реализации добавьте для звуков "E", "A" и "T".

Для примера приведу начало файла "BickboxxViewController.m":

#import "BickBoxxViewController.h"</span>

@implementation BickBoxxViewController

@synthesize bNoteFileURLRef, bNoteFileObject, eNoteFileURLRef,
eNoteFileObject, aNoteFileURLRef, aNoteFileObject,
tNoteFileURLRef, tNoteFileObject;

- (IBAction)bSound:(id)sender {
AudioServicesPlaySystemSound (self.bNoteFileObject);
}

- (IBAction)eSound:(id)sender {
AudioServicesPlaySystemSound (self.eNoteFileObject);
}

- (IBAction)aSound:(id)sender {
AudioServicesPlaySystemSound (self.aNoteFileObject);
}

- (IBAction)tSound:(id)sender {
AudioServicesPlaySystemSound (self.tNoteFileObject);
}

* This source code was highlighted with Source Code Highlighter.

В последнем фрагменте кода наведем порядок, чтобы не допустить утечки памяти. В нижней части файла "BickboxxViewController.m" добавьте к методу "dealloc" следующие строки:

- (void)dealloc {
[super dealloc];
AudioServicesDisposeSystemSoundID (self.bNoteFileObject);
AudioServicesDisposeSystemSoundID (self.eNoteFileObject);
AudioServicesDisposeSystemSoundID (self.aNoteFileObject);
AudioServicesDisposeSystemSoundID (self.tNoteFileObject);
CFRelease (bNoteFileURLRef);
CFRelease (eNoteFileURLRef);
CFRelease (aNoteFileURLRef);
CFRelease (tNoteFileURLRef);
}

* This source code was highlighted with Source Code Highlighter.

С кодингом закончили. Командой "Build and Go" запустите проект и проверьте, ничего ли не взорвалось. Пока кнопки никаких звуков не издают — код нужно связать с интерфейсом.

Создание связей между кнопками и интерфейсом в IB.

Код готов — теперь нужно привязать его к кнопкам. Для начала свяжем кнопку "B" с методом "bsound". Для этого откройте файл "BickboxxViewController.xib".

Чтобы связать кнопку "B" с методом "bsound", щелкните на объекте "File’s Owner", удерживая нажатой клавишу <Control>.



Элемент "bSound" в "File’s Owner" перетащите на кнопку "B" в окне "View".



В открывшемся меню выберите "Touch Down". По умолчанию действие выполняется, когда палец отрывается от кнопки. Нас это не устраивает — деки работают по иному принципу. Выбранный вариант будет вызывать метод bSound IBAction при нажатии кнопки.



Аналогичные связи установите для остальных кнопок. После этого при щелчке на объекте "File’s Owner" с нажатой клавишей <Control> картина будет следующей.

Готово!!!

Вы справились! Запустите приложение после компиляции.

Если найдете ошибки, улучшите или отладите код, обязательно дайте знать.

А теперь посмотрим как это работает: