如何制作类似于 Apple News App 的收藏视图？答案

【问题标题】：How to make a collection view similar to the Apple News App?如何制作类似于 Apple News App 的收藏视图？
【发布时间】：2017-06-26 15:29:14
【问题描述】：

我正在尝试创建一个类似于 iOS 10 上 Apple News 应用程序中的布局的应用程序。有不同的部分，如 Top Stories、For you 等。我放了一张 For You 的图片以下部分：

上面的布局在顶部有一篇大文章（120 亿加仑的水文章），然后是 2 篇横向文章（Ron howard 和 google cloud），最后是两篇纵向文章（philando castile 和 Daniel Day-lewis）。

我的问题是如何实现这一目标？我在想的是UICollectionView 中有多个部分（For you、Technology、Politics 等的部分），每个部分都有一个主 UICollectionView 单元。然后在该主单元格内，您还有另外 3 个不同的单元格（一个用于大文章，一个用于垂直文章，一个用于水平文章）。这是实现这一目标的好方法吗？喜欢为一个UICollectionView 创建这么多单元格吗？

【问题讨论】：

您需要为您的集合视图构建自定义流布局。然后，您基本上可以构建您喜欢的任何样式，而无需嵌套集合视图单元格。网上可以找到很多例子，随便搜索自定义UICollectionViewFlowLayout
@BJHStudios 非常感谢！这正是我想要的。我很快就会看看它:)

标签： ios uicollectionview uicollectionviewcell

【解决方案1】：

您可以使用UICollectionFlowLayout 来布局您想要的任何内容。

这是我刚刚制作的example。

希望这能有所帮助。

【讨论】：

非常感谢，这是完美的。我只是对ViewController.swift 感到好奇，我看不到您将自定义流程布局设置为集合视图的任何地方。更具体地说，这个属性：@IBOutlet weak var flowLayout: AppleNewsFlowLayout! { ... }
AppleNewsFlowLayout 设置在collectionView of StoryBoard，您可以在Attributes Inspector 上查看。
将布局类添加到集合视图后，您可以在Document Outline 看到AppleNewsFlowLayout 实体（黄色立方体）。