Все о UITableview: часть 3

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

С помощью стандартного класса UITableViewCell мы можем вывести на экран текст, детальный текст и одну картинку. И расположение этих элементов внутри ячейки может быть не самым подходящим для нашего приложения (из первой статьи мы помним, что задавали стиль отображения при инициализации с помощью метода initWithStyle). Создадим ячейку, которая будет удовлетворять нашим требованиям: три текстовых поля, картинка и кнопка.

Для этого откроем наш предыдущий исходный код и перейдем в меню File -> New -> New File (⌘N). Из шаблонов выберем UIViewController subclass, укажем сабкласс UITableViewCell и название CustomCell. Перейдем в редактор интерфейсов (выберем файл CustomCell.xib). В-первую очередь выберите File’s Owner и перейдите в Identity Inspector (нажмите ⌥⌘3). В поле Class замените CustomCell на NSObject. Далее необходимо удалить автоматически созданный элемент UIView и добавить новый элемент UITableViewCell из библиотеки объектов (⌃⌥⌘3). В Identity Inspector в поле Class замените UITableViewCell на CustomCell. Установите ширину ячейки на 100 точек (можно просто потянуть за края). Из библиотеки объектов перенесите на ячейку три UILabel, один UIImageView и одну кнопку UIButton. Большинство параметров наших объектов можно изменить в редакторе интерфейсов. Например, выберем один из наших UILabel и перейдем в Attributes Inspector (⌥⌘4). Поле Text — задает первоначальный текст. Lines — количество строчек текста. И так далее.

Теперь присвоим названия созданным объектам внутри класса CustomCell. Как и в предыдущей статье переведем редактор в режим Помощника (Assistant ⌥⌘⏎). В одной половине редактора откроем наш файл с интерфейсом, а во второй — заголовочный файл. Удерживая правую кнопку сделаем перетаскивание элементов (по одному, кроме UIButton) интерфейса внутрь заголовочного файла. Для объектов UILabel выберем названия name, price, detail. Для UIImageView — image. Для UIButton делаем перетаскивание с помощью правой кнопки, но перед тем как задать имя выберите в меню Connection вместо Outlet пункт Action, а потом введите toBuy. Мы ввели название метода, который будет автоматически вызываться при нажатии на кнопку.

 

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

#import "CustomCell.h"

@implementation CustomCell

@synthesize image;

@synthesize name;

@synthesize price;

@synthesize detail;

- (id) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        //something

    }

    return self;

}

- (void) setSelected:(BOOL) selected animated: (BOOL) animated {

    [super setSelected:selected animated:animated];

}

- (void)dealloc {

    [image release];

    [name release];

    [price release];

    [detail release];

    [super dealloc];

}

- (IBAction)toBuy:(id)sender {

}

@end

В конце файла имплементации мы видим заготовку для метода toBuy, который будет вызван при нажатии кнопки. Изменим немного этот метод, чтобы он выводил небольшое сообщение на экран девайса:

- (IBAction)toBuy:(id)sender {

    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Спасибо!" message:@"Благодарим за покупку." delegate:self cancelButtonTitle:@"ОК" otherButtonTitles:nil];

    [alertView show];

    [alertView release];

}

На этом создание собственной ячейки можно считать законченным. Теперь перейдем к файлу RootViewController.m и добавим вверху сроку:

#import "CustomCell.h"

Далее найдем нам знакомый метод cellForRowAtIndexPath. Раньше в этом методе мы инициализировали ячейки класса UITableViewCell. Теперь мы заменим стандартные ячейки на наши, только что созданные.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *CellIdentifier = @"CustomCell";

    CustomCell* cell = (CustomCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        NSArray* nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];

        for (id oneObject in nib) {

            if ([oneObject isKindOfClass:[CustomCell class]])

                cell = (CustomCell *) oneObject;

        }

    }

    // Configure the cell.

    if (searching) {

        cell.name.text = [search objectAtIndex:indexPath.row];

        cell.detail.text = @"Лучшие фрукты со всего света собраны в одном месте для Вашего удобства";

        cell.image.image = [UIImage imageNamed:@"star_color.png"];

        cell.price.text = @"100 руб.";

    } else {

        cell.name.text = [items objectAtIndex:indexPath.row];

        cell.detail.text = @"Лучшие фрукты со всего света собраны в одном месте для Вашего удобства";

        cell.image.image = [UIImage imageNamed:@"star_color.png"];

        cell.price.text = @"100 руб.";

    }

    return cell;

}

