如何创建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配置的，在我们的案例中，ViewModels是PODO（仅属性数据对象）。 ViewModels可以很容易地在后台线程上进行预处理，并且包含任何方向的url，标题，隐藏/显示按钮，单元格大小等。另外，它使测试变得非常容易。我们确保所有图像的大小都是正确的，因此没有时间缩放图像，并且每个视觉项目都是不透明的并且被光栅化为正确的屏幕比例。我们还为我们的代码发现，如果每个单元格都使用“ preferredLayoutAttributesFitting”，这也有助于减少闪烁。

下一部分将尝试帮助减少调用reloadData时的工作量。如果行中的每个单元格大小相同，则使用UICollectionViewDataSource可能比设置项目大小更耗时，而您可以在xib / storybaord中设置itemSize或使用UICollectionViewFlowLayout。在向用户显示单元之前，将调用“ collectionView cellForItemAt”和“ collectionView willDisplay”方法，您可以尝试通过这两个方法调用来拆分单元配置工作。

我希望有帮助。