iOS. Приемы программирования Нахавандипур Вандад

UITableViewCell *cell = [tableView

dequeueReusableCellWithIdentifier: CellIdentifier

forIndexPath: indexPath];

cell.textLabel.text = self.allItems[indexPath.row];

return cell;

}

@end

Теперь, запустив приложение, мы увидим результат, напоминающий рис. 4.23.

Рис. 4.23. Строки правильно отображаются в табличном виде

Вот практически и все, что следует знать о табличных контроллерах видов. Еще раз напомню, что табличный контроллер вида одновременно является и источником данных, и делегатом табличного вида. Итак, теперь вы можете реализовать методы протокола UITableViewDataSource, а также методы протокола UITableViewDelegate прямо в файле реализации табличного контроллера вида.

См. также

Раздел 4.1.

4.10. Отображение элемента управления, предназначенного для обновления информации в табличных видах

Постановка задачи

Требуется отображать в пользовательском интерфейсе красивый элемент управления для обновления информации. Этот элемент управления должен находиться над табличными видами и служить для пользователя интуитивно понятным инструментом: такой инструмент позволяет временно убрать таблицу с экрана, а потом вновь вывести ее, но уже с обновленной информацией. Пример показан на рис. 4.24.

Рис. 4.24. Элемент управления для обновления информации, расположенный над табличным видом

Решение

Создайте табличный контроллер вида (так, как описано в разделе 4.9) и задайте в качестве значения его свойства refreshControl новый экземпляр класса UIRefreshControl, как показано далее:

— (id)initWithStyle:(UITableViewStyle)style{

self = [super initWithStyle: style];

if (self) {

[self.tableView registerClass: [UITableViewCell class]

forCellReuseIdentifier: CellIdentifier];

self.allTimes = [NSMutableArray arrayWithObject: [NSDate date]];

/* Создаем элемент управления для обновления информации */

self.refreshControl = [[UIRefreshControl alloc] init];

self.refreshControl = self.refreshControl;

[self.refreshControl addTarget: self

action:@selector(handleRefresh:)

forControlEvents: UIControlEventValueChanged];

}

return self;

}

Обсуждение

Элементы управления для обновления информации — это простые визуальные индикаторы, располагающиеся над табличным видом и сообщающие пользователю, что какая-то информация в таблице сейчас обновится. Например, чтобы обновить содержимое почтового ящика в приложении Mail в версиях старше iOS 6, вам приходилось нажимать на специальную кнопку Refresh (Обновить). В новой iOS 7 вы можете просто потянуть список ваших писем вниз, как если бы хотели ознакомиться с какими-то письмами из верхней части списка, которые пока не успели прочитать. Как только iOS зафиксирует такой жест, система инициирует обновление. Круто, правда? Это нововведение впервые появилось в Twitter-клиенте для iPhone, большое спасибо за это его разработчикам. Apple по достоинству оценила всю элегантность и логичность этой возможности обновления видов, поэтому в SDK был добавлен специальный компонент для реализации такой функции. Класс, соответствующий этому компоненту, называется UIRefreshControl.

Чтобы создать новый экземпляр этого класса, достаточно просто вызвать его метод init. Сделав это, добавьте экземпляр к табличному контроллеру вида, как описано в подразделе «Решение» данного раздела.

Итак, вы хотите знать, когда пользователь инициирует обновление информации в табличном виде. Для этого просто вызовите метод экземпляра addTarget: action: forControlEvents: обновляющего элемента и передайте ему целевой объект вместе с селектором этого объекта — остальное система сделает за вас. Передайте событие UIControlEventValueChanged параметру forControlEvents этого метода.

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

#import «ViewController.h»

static NSString *CellIdentifier = @"Cell";

@interface ViewController ()

@property (nonatomic, strong) NSMutableArray *allTimes;

@property (nonatomic, strong) UIRefreshControl *refreshControl;

@end

@implementation ViewController

Свойство allTimes — это обычный изменяемый массив, который будет содержать все экземпляры NSDate в момент, когда завершится обновление таблицы. Мы уже рассмотрели инициализацию табличного контроллера вида в подразделе «Решение» данного раздела, поэтому я не буду вновь писать об этом. Но, как вы помните, мы прикрепили событие UIControlEventValueChanged обновляющего элемента управления к методу handleRefresh:. В этом методе мы всего лишь собираемся добавить к массиву дату и время, после чего обновить табличный вид:

— (void) handleRefresh:(id)paramSender{

/* Оставляем небольшую задержку между высвобождением обновляющего элемента

управления и самим моментом обновления. Так весь процесс выглядит

в интерфейсе более плавно, чем при использовании обычной анимации */

int64_t delayInSeconds = 1.0f;

dispatch_time_t popTime =

dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC);

