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

См. также

Раздел 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).