Как создать макет домашней страницы iflix

Question

Привет, ребята, пожалуйста, дайте мне идею, как создать список, похожий на домашнюю страницу iflix (изображение прилагается ниже). Я попытался использовать табличное представление с представлением коллекции внутри ячейки, но мне не нравится производительность, потому что она мигает при прокрутке из-за перезагрузки ячейки представления коллекции.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell: CustomCell = self.tableView.dequeueReusableCell(withIdentifier: "Cell") as! Cell

        cell.bind(data: self.datas[indexPath.row])

        cell.collectionView.reloadData()

        cell.delegate = self


        return cell
    }

Когда я удалил cell.collectionView.reloadData(), прокрутка плавная, но отображение данных некорректно, поскольку ячейки используются повторно.

Может кто-нибудь дать мне лучшее представление о том, как реализовать такой макет? Заранее спасибо.

Answer 1

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

ViewController содержит одно вертикальное представление коллекции, каждая строка является собственной ячейкой, которой принадлежит горизонтальное представление коллекции.

Одна вещь, которую мы пытаемся обеспечить, это то, что рисование ячейки максимально эффективно. Все ячейки и представления настраиваются с помощью ViewModels, которая в нашем случае является PODO (объект данных только для свойств). Модели ViewModel могут быть легко предварительно обработаны в фоновом потоке и содержат, например, URL, заголовки, кнопки скрытия / отображения, размеры ячеек и т. Д. Для любой ориентации. Кроме того, это очень легко проверить. Мы гарантируем, что все изображения имеют правильный размер, поэтому не требуется времени для масштабирования изображения, а также что каждый визуальный элемент непрозрачен и растеризуется до правильного масштаба экрана. Для нашего кода мы также обнаружили, что если в каждой ячейке используется «extendedLayoutAttributesFitting», это также может помочь уменьшить мерцание.

Следующая часть состоит в том, чтобы попытаться уменьшить количество усилий, затрачиваемых на вызов reloadData. Если каждая ячейка в строке имеет одинаковый размер, то использование UICollectionViewDataSource может быть более трудоемким, чем установка размера элемента, вместо этого вы можете установить itemSize в xib / storybaord или использовать UICollectionViewFlowLayout. Перед тем, как ячейка будет показана пользователю, будут вызваны методы collectionView cellForItemAt и collectionView willDisplay, вы можете попытаться разделить работу по настройке ячейки на эти два вызова метода.

Надеюсь, это поможет.