Главная > Руководства > Разработка собственного навигационного меню в приложении для iPhone

Разработка собственного навигационного меню в приложении для iPhone


20 марта 2012, 12:50. Разместил: Design FactoRy
Разработка приложений для iPhone и iPod Touch в последние годы считается очень прогрессирующей сферой бизнеса. Дизайнеры по всему миру стараются «вклиниться» в данный процесс, пытаясь опубликовать свои работы в App Store. Хотя нас совсем не удивляет то, почему многие энтузиасты стараются попасть на рынок устройств от Apple.

Очень сложно разработать полноценное приложение с нуля, и тут даже меню от Xcode вам не помогут. В нашем сегодняшнем руководстве мы хотели бы представить вам тематические идеи по оформлению верхнего меню навигации в приложении. Здесь нам потребуется немного кода Objective-C, но мы не будем им злоупотреблять. Также следует отметить, что вам понадобится компьютер с Mac OS X для того, чтобы установить Xcode и скомпилировать эти приложения.

Разработка собственного навигационного меню в приложении для iPhone

Приступаем к работе

Итак, не мешкая ни минуты, давайте откроем Xcode. Создайте новый проект посредством основного меню, и перед вами появятся несколько окон. Для начала выбираем шаблон приложения. Мы выбрали Master-Detail Application, так как в нем по умолчанию имеется контроллер навигации.

Создавая приложения для iPhone, вам хочется сконцентрироваться на разработке функциональности ядра, и отвлечься от компонентов, которые и так доступны. Нет смысла изобретать колеса, к тому же, это требует значительных временных затрат. Теперь нажмите «Next», и вам будет предложено ввести имя проекта.

Разработка собственного навигационного меню в приложении для iPhone

Мы используем имя customNavBar с идентификатором designmag. Идентификатор не повлияет на ваше приложение во время его выполнения. Это нечто вроде мета-данных, используемых для того, чтобы было видно, какое приложение было выпущено студией или каким-то независимым разработчиком. Если вы создаете проект для iOS5, то убедитесь в том, что вы включили пункты Automatic Reference Counting и Storyboards.

Разработка собственного навигационного меню в приложении для iPhone

Кликаем дальше, сохраняем новый проект и приступаем к работе. Давайте начнем с оформления навигационного меню, а точнее – с цветовой схемы.

Пользовательские оттенки

В Xcode левое окошко содержит все файлы проекта. Внутри должен быть набор файлов MasterViewController (в форматах .h/.m). Они отвечают за шапку и внедрение кодов, которые используются для создания пользовательских классов.

Вам не нужно «ковыряться» в данном концепте, так как это больше предназначено для разработчиков ПО. Но мы будем работать в пределах этих классов, так что нам было бы неплохо знать об их предназначении. Кликните один раз на MasterViewController.m, и перед вами появится исходный код.

Теперь просканируйте документ на предмет наличия функции под названием viewDidLoad. Это стандартный метод, вызываемый при каждой первой загрузке страницы. Давайте немного ознакомимся с кодом:

- (void)viewDidLoad
{
// code here
}

Внутри фигурных скобок нам нужно расположить строку кода, который будет обновлять цветовой оттенок навигационного меню. Это значение может быть выставлено посредством RGB, о котором мы поговорим в следующей части. Но для того, чтобы все оставить максимально упрощенным, мы воспользуемся ключевым словом colorRed, которое предложено нам в Cocoa Touch. Вот код, который мы используем внутри viewDidLoad:

[super viewDidLoad];
[self.navigationController.navigationBar setTintColor:[UIColor redColor]];

self.navigationController.title = @"Custom Nav";

Работаем над контроллером навигации

Вы, вероятно, обратили внимание на то, что технология Objective-C 2.0 приняла дот-синтаксис, который знаком нам после javascript. От вас не ждут, что вы полностью понимаете весь вышеприведенный код (особенно, если вы впервые работаете с Xcode). Но когда мы вызываем self.navigationController.navigationBar, это означает внутреннюю навигационную панель в нашем контроллере.

Затем также метод setTintColor изменит стилизацию кнопок и элементов внутри навигационной панели. Вы также, вероятно, заметили, что мы установили параметр заголовка навигационного меню. Просто обычная строка текста, которая появляется в самом верху вашей страницы.

Разработка собственного навигационного меню в приложении для iPhone

Создайте и запустите приложение посредством CMD+R, либо кликните по кнопке Play в верхнем левом углу. Это откроет iOS Simulator, и тогда вы сможете созерцать то, как ваше приложение будет функционировать на экране мобильного устройства. Этот метод работает, и как раз с него следовало бы начинать.

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

Создаем фоновое изображение

