Туник Павел Олегович

Предложение по созданию приложения "DonNTU" для iOS

Создание пользовательских UITableView для приложений в iOS

Введение

В большинстве случаев, выбрав элемент из списка, пользователь загружает подробные сведения по нему в отдельном представлении. “UITableView” отвечает только за отображение списка элементов — переходы от списка к детальному представлению элемента контролирует “UINavigationController“. Таким образом, табличное представление всегда взаимодействует с контроллером навигации, и наоборот.

Вот как выглядит готовое приложение:

Что такое UITableView

UITableView - это табличное представление данных, очень важно понимать что сами данные оно не хранит, только отображает. UITableView - одно из самых популярных представлений в iOS.

С UITableView связано очень много разных задач, таких как:

• Сделать UITableView горизонтальным
• Разместить в ячейке представления кнопку или несколько кнопок
• Разместить в ячейке представления другое UITableView
• Создать UITableView с заданной шириной ячейки
• И многие другие

UITableView имеет множество delegate-методов и DataSource-методов, которые позволяют изменять UITableView в самых разных направлениях, порой даже сложно определить используется UITableView или UIScrollView. Например, можно вставить в ячейку UITableView проигрыватель видео Youtube и если сделать толщину разделителя равной 0, добавить в пердыдущую ячейку текст, то может показаться что мы используем UIWebView.

Мой опыт с UITableView

UITableView крайне популярное представление. За время моей работы я использовал его в самых разнообразных направлениях. Отдельно хочется рассказать про класс UITableViewCell. Хочу привести пример кастомизации UITableView.

Сперва нужно создать класс, который наследуется от UITableViewCell. File -> New File и выбрать класс от которого мы будем наследоваться UITableViewCell subclass. Назовем его ImageCell

Файл заголовок класса

#import 

@interface ImageCell : UITableViewCell 
{
	// добавляем две метки
	UILabel *titleLabel;
	UILabel *urlLabel;
}

// функции которые будем реализовывать

// метод в котором мы будем выставлять меткам значения
-(void)setData:(NSDictionary *)dict;

// функция для создания меток с параметрами
-(UILabel *)newLabelWithPrimaryColor:(UIColor *)primaryColor 
 selectedColor:(UIColor *)selectedColor fontSize:(CGFloat)fontSize bold:(BOOL)bold;

// создаем свойства для меток
@property (nonatomic, retain) UILabel *titleLabel;
@property (nonatomic, retain) UILabel *urlLabel;

@end

Переходим к файлу имплементацииImageCell.m.

#import "ImageCell.h"

@implementation ImageCell

// генерируем сеттеры и геттеры для меток
@synthesize titleLabel, urlLabel;

- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier {
	if (self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]) {
		// Initialization code

		// создаем контейнер для расположения в нем меток.
		UIView *myContentView = self.contentView;

		/*
		 инициализируем метку
		 выставляем выравнивание
		 добавляем метку как саб-представление к контейнеру
		 освобождаем память
		*/
		self.titleLabel = [self newLabelWithPrimaryColor:[UIColor blackColor] 
 selectedColor:[UIColor whiteColor] fontSize:14.0 bold:YES];
		self.titleLabel.textAlignment = UITextAlignmentLeft; // default
		[myContentView addSubview:self.titleLabel];
		[self.titleLabel release];

		/*
		 делаем тоже самое для второй метки, только с другими параметрами
		 */
        self.urlLabel = [self newLabelWithPrimaryColor:[UIColor blackColor] 
 selectedColor:[UIColor lightGrayColor] fontSize:10.0 bold:NO];
		self.urlLabel.textAlignment = UITextAlignmentLeft; // default
		[myContentView addSubview:self.urlLabel];
		[self.urlLabel release];
	}

	return self;
}

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

	[super setSelected:selected animated:animated];

}

/*
 в этой функции мы выставялем значения из словаря для меток
*/
-(void)setData:(NSDictionary *)dict {
	self.titleLabel.text = [dict objectForKey:@"title"];
	self.urlLabel.text = [dict objectForKey:@"img"];
}

- (void)layoutSubviews {

    [super layoutSubviews];

	// сохраняем размер ячейки
    CGRect contentRect = self.contentView.bounds;

	// Редактирование ячеек мы не используем, но в качестве общего шаблона сделаем проверку
    if (!self.editing) {

		// берем вершину контейнера
        CGFloat boundsX = contentRect.origin.x;
		CGRect frame;

        /*
		 создаем фрейм для первой метки
		*/
		frame = CGRectMake(boundsX + 10, 4, 200, 20);
		self.titleLabel.frame = frame;

		// для второй
		frame = CGRectMake(boundsX + 10, 28, 200, 14);
		self.urlLabel.frame = frame;
	}
}

- (UILabel *)newLabelWithPrimaryColor:(UIColor *)primaryColor 
 selectedColor:(UIColor *)selectedColor fontSize:(CGFloat)fontSize bold:(BOOL)bold
{
	/*
	 создаем и настраеваем метку.
	 */

    UIFont *font;
    if (bold) {
        font = [UIFont boldSystemFontOfSize:fontSize];
    } else {
        font = [UIFont systemFontOfSize:fontSize];
    }

	UILabel *newLabel = [[UILabel alloc] initWithFrame:CGRectZero];
	newLabel.backgroundColor = [UIColor whiteColor];
	newLabel.opaque = YES;
	newLabel.textColor = primaryColor;
	newLabel.highlightedTextColor = selectedColor;
	newLabel.font = font;

	return newLabel;
}

- (void)dealloc {
	// освобождаем память
	[titleLabel dealloc];
	[urlLabel dealloc];
	[super dealloc];
}

@end

Теперь мы можем использовать наш класс.

Нужно включить его заголовочный файл в RootViewController (viewController в котором нужно использовать ячейку)

#import "ImageCell.h"

Теперь перейдем к основному методу UITableView cellForRowAtIndexPath.Сейчас у нас уже есть инициализация стандартной ячейки UITableViewCell *cell, нам нужно изменить его, чтобы использовать наш ImageCell класс.

ImageCell *cell = (ImageCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];

Также нужно заменить строку cell = в if (cell == nil)

cell = [[[ImageCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];

Теперь удаляем строку cell.text и вставляем нашу

NSDictionary *itemAtIndex = (NSDictionary *)[self.jsonArray objectAtIndex:indexPath.row];
[cell setData:itemAtIndex];

Теперь, после того как мы соберем прокект, мы увидим следующее.

Выводы

UITableView очень мощный инструмент для представления данных. Пожалуй, самым главным плюсом является управление памятью, потому что когда в таблице более 12 ячеек, в памяти хранятся только видимые, а остальные буду автоматически созданы/удалены когда появятся на экране/исчезнут с экрана. UITableView - одно из самых популярных представлений в iOS, с его помощью создается простой и интуитивно понятный интерфейс.

Литература

1. Custom UITableViewCell in IB [Электронный ресурс]. — Режим доступа: http://iphone.galloway.me.uk/iphone-sdktutorials/custom-uitableviewcell/
2. UITableView tutorials [Электронный ресурс]. — Режим доступа: http://www.iphonesdkarticles.com/category/uitableview/page/2
3. Easy custom UITableView drawing [Электронный ресурс]. — Режим доступа: http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
4. UITableView Class Reference [Электронный ресурс]. — Режим доступа: http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/...