ПРОГРАММИРОВАНИЕ ПОД IPHONE, IPAD OBJECTIVE-C часть 2

Bottom Bar

Продолжая тему контроллера навигации хочу рассказать об одном из его элементов Bottom Bar. Как и в примере с Top Bar, я предлагаю не создавать новый проект, а воспользоваться кодом с нашего первого знакомства с контроллером навигации.
При работе с Bottom Bar следует помнить один нюанс. Если вы создали проект с контроллером навигации и сразу же запустили его на выполнение — вы увидите только Top  Bar. По умолчанию Bottom Bar отключен у контроллера навигации. Чтобы его включить перейдите в MainWindow.xib, выберите там Navigation Controller, откройте панель утелит и перейдите на вкладку инспектора атрибутов. Там вы увидите поле Bottom Bar у которого будет стоять значение None, измените это значение на Toolbar (вероятно вы там найдете и другие значения, с которыми захотите поэкспериментировать, но об этом позже).
Только после этих манипуляций вы сможете наблюдать в нижней части экрана примерно такую же полосу как и в верхней.Кроме всего прочего, у нас ограниченные возможности в работе с Bottom Bar. Если быть точнее, на него мы можем добавлять только объекты класса UIBarButtonItem. При этом все элементы интерфейса, которые мы хотим добавить на Bottom Bar должны быть помещены в массив. Посмотри как я добавил одну кнопку (все изменения вносим в класс RootViewController):

<code data-result="[object Object]">- (void)viewDidLoad
{
    [super viewDidLoad];
    self.title = @"BottomBar";

    self.students = [NSArray arrayWithObjects:@"Show", @"Hide", nil];

    UIBarButtonItem *addSharing = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction
                                                                                       target:self 
																					   action:@selector(actionButton)] autorelease];

    [self setToolbarItems:[NSArray arrayWithObjects:addSharing, nil]];
}</code>

 

Как вы уже заметили, кроме добавления кнопки я изменил заголовок Top Bar, изменил содержание нашей таблички (эти две ячейки понадобятся для демонстрации возможности прятать Bottom Bar). Для добавленной кнопки я создал метод, который будет вызываться при ее нажатии. В этом методе просто происходит изменение заголовка Top Bar.

Наверняка у многих из вас возникнет вопрос. Откуда я знаю какой стиль задавать кнопке? В уроке Источники информации (поиск методов) я уже рассказывал о таком магическом способе, как удерживании кнопки ⌘Cmd и нажатии на имя метода. Если вы проделаете такую же операцию с именем стиля — попадете в список всех допустимых стилей кнопок для Bottom Bar.

Существует возможность добавить собственную кнопку, которой вы сами зададите картинку (все картинки для этого проекта можно взять здесь):

<code data-result="[object Object]">UIBarButtonItem *addSharing = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction
                                                                             target:self 
                                                                             action:@selector(actionButton)] autorelease];

UIBarButtonItem *addUp = [[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"up.png"]
                                                           style:UIBarButtonItemStylePlain
                                                          target:self
                                                          action:@selector(actionButton)] autorelease];

[self setToolbarItems:[NSArray arrayWithObjects:addSharing, addUp, nil]];</code>

 

Кроме кнопок на Bottom Bar можно добавить просто картинку или надпись.

<code data-result="[object Object]">UIBarButtonItem *addSharing = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction
                                                                             target:self 
                                                                             action:@selector(actionButton)] autorelease];

UIBarButtonItem *addUp = [[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"up.png"]
                                                           style:UIBarButtonItemStylePlain
                                                          target:self
                                                          action:@selector(actionButton)] autorelease];

UIImageView *logoIgage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.png"]];
UIBarButtonItem *logo = [[[UIBarButtonItem alloc] initWithCustomView:logoIgage] autorelease];
[logoIgage release];

UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 80.0f, 20.0f)];
title.text = @"iMaladec";
title.backgroundColor = [UIColor clearColor];
UIBarButtonItem *titleItem = [[[UIBarButtonItem alloc] initWithCustomView:title] autorelease];
[title release];

[self setToolbarItems:[NSArray arrayWithObjects:addSharing, addUp, logo, titleItem, nil]];</code>

 

С написаного кода видно, что на Bottom Bar мы можем добавить практически любой элемент интерфейса. Для этого его нужно проинициализировать, а затем передать в качестве параметра методу initWithCustomView.

Все хорошо, но наш Bottom Bar имеет не совсем эстетический вид. Все элементы, которые мы на него добавили прижаты к левому краю. Исправить положение нам поможет FlexibleSpace.

<code data-result="[object Object]">UIBarButtonItem *addSharing = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction
                                                                             target:self 
                                                                             action:@selector(actionButton)] autorelease];

UIBarButtonItem *addUp = [[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"up.png"]
                                                           style:UIBarButtonItemStylePlain
                                                          target:self
                                                          action:@selector(actionButton)] autorelease];

UIImageView *logoIgage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.png"]];
UIBarButtonItem *logo = [[[UIBarButtonItem alloc] initWithCustomView:logoIgage] autorelease];
[logoIgage release];

UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 80.0f, 20.0f)];
title.text = @"iMaladec";
title.backgroundColor = [UIColor clearColor];
UIBarButtonItem *titleItem = [[[UIBarButtonItem alloc] initWithCustomView:title] autorelease];
[title release];

UIBarButtonItem *flexible = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace 
                                                                           target:nil 
                                                                           action:nil] autorelease];

[self setToolbarItems:[NSArray arrayWithObjects:addSharing, flexible,
                       addUp, flexible, 
                       logo, flexible,
                       titleItem, nil]];</code>

 

Мы инициализируем отдельный объект, который имеет стиль UIBarButtonSystemItemFlexibleSpace и добавляем его в массив объектов меджу которыми хотим вставить пробел. Этот полезный инструмент особенно важен в тех приложениях, которые поддерживают портретный жерижм, поскольку при переворачивании устройства Bottom Bar меняет размер. Соответственно и расстояние меджу элементами тоже должно изменятся. Как раз эту задачу и решает UIBarButtonSystemItemFlexibleSpace.

В начале примера я предлагал изменить элементы массива, который выступает в роли источника данных для таблицы, чтобы продемонстрировать способ прятать Bottom Bar. В методе didSelectRowAtIndexPath замените код на следующий:

<code data-result="[object Object]">- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *selectedText = [students objectAtIndex:indexPath.row];

    if ([selectedText isEqualToString:@"Show"]) {
        self.navigationController.toolbar.hidden = NO;
    } else if ([selectedText isEqualToString:@"Hide"]) {
        self.navigationController.toolbar.hidden = YES;
    }
}</code>

 

Если все сделано правильно — вы получите вот такой результат:

Теперь мы имеем полностью рабочий Bottom Bar. Конечно же это не все его методы, но изложенной здесь информации будет достаточно для ознакомления с основными функциями Bottom Bar. Исходный код можно скачать здесь.