Для того чтобы сэкономить немного времени, мы уже соединили изображения в Photoshop. Мы используем схожий паттерн-дизайн с тем, что используется в навигационном меню, которое было разработано Джонатоном Малки (Jonathan Mulkey), очень талантливым дизайнером приложений, проживающим в Теннеси.

Важно отметить, что нам нужно создать два (2) разных файла изображения для фона. Пользователи iPhone 3/3GS обычно используют сетку 320х480. Тем не менее, пользователи iPhone 4/4S используют разрешение 640х960, отображаемое на экране такого же размера. Что означает 1 пиксель = 2 пикселям, и поэтому наше изображение может быть отображено в два раза четче.

* CustomNavBG.png (320x44px)
* CustomNavBG@2x.png (640x88px)

Правила разработки приложений для устройств, работающих на iOS требуют, чтобы мы сохраняли оба изображения под одинаковым именем, за исключением лишь того, что большее изображение должно быть обозначено следующим образом «@2x» в конце названия файла, предназначенного для устройств с Retina Display. В нашем коде мы упоминаем лишь CustomNavBG.png. Платформа Cocoa достаточно умна, чтобы определить, какой тип устройства используется в данный момент, и в случае использования устройства с Retina, приложение автоматически переключится на большую версию изображения.

Внедряем фоновое изображение

Самым быстрым и самым надежным способом реализации пользовательского фонового изображения для навигационного меню является создание нового подкласса UINavigationBar. Это звучит немного странно, но реализовать на самом деле гораздо проще, чем кажется.

Разработка собственного навигационного меню в приложении для iPhone

Кликните правой кнопкой мыши по вашему проекту в левой панели и выберите меню «Новый файл». Нам нужен Objective-C Class с подклассом UINavigationBar. Если в выпадающем списке вам не предложено ничего подобного, то просто вручную введите эти параметры. Вы можете называть класс любым именем, но мы предпочли CustomNavBar. Кликайте «Next», и на этом вы закончите с имеющимся в проекте набором файлов в формате .h/.m.

Теперь нам нужно переписать метод под названием drawRect. Он используется для создания обычной градации фонового изображения для любой стандартной навигационной панели. Ниже мы добавили собственный код, как для файлов формата .h, так и для файлов формата .m. Все должно работать корректно, даже если вы просто скопируете и вставите этот код в собственный проект, но при этом вы должны использовать идентичные имена классов.

# CustomNavBar.h codes
@interface CustomNavBar : UINavigationBar

@end

#CustomNavBar.m codes
@implementation CustomNavBar

- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed:@"CustomNavBG.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

@end

Сохраните все изменения, внесенные в оба эти файла, а затем кликните по MainStoryboard.storyboard. Здесь у нас имеются различные виды внутри приложения. С самого лева, например, у нас контроллер навигации, и именно это мы ищем. Кликните по верхней синей панели, и откройте пункт Identity Inspector (View -> Utilities -> Show Identity Inspector). Он должен появиться на панели с правой стороны.

Разработка собственного навигационного меню в приложении для iPhone

Внутри нового окошка вы увидите настройки класса со значением UINavigationBar. Вы можете изменить это значение на CustomNavBar, либо на что-нибудь, похожее на название файлов вашего класса в предыдущем этапе разработки. Теперь навигационное меню генерируется посредством нашего кода, вместо панели iOS по умолчанию.

Компилируем и запускаем!

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

Разработка собственного навигационного меню в приложении для iPhone

К счастью, это очень легко исправить. Нам нужно извлечь параметры цвета из фонового изображения, и использовать их для нового оттенка. Снова нажмите на MasterViewController.m, и найдите внутри него предыдущий код viewDidLoad. Мы воспользовались RGB-значением, которое подошло к используемому фону, и каждый параметр прикрепили к разным переменным. Ниже вы увидите код нашего нового оттенка:

NSInteger red = 95;
NSInteger green = 100;
NSInteger blue = 130;

[self.navigationController.navigationBar setTintColor:[UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1.0]];

Мы задаем каждое значение цвета выше максимального параметра в 255, и это позволяет нам получить плавающее целое число. Короче говоря, это наипростейший способ конвертировать RGB из Photoshop в код Objective-C. Сохраняйтесь и запускайте проект, а дальше наблюдайте результат.

Разработка собственного навигационного меню в приложении для iPhone

* Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Вывод

Если у вас возникнут какие-либо проблемы, не забудьте скачать наш исходный код для данного проекта. Мы использовали Xcode 4.2 на iOS5, так что могут возникнуть проблемы с версиями постарше. Но что касается новичков в области iOS-разработки, то это руководство должно значительно повысить ваши навыки в создании и оформлении приложений. Нельзя научиться всему сразу, на это потребуется много времени! Дерзайте!
Вернуться назад