Rambler.iOS #7: Построение сложного табличного интерфейса

Андрей Резанов
Построение сложного
табличного интерфейса

7.8
Название
Тип
Тег №2Тег №1
Станция метро
Адерс места
Название места
Лучшие Недавние
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco…... далее
Имя пользователя
Дата
exercitation ullamco… далее
Заголовок блока
Важная информация
Дополнительная информация
Режим работы
Расписание работы
Режим работы:

7.8
Название
Тип
Дата

Построение сложного табличного интерфейса
Постановка задачи – Афиша iOS
• Уметь строить 30+ различных ячеек
• Располагать ячейки в различном порядке в зависимости
от 10 + конфигураций экрана
• В будущем необходимо добавлять новый ячейки /
конфигурации экрана

Решение в лоб! Why not?
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
Creation *creation = [self itemAtIndexPath:indexPath];
NSString *cellIdentifier = [self cellIdentifierForObject:creation
atIndexPath:indexPath];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier
forIndexPath:indexPath];
if ([cellIdentifier isEqualToString:RCATitleTableViewCell]) {
TitleTableViewCell *titleCell = (TitleTableViewCell *)cell;
[titleCell fillWithCreation:creation];
} else if ([cellIdentifier isEqualToString:RCARatingTableViewCell]) {
RatingTableViewCell *ratingCell = (RatingTableViewCell *)cell;
[ratingCell fillWithRating:creation.rating];
}
...
return cell;
}

• Неконтролируемый рост полотна кода в cellForRow
• Сложно добавлять новые ячейки, модифицировать
порядок ячеек
• Нарушение принципа единственной ответственности
(SOLID)
Решение в лоб - Проблемы

Решение в лоб! Why not?
Декомпозиция

Шаг 1. Внедряем View-модели 🐣
Модель представления - абстракция представления,
которая содержит свойства Модели.

Шаг 1. Внедряем View-модели 🐣

Класс TableViewModel
. . .
id viewModel = [self viewModelAtIndexPath:indexPath];
. . .
}
1. Получаем view-модель по indexPath

. . .
Class cellClass = [self cellClassFromViewModel:viewModel];
. . .
}
2. Получаем класс ячейки у view-модели

. . .
cell = [tableView
dequeueReusableCellWithIdentifier:NSStringFromClass(cellClass)];
. . .
}
3. Реюзаем / создаем ячейку

. . .
[cell updateCellWithViewModel:viewModel];
. . .
}
4. Заполняем ячейку данными из view-модели

Класс TableViewActions
- (CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath {
. . .
id viewModel = [model viewModelAtIndexPath:indexPath];
. . .
}
1. Получаем view-модель по indexPath

. . .
NSString *cellHeightID = [self cellHeightIDWithTableView:tableView
viewModel:viewModel];
NSNumber *cachedHeight = [self.cellHeightCache objectForKey:cellHeightID];
if (cachedHeight) {
return [cachedHeight floatValue];
}
. . .
}
2. Если есть закэшированное значение
высоты ячейки, то возвращаем его

. . .
Class cellClass = [viewModel cellClass];
. . .
}
3. Получаем класс ячейки у view-модели

. . .
CGFloat height;
if ([cellClass
respondsToSelector:@selector(heightForViewModel:atIndexPath:tableView:)]) {
height = [cellClass heightForViewModel:viewModel
atIndexPath:indexPath
tableView:tableView];
} else {
. . .
}
4. Если ячейки умеет сама рассчитывать
высоту, то возвращаем ее

. . .
UITableViewCell<Cell> *cell = [self tableViewCellWithViewModel:tableView
tableView:tableView];
[cell updateCellWithViewModel:viewModel];
height = [self tableView:tableView heightForTableViewCell:cell];
. . .
}
5. Считаем высоту через статичный
прототип ячейки

. . .
[cellHeightCache setObject:@(height)
forKey:cellHeightID];
. . .
}
6. Кэшируем значение высоты

Чего-то не хватает?

Метод построения view-моделей
2000 + строк кода

Шаблон проектирования Строитель (англ. Builder)
Порождающий шаблон проектирования
предоставляет способ создания составного
объекта.

Шаг 2. Внедряем Билдер

Диаграмма последовательности (англ. Sequence diagram)

Выводы
1. Внедрение view-моделей дает: слабую связность, дополнительный
слой между моделью и view
2. Никакой логики во view
3. Чистый и универсальный cellForRow, heightForRow
4. Внедрение билдера дает: разделение логики построения блоков ячеек
от логики сбора их вместе
5. Легкая возможность расширения данной схемы. Как появление новых
блоков/ячеек, так и появление новых экранов, например - для квестов!
6. Модульность кода

Литература и ссылки
The "Gang of Four” - Design Patterns: Elements of Reusable
Object-Oriented Software
Erick Buck, Donald Yachtman - Cocoa Design Patterns
OBJC.IO Issue 13 - Architecture
OODesign.com - Builder pattern
NimbusKit - Table View Models

Спасибо!

Rambler.iOS #7: Построение сложного табличного интерфейса

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Rambler.iOS #7: Построение сложного табличного интерфейса

Semelhante a Rambler.iOS #7: Построение сложного табличного интерфейса (20)

Mais de RAMBLER&Co

Mais de RAMBLER&Co (15)

Rambler.iOS #7: Построение сложного табличного интерфейса