dispatch_after(popTime, dispatch_get_main_queue(), ^(void){

/* Добавляем актуальную дату к имеющемуся списку дат;

Таким образом, при обновлении табличного вида новый информационный

элемент на экране будет находиться над старым и пользователь увидит

разницу во времени до и после обновления */

[self.allTimes addObject: [NSDate date]];

[self.refreshControl endRefreshing];

NSIndexPath *indexPathOfNewRow =

[NSIndexPath indexPathForRow: self.allTimes.count-1 inSection:0];

[self.tableView

insertRowsAtIndexPaths:@[indexPathOfNewRow]

withRowAnimation: UITableViewRowAnimationAutomatic];

});

}

Последний важный момент: мы записываем дату в табличный вид посредством методов делегата и источника данных табличного вида:

— (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

return 1;

}

— (NSInteger) tableView:(UITableView *)tableView

numberOfRowsInSection:(NSInteger)section{

return self.allTimes.count;

}

— (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath{

UITableViewCell *cell = [tableView

dequeueReusableCellWithIdentifier: CellIdentifier

forIndexPath: indexPath];

cell.textLabel.text = [NSString stringWithFormat:@"%@",

self.allTimes[indexPath.row]];

return cell;

}

Опробуйте в эмуляторе или на устройстве то, что у нас получилось. Открыв приложение, вы сразу заметите только одно значение даты и времени в списке. Но если потянуть таблицу вниз, то постепенно перед вами будут открываться новые элементы (см. рис. 4.24).

См. также

Раздел 4.9.

Глава 5. Выстраивание сложных макетов с помощью сборных видов

5.0. Введение

Табличные виды очень хороши. Действительно. Тем не менее они отличаются удручающей негибкостью, так как их содержимое всегда ориентировано по вертикали. Это не настоящие таблицы-сетки, поэтому они и функционально не похожи на сетки. Однако программист может оказаться в ситуации, когда требуется отрисовать на экране таблицеподобный компонент со строками и столбцами, а затем поместить в каждую из ячеек различные элементы пользовательского интерфейса и каждый элемент сделать интерактивным. В табличном виде у вас фактически имеется всего один столбец с множеством строк. Если вы хотите создать иллюзию множества столбцов, то придется предоставить собственную специальную ячейку и оформить ее так, как будто она состоит из нескольких столбцов.

Сборные виды, так же как табличные виды, состоят из ячеек, причем каждая ячейка содержит элемент или вид, отображаемый на экране. Ячейки в сборных видах доступны для повторного использования, причем их можно изымать из очереди и возвращать на экран в любой момент, когда это можно и нужно. Но компоновка страницы может быть практически любой вообразимой на двухмерном экране.

Именно поэтому в 6-й версии iOS компания Apple впервые внедрила сборные виды. Сборный вид можно сравнить с сильно усовершенствованным прокручиваемым видом. У него есть источник данных и делегат, как и у табличного вида. Но он обладает одним свойством, делающим его совершенно несхожим с табличным или прокручиваемым видами. Речь идет о макетном объекте.

В сущности, макетный объект вычисляет, где должен быть размещен каждый элемент, входящий в состав сборного вида. Однако Apple немного усложнила такую работу, внедрив конкретный класс для работы со сборными видами, причем этот класс нельзя инстанцировать напрямую. Вместо этого придется инстанцировать подкласс от этого класса, называемый UICollectionViewFlowLayout.

Этот подкласс обеспечивает последовательную компоновку, при которой ячейки из сборного вида распределяются на экране по секциям. Каждая секция — это группа ячеек сборного вида, так же как в табличном виде. Однако в сборном виде любая секция может компоноваться на экране разными способами, не обязательно вертикально. Например, у вас может быть три прямоугольника, в каждом из которых содержится своя маленькая таблица (рис. 5.1).

Рис. 5.1. Типичный макет с последовательной компоновкой в сборном виде

Как правило, секции располагаются на экране в виде таблиц, то есть образуя строки и столбцы. Именно эта задача решается с помощью класса последовательной компоновки. Если вы хотите добиться еще большей свободы действий при компоновке, то попробуйте изменить свойства класса последовательной компоновки. А если желаете сделать нечто, значительно отличающееся от стандартных возможностей последовательной компоновки, создайте для этого собственный класс. Например, такой специальный класс вам потребуется для создания сборного вида, который показан на рис. 5.2. Далее приведен специальный класс компоновки, располагающий соответствующие ячейки совсем не по табличному принципу.

Рис. 5.2. Специальный вариант компоновки для сборного вида

5.1. Создание сборных видов

Постановка задачи

Требуется отобразить на экране сборный вид.

Решение

Либо воспользуйтесь экземпляром UICollectionView, который в таком случае нужно сделать дочерним видом одного из видов вашего приложения (если хотите создать полноэкранный сборный вид), либо примените класс UICollectionViewController.

Обсуждение

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

Сначала рассмотрим вариант с полноэкранным видом.

1. Откройте Xcode.

2. В меню File (Файл) выберите New (Новый), а затем Project (Проект).

3. Слева в качестве основной категории выберите iOS, а под ней — Application (Приложение). В правой части экрана выберите Empty Application (Пустое приложение), после чего нажмите кнопку Next (Далее).

4. На следующем экране введите информацию о вашем проекте и убедитесь, что установлен флажок Use Automatic Reference Counting (Использовать автоматический подсчет ссылок) (рис. 5.3). Как только введете все необходимые значения, нажмите кнопку Next (Далее).

Рис. 5.3. Создание нового проекта Пустое приложение (Empty Application) для сборного вида

5. После этого вам будет предложено сохранить проект на диске. Выберите подходящее для этого место и нажмите кнопку Create (Создать).

6. Теперь, когда проект подготовлен, создайте в нем новый класс и назовите его ViewController. Этот класс должен наследовать от UICollectionViewController. Вам не понадобится. xib-файл для этого контроллера вида, поэтому откажитесь от этой возможности (рис. 5.4).

Рис. 5.4. Добавляем в проект новый класс сборного вида

7. Найдите в проекте файл AppDelegate.m (это файл реализации делегата приложения) и откройте его, после чего создайте экземпляр сборного вида, а затем сделайте этот сборный вид корневым контроллером вида вашего приложения, как показано здесь:

— (BOOL) application:(UIApplication *)application

didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

/* Инстанцируем контроллер сборного вида с нулевым макетным объектом.

Примечание: в результате программа выдаст исключение, но позже мы

изучим, как создавать макетные объекты и предоставлять их нашим сборным

видам */

ViewController *viewController = [[ViewController alloc]

initWithCollectionViewLayout: nil];

self.window = [[UIWindow alloc] initWithFrame:

[[UIScreen mainScreen] bounds]];

self.window.backgroundColor = [UIColor whiteColor];

/* Устанавливаем сборный вид в качестве корневого для нашего окна */

self.window.rootViewController = viewController;

[self.window makeKeyAndVisible];

return YES;

}

