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

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



Разработка приложений для 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-разработки, то это руководство должно значительно повысить ваши навыки в создании и оформлении приложений. Нельзя научиться всему сразу, на это потребуется много времени! Дерзайте!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: iPhone, iPod Touch
Опубликовал Design FactoRy   Прочитано (раз): 10793   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Деньги под залог ПТС автомобиля
деньги под залог золота, техники и серебра, часов. Скупка. Реальная оценка
multizaim24.ru
Установка кондиционеров в мытищах
Установка домашних кинотеатров. Продажа и установка каминов
alp-climat.ru
Купить септик волгарь 5
купить септик волгарь 5
astraseptik.ru
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30