Здесь мы указываем наш xib-файл, в котором находится созданная нами ячейка и присваиваем значение UILabel’ам так же как и для обычной ячейки (единственное что поменялось — это название UILabel’ов). Дополнительно добавим в файл имплементации делегат:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    return 100;

}

Здесь мы указываем необходимую нам ширину ячейки. Теперь можем запустить приложение и посмотреть как оно изменилось. Уже неплохо: мы добавили пару новых текстовых полей и кнопку, с помощью которой можно выполнять нужные нам действия.

Продолжим совершенствовать внешний вид. Выберите любую картинку с размерами 320 x 100 точек и сохраните ее в проект с названием back.png. Перейдите в редактор интерфейсов и выберите нашу ячейку CustomCell. В Attributes Inspector найдите свойство Image и установите нашу картинку. Теперь добавленная картинка будет фоном каждой вновь создаваемой ячейки. Запустите приложение и проверьте. Здесь же можно установить картинку, которая будет отображаться, когда будет совершено нажатие на ячейку (Selected Image).

Добавим два делегата в основной код приложения:

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

{

    UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)] autorelease];

    headerView.backgroundColor = [UIColor blackColor];

    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 3, 320, 18)] autorelease];

    UIFont *tf1 = [UIFont boldSystemFontOfSize:14];

    label.font = tf1;

    label.text = @"Фрукты";

    label.textColor = [UIColor whiteColor];

    label.backgroundColor = [UIColor grayColor];

    headerView.backgroundColor = [UIColor grayColor];

    [headerView addSubview:label];

    return headerView;

}

- (UIView *) tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section

{

    UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)] autorelease];

    headerView.backgroundColor = [UIColor blackColor];

    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 3, 320, 18)] autorelease];

    UIFont *tf1 = [UIFont boldSystemFontOfSize:14];

    label.font = tf1;

    label.text = @"Лучшие фрукты для Вас";

    label.textColor = [UIColor whiteColor];

    label.backgroundColor = [UIColor grayColor];

    headerView.backgroundColor = [UIColor grayColor];

    [headerView addSubview:label];

    return headerView;

}

Оба метода идентичны друг другу. Первый метод определяет вид заголовка секции, а второй «подвала» секции. Эти методы должны вернуть объект класса UIView — именно его мы создаем в-первую очередь внутри метода с нужными размерами. Далее создадим новое текстовое поле UILabel и зададим ряд интересующих нас параметров: цвет и размер шрифта, а также укажем сам текст (он отличается для заголовка и «подвала»). После этого мы определяем цвет фона для UILabel и UIView. В конце мы добавляем текстовое поле на наш вид. Также вы можете самостоятельно добавить нужную Вам картинку. Теперь запустить приложение и посмотрите, что у нас получилось.

И напоследок мы рассмотрим еще один способ сделать наше приложение с таблицами еще более интересным и  привлекательным. Добавим в проект картинку с названием tbl_back.png (в примере используется картинка с простым узором и небольшого размера — у себя вы можете выбрать абсолютно любой рисунок). В метод viewDidLoad добавим следующие строки:

 tbl.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tbl_back.png"]];

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

- (void)viewDidLoad

{

    [super viewDidLoad];

    tbl.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tbl_back.png"]];

    search = [[NSMutableArray alloc] init];

    items = [[NSMutableArray alloc] init];

    [items addObject:@"Яблоки"];

    [items addObject:@"Апельсины"];

    [items addObject:@"Груши"];

}

Исходный код проекта можно скачать тут

Похожие статьи