Как мы могли убедиться в предыдущих двух статьях, разработка приложений с таблицами в 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. Для UIImageViewimage. Для 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:@"Груши"];
}

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

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

  • Audio Unit в iOS. Часть 3, накладываем эффект Delay

  • Audio Unit в iOS. Часть 2, строим граф и проигрываем файлы

  • Audio Unit в iOS. Часть 1, введение.

  • Используем Emoji в своих приложениях

  • Как вводить в UITextField только цифры?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *