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

Свои ячейки (custom cell)

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

 

 

Чтобы не создавать новый проект я предлагаю использовать код с примера Самая простая таблица (UITableView). Того минимального набора функционала, который содержится в этом коде нам будет достаточно.

 

В первую очередь добавим в проект еще один класс, который будет наследником от класса UITableViewCell (это и будет наша ячейка). Для этого нажмите правой кнопкой на папке TableView, которая находится в проекте и во всплывающем меню выберите пункт New File…

 

 

После этого откроется меню похожее на то, когда мы создаем новый проект. В этом меню выберите пункт Cocoa Touch, а в правой части окна Objective-C class и нажмите кнопку Next.

 

 

В поле Subclass of выберите UITableViewCell и снова нажмите Next (поскольку поле всего одно — я не вставлял этот скриншот).

 

В следующем окне в поле Save As укажите имя нового класса, я назвал его MyCell и нажмите кнопку Save.

 

 

После этого Xcode создаст новый класс и добавит его в наш проект.

 

Для удобства работы с интерфейсом ячейки создадим ей nib-файл. Для этого снова нажмем правой кнопкой на папке TableView и во всплывающем меню выберите пункт New File… Только теперь в левочй части окна выберем User Interface, а в правой Empty.

 

 

Теперь нажмите кнопку NextDevice Family выберем iPhone и снова нажем Next. В появившемся меню укажим имя нашего nib-файла (такое же как имя класса MyCell). Если вы все сделали правильно — то увидите еще один добавленный файл к проекту (MyCell.xib), выберите его со списка файлов и перед вами откроется редактор интерфейса. Пока что этот файл пустой, давайте с библиотеки объектов добавим в него объект класса Table View Cell (просто перетяните этот объект на пустое поле интерфейса, как вы это делали в Знакомство с GUI). Осталось указать тип этого объекта, для этого переключитесь на вкладку инспектора идентификации (на картинке помечено красным прямоугольником) и в поле Class введите имя только что созданного нами класса.

 

 

Теперь перейдем к процессу кодирования. В первую очередь следует импортировать только что созданный класс вRootViewController, для этого в интерфейсе этого класса после строчки #import добавьте строку  #import «MyCell.h». Таким образом класс RootViewController будет знать о существовании класса MyCell. После чего следует исправить метод cellForRowAtIndexPath в котором мы инициализируем ячейки.

 

<code data-result="[object Object]">- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    //поиск ячейки
    MyCell *cell = (MyCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        //если ячейка не найдена - создаем новую
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"MyCell"owner:self options:nil];
        cell = [nib objectAtIndex:0];
    }

    cell.textLabel.text = [students objectAtIndex:indexPath.row];

    return cell;
}</code>

 

В этом коде мы создаем ячейку не из класса UITableViewCell, а со своего класса MyCell, соответственно метод поиска и метод создания ячейки тоже изменились. Если вы сейчас запустите проект на выполнение — вы заметите некоторые изменения, но основная магия начинается не здесь.

 

Как я и говорил в начале примера мы сможем добавлять свойства ячейки, так давайте это и сделаем. Добавим классу MyCell две переменных и пропишем для них свойства name и photo.

 

<code data-result="[object Object]">#import &lt;UIKit/UIKit.h&gt;

@interface MyCell : UITableViewCell {
    UILabel *name;
    UIImageView *photo;
}

@property (nonatomic, retain) IBOutlet UILabel *name;
@property (nonatomic, retain) IBOutlet UIImageView *photo;

@end</code>

 

Вот так должен выглядеть интерфейс класса MyCell. Для каждой переменной я прописал IBOutlet (мы будем связывать их с интерфейсом). Теперь синтезируем методы доступа и организуем очистку памяти для наших переменных. После всех изменений реализация класса MyCell  будет выглядеть так:

 

<code data-result="[object Object]">#import "MyCell.h"

@implementation MyCell

@synthesize name;
@synthesize photo;

- (void)dealloc
{
    [photo release];
    [name release];
    [super dealloc];
}

@end</code>

 

Как видите, я удалил лишние методы, которыми мы не будем пользоваться, оставив лишь самое главное.

 

Пришло время связать переменные с интерфейсом. Для этого перейдите к файлу MyCell.xib и добавьте с библиотеки объектов на интерфейс два объекта Lable и Image View.

 

 

Теперь свяжем эти объекты с нашим кодом, как это делать я уже описывал в уроке Знакомство с GUI, только в нашем случае связь будет происходить не через File’s Owner, а My Cell. То есть, выбираем объект Lable в правой панели переходим на вкладку инспектора соединений, рядом с объектом New Referencing Outlet вы увидите круг. Щелкните на нем и перетащите не на объект File’s Owner, а на My Cell. После того как вы отпустите кнопку мышки — появится сообщение с текстом всплывающее меню, в котором кроме прочих объектов будет наш объект name.

 

 

Самостоятельно свяжите объект Image View с переменной photo. Кстати, о фотографии, естественно у нас нету фотографий всех студентов, поэтому я предлагаю поступить так же, как мы это делали в примере Более подробно о ячейках, то есть взять вот этукартинку и добавить ее в проект.

 

Давайте установим занчения для этих объектов. Для этого вернемся к методу cellForRowAtIndexPath класса RootViewController и заменим в нем строчку

 

<code data-result="[object Object]">cell.textLabel.text = [students objectAtIndex:indexPath.row];</code>

 

двумя другими строками

 

<code data-result="[object Object]">cell.name.text = [students objectAtIndex:indexPath.row];
cell.photo.image = [UIImage imageNamed:@"home-ios-sdk.png"];</code>

 

Если вы запустите проект — увидите, что картинка не расположена на своем привычном месте (слева перед текстом), а сам текст изменил шрифт и размер. В этом примере я продемонстрировал вам возможность добавления двух объектов, но на этом возможности нашей ячейки не ограничиваются. Теперь вы сами можете управлять количеством объектов, их типом и положением на самой ячейке.

 

Исходный код можно скачать здесь.