Как только вы запустите ваше приложение, оно аварийно завершится и выдаст сообщение о том, что вы указали нулевой макетный объект для вашего сборного вида. И здесь среда времени исполнения действует совершенно правильно. Так делать нельзя. Но мы просто пока не обсудили, как инстанцировать макетные объекты и передавать их в сборные виды. Поэтому пока оставим все как есть. Далее в этой главе мы подробнее поговорим о макетных объектах сборных видов.

Итак, мы уже научились создавать контроллер сборного вида, и это хорошо, если вы хотите, чтобы такой вид при отображении занимал на устройстве весь экран. Однако если вы разрабатываете специальный компонент, входящий в состав другого, более крупного вида, то попробуйте просто инстанцировать объект типа UICollectionView, воспользовавшись его выделенным инициализатором — методом initWithFrame: collectionViewLayout:.

Чтобы это сделать, требуется просто инстанцировать сборный вид, воспользовавшись указанным инициализатором. После инициализации вы сможете добавить сборный вид в качестве дочернего к другому виду. Например, если вы хотите добавить его к вашему виду контроллера вида, просто вызовите метод addSubview: этого вида с контроллером и передайте экземпляр вашего сборного вида этому методу в качестве параметра. Кроме того, нужно убедиться, что в качестве значений свойств delegate и dataSource сборного вида заданы валидные объекты, соответствующие протоколам UICollectionViewDelegate и UICollectionViewDataSource. Выполнить остальные операции не составляет труда. Далее в этой главе описаны все приемы, используемые для наполнения сборного вида информацией из источника данных и реагирования на события с помощью объекта-делегата.

См. также

Раздел 5.0.

5.2. Присваивание источника данных сборному виду

Постановка задачи

Требуется предоставить для сборного вида данные, которые будут выводиться на экран.

Решение

Присвойте сборному виду источник данных, воспользовавшись свойством dataSource класса UICollectionView. Источник данных должен быть объектом, который соответствует протоколу UICollectionViewDataSource. Кроме того, само собой разумеется, что объект источника данных обязательно должен реализовывать методы и свойства этого протокола, относящиеся к категории required.

Обсуждение

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

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

