|
Май
16
|
Думаю, все знакомы с эмуляторами ударных установок. Сделать такое приложение довольно просто. В этой статье мы создадим Bickboxx — реальное приложение из iTunes App Store.
Если хотите получить представление о том, чем мы займемся, скачайте Bickboxx из iTunes 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” и вставьте в файл следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #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 |
Вверху мы ссылаемся на “AudioServices.h” из импортированной ранее структуры “AudioToolbox“.
Ниже — декларация свойств для четырех звуков, соответствующих клавишам “B“, “E“, “A” и “T”
“bNoteFileURLRef” — ссылка на расположение файла для bNoteFileObject. Этот звук будет воспроизводить клавиша “B“.
Там же прописаны параметры для звуков “E“, “A” и “T“.
Файл BickboxxViewController.m
Откройте “BickboxxViewController.m” — здесь необходимо синтезировать для параметров getter’ы и setter’ы.
Для этого после “@implementation BickBoxxViewController” добавим следующий код:
1 2 3 | @synthesize bNoteFileURLRef, bNoteFileObject, eNoteFileURLRef, eNoteFileObject, aNoteFileURLRef, aNoteFileObject, tNoteFileURLRef, tNoteFileObject; |
Меняем метод viewDidLoad.
Найдите метод “viewDidLoad” — он закомментирован. Для активации знаки комментария нужно удалить.
Метод “viewDidLoad” вызывается после создания всех компонентов пользовательского интерфейса. Это удачный момент для любого кода запуска в приложении. В нашем случае воспользуемся им для привязки параметров к конкретным звукам.
Первым делом получим основной bundle для приложения. Он позволяет работать с иерархией папок, упорядочивая и размещая различные типы ресурсов для приложения, включая изображения, звуки, исполняемые коды и локализованные строки.
Чтобы вызвать основной bundle приложения, после “[super viewDidLoad];” добавьте следующий код:
1 2 3 | //Получение основного bundle для приложения CFBundleRef mainBundle; mainBundle = CFBundleGetMainBundle (); |
Чтобы кнопка “B” обзавелась звуком, нужен путь к назначенному для воспроизведения звуковому файлу. Его имя — “B.aifc“. Приведенный ниже код запрашивает URL для воспроизведения найденного файла. Поставьте его сразу за кодом получения основного bundle.
1 2 3 4 5 6 7 | //Получение URL для воспроизведения звукового файла bNoteFileURLRef = CFBundleCopyResourceURL ( mainBundle, CFSTR ("B"), CFSTR ("aifc"), NULL ); |
Обратите внимание, что система поддерживает только файлы с расширениями .wav, .aif и .caf.
Теперь, располагая набором bNoteFileURLRef, можно привязать звуковой файл к звуковому объекту системы bNoteFileObject. Функция AudioServicesPlaySystemSound позволит легко проигрывать короткие звуковые файлы.
После кода с запросом URL звукового файла добавьте следующий код:
1 2 | //Создание системного звукового объекта, представляющего звуковой файл AudioServicesCreateSystemSoundID (bNoteFileURLRef, &bNoteFileObject); |
Загрузка звука для кнопки “В” завершена. Осталось загрузить звуки для кнопок “E“, “A” и “T“.
Попробуйте написать код для этой части фрагмент (так должен выглядеть метод “viewDidLoad” по завершении работы).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | //Внедрение 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); } |
Создание собственных IBActions.
Чтобы кнопки BEAT что-то делали, нужно связать их с функциями IBActions. Для начала задекларируем методы. Откройте “BickboxxViewController.h” и добавьте указанный ниже код перед строкой “@end“.
1 2 3 4 | - (IBAction)bSound:(id)sender; - (IBAction)eSound:(id)sender; - (IBAction)aSound:(id)sender; - (IBAction)tSound:(id)sender; |
Теперь контроллер BickboxxViewController.h должен выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #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 |
Закройте файл, открыв “BickboxxViewController.m“. Чтобы методы IBAction издавали определенные системные звуки, запуская метод AudioServicesPlaySystemSound, необходимо добавить реализацию.
Для воспроизведения звука “В” реализованный метод должен вызывать “AudioServicesPlaySystemSound” и использовать созданный ранее объект “bNoteFileObject“. После синтезирующего свойства кода добавьте следующее:
1 2 3 | - (IBAction)bSound:(id)sender { AudioServicesPlaySystemSound (self.bNoteFileObject); } |
Аналогичные реализации добавьте для звуков “E“, “A” и “T“.
Для примера приведу начало файла “BickboxxViewController.m“:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #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); } |
В последнем фрагменте кода наведем порядок, чтобы не допустить утечки памяти. В нижней части файла “BickboxxViewController.m” добавьте к методу “dealloc” следующие строки:
1 2 3 4 5 6 7 8 9 10 11 | - (void)dealloc { [super dealloc]; AudioServicesDisposeSystemSoundID (self.bNoteFileObject); AudioServicesDisposeSystemSoundID (self.eNoteFileObject); AudioServicesDisposeSystemSoundID (self.aNoteFileObject); AudioServicesDisposeSystemSoundID (self.tNoteFileObject); CFRelease (bNoteFileURLRef); CFRelease (eNoteFileURLRef); CFRelease (aNoteFileURLRef); CFRelease (tNoteFileURLRef); } |
С кодингом закончили. Командой “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> картина будет следующей.
Готово!!!
Вы справились! Запустите приложение после компиляции.
Если найдете ошибки, улучшите или отладите код, обязательно дайте знать.
А теперь посмотрим как это работает:


















(5 голосов, средний: 4.80 из 5)
Июль 31st, 2009 at 07:38
Не знаю что я не так сделал, но после нажатия кнопки “Build And Go” мне выскочило
Июль 31st, 2009 at 07:38
33 ошибки…
Июль 31st, 2009 at 15:18
смотрите каменты на сайте автора. если ничего подобного нет то проблема не в уроке…
Август 26th, 2009 at 12:55
дааа, у меня тоже после Build and Go , вышибло из эмулятора
Август 26th, 2009 at 12:56
Спасибо за урок!
Август 26th, 2009 at 14:05
сверьтесь с оригинальным уроком на англ. языке и комменты там же. Возможно найдете ошибку свою. + Скачайте исходник и сверьтесь.
Сентябрь 26th, 2009 at 19:30
А не подскажите как сделать чтобы мелодия звучала пока кнопка нажата?
Сентябрь 27th, 2009 at 17:41
и в догонку может кто знает как можно самому мелодию проиграть задав нужные чистоты?
Февраль 10th, 2010 at 13:57
все сделал как нужно, а звук почему-то не играется
Февраль 26th, 2010 at 12:26
а как можно потестить приложение на своем iPhone а не в симуляторе?