swift - 如何创建 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()滚动是平滑的，但数据的显示不正确，因为单元格正在重用。

谁能给我一个关于如何实现这样的布局的更好的想法？先感谢您。

标签： swiftuitableviewuicollectionview

Answer 1

您遇到闪烁的原因可能有多种，事实上，该 ViewController 的第一个版本在旧设备上存在相同的问题。我建议首先使用时间分析器分析您的应用程序，以调查您遇到闪烁的原因。很有可能，因为我们发现不是一个主要原因，而是一组较小的问题，当它们在主线程上加在一起时会导致闪烁。下面我将详细描述我们如何设法减少闪烁效果。

ViewController 包含一个垂直集合视图，每一行都是它自己的单元格，它拥有一个水平集合视图。

我们试图确保的一件事是尽可能高效地绘制单元格。所有的单元格和视图都是通过 ViewModels 配置的，在我们的例子中是一个 PODO（仅属性数据对象）。ViewModel 可以很容易地在后台线程上进行预处理，并包含例如任何方向的 url、标题、隐藏/显示按钮、单元格大小等。另外，它使测试变得非常容易。我们确保所有图像的尺寸都正确，因此不需要时间来缩放图像，同时每个视觉项目都是不透明的，并被光栅化为正确的屏幕比例。我们还发现，如果每个单元格都使用“preferredLayoutAttributesFitting”，也可以帮助减少闪烁。

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

我希望这会有所帮助。