• collectionView: numberOfItemsInSection: — этот метод возвращает объект NSInteger, сообщающий сборному виду количество элементов, которые должны быть отображены в заданной секции. Задаваемая секция сообщается данному методу как целое число, представляющее собой индекс с нулевым основанием для данной секции. Именно так происходит и при работе с табличными видами.

• collectionView: cellForItemAtIndexPath: — ваша реализация этого метода должна возвращать экземпляр UICollectionViewCell, соответствующий ячейке, к которой ведет указанный индексный путь. Класс UICollectionViewCell наследует от UICollectionReusableView. Фактически любая доступная для повторного использования ячейка, передаваемая сборному виду для отображения, должна прямо или косвенно наследовать от UICollectionReusableView, о чем мы подробно поговорим в этой главе. Индексный путь указывается в параметре cellForItemAtIndexPath этого метода. Вы можете запросить индексы section и row этого элемента из индексного пути.

Перейдем к файлу реализации контроллера сборного вида (ViewController.m). Этот контроллер мы создали в разделе 5.1. Реализуем в данном файле рассмотренные ранее методы источника данных сборного вида:

#import «ViewController.h»

@implementation ViewController

/* Пока мы не собираемся возвращать никаких секций */

— (NSInteger)collectionView:(UICollectionView *)collectionView

numberOfItemsInSection:(NSInteger)section{

return 0;

}

/* Мы пока не знаем, как возвращать секции в сборный вид, поэтому для начала возвратим здесь nil */

— (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView

cellForItemAtIndexPath:(NSIndexPath *)indexPath{

return nil;

}

@end

На данном этапе этот код можно считать полным. Но, как было указано в разделе 5.1, при попытке его запустить приложение аварийно завершится. Дело в том, что делегат приложения устанавливает макетный объект сборного вида в значение nil. Эта проблема никуда не исчезла, мы собираемся устранить ее в разделе 5.3.

См. также

Разделы 5.0 и 5.1.

5.3. Обеспечение последовательной компоновки в сборном виде

Постановка задачи

Требуется, чтобы ваш сборный вид был скомпонован как таблица (сетка), чтобы его содержимое отображалось примерно так же, как на рис. 5.1.

Решение

Создайте экземпляр класса UICollectionViewFlowLayout, инстанцируйте контроллер сборного вида с помощью выделенного метода-инициализатора initWithCollectionViewLayout: из класса UICollectionViewController, а затем передайте этому методу ваш макетный объект.

Обсуждение

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

• minimumLineSpacing — значение с плавающей точкой, сообщающее макету с последовательной компоновкой минимальное количество точек, которые необходимо зарезервировать между рядами. Макетный объект может выделить и больше пространства, чтобы компоновка выглядела красиво, но меньше выделить не может. Если ваш сборный вид слишком мал и в него не помещаются все элементы, они будут обрезаться, как и любые другие виды в iOS SDK.

• minimumInteritemSpacing — значение с плавающей точкой, сообщающее макету с последовательной компоновкой минимальное количество точек, которые необходимо зарезервировать между ячейками в одной строке. Опять же это минимальное количество точек, и макет может увеличить это количество в зависимости от размера сборного вида.

• itemSize — величина CGSize, соответствующая размеру каждой ячейки в сборном виде.

• scrollDirection — значение типа UICollectionViewScrollDirection, сообщающее макету с последовательной компоновкой, как должно прокручиваться содержимое сборного вида. Содержимое может прокручиваться либо по горизонтали, либо по вертикали, но не в обоих направлениях одновременно. По умолчанию это свойство имеет значение UICollectionViewScrollDirectionVertical, но вы можете изменить его на UICollectionViewScrollDirectionHorizontal.

• sectionInset — значение типа UIEdgeInsets, задающее размер полей вокруг каждой секции. В принципе, поля — это пространство, которое не относится ни к одной из ячеек. Для создания таких отступов можно воспользоваться функцией UIEdgeInsetsMake. У каждого поля есть верхний, нижний, правый и левый край, все они обозначаются числами с плавающей точкой. Не волнуйтесь, если это объяснение кажется путаным — вскоре все встанет на свои места.

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

#import «AppDelegate.h»

#import «ViewController.h»

@implementation AppDelegate

— (UICollectionViewFlowLayout *) flowLayout{

UICollectionViewFlowLayout *flowLayout =

[[UICollectionViewFlowLayout alloc] init];

flowLayout.minimumLineSpacing = 20.0f;

flowLayout.minimumInteritemSpacing = 10.0f;

flowLayout.itemSize = CGSizeMake(80.0f, 120.0f);

flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

flowLayout.sectionInset = UIEdgeInsetsMake(10.0f, 20.0f, 10.0f, 20.0f);

return flowLayout;