使 UICollectionView 看起来像 iOS 日历应用程序的最佳方法
Best approach for a UICollectionView to look like the iOS calendar app
我正在构建一个应用程序，我确实需要在其中显示一个列表，就像在 iOS 日历应用程序中看到的那样。我需要创建一个 collectionView，我可以让单元格扩展到足以覆盖它们各自的时间，如下所示：
我尝试了各种方法，包括 Github 中的 this project，但我不明白如何在另一个项目中使用它
除了这个项目，我在探索不同的方法时使用 UITableViewController 快速制作：
但我并没有真正到达我想去的地方。我需要在第一张图片中看到设计，想知道是否有人可以指出正确的方向来实现这一目标？
非常感谢您的帮助！！
更新：
实际的单元格框架不应该代表一个小时的开始吗，10:00 在这个例子中？ （而不是定制的分隔符）
更新
为什么层次结构看起来像这样：
这种定位似乎是 "blocking" 单元格的触摸，didSelectItemAtIndexPath 方法没有被调用。这适用于比其他单元格更靠后的单元格。
我不认为这很难做到。
你只需要一个不同于你尝试过的视角。
使所有 CollectionView 单元格的大小相同。它们代表 1 小时的时间，所以它们应该具有相同的大小。
然后在每个单元格中有另一个视图。这是表明有一个事件的那个。您将为该视图赋予颜色，并根据事件开始或结束的时间将其放置在单元格中。
因此，在 cellForRowAtIndexPath 中，您将检查您的事件，如果此单元格有任何事件，那么您将显示此事件视图，为其着色并定位。如果您将单元格设置为 60，则定位视图会变得非常容易。例如，如果事件开始于 1:20，在第 1 小时的单元格中，您将调整事件视图的大小 (0, 20, 320, 40)。
根据问题评论中的讨论，使用 Custom Collection View Layout library linked in the question is suitable for the mentioned problem which can be easily integrated using CocoaPods。
UICollectionView 可使用自定义 UICollectionViewLayout 进行高度自定义。请参阅 creating custom layouts.
的苹果官方文档
坦率地说，Apple 的文档对我们大多数人来说太多了。因此，您可以查找 (google) custom UICollectionViewLayout tutorial，浏览您认为最简单的任何一个，然后继续使用该库来满足您的特定需求。
您确实应该使用 UICollectionView 以及自定义布局。只需提供 supplementary views 来构建基本的每日时间表（每小时一个视图），然后使用 cells 来设置您的事件。
subclassing UICollectionViewLayout时，需要实现几个方法：
collectionViewContentSize 应该 return 高度等于小时数 (24) 乘以代表一个小时的补充视图的高度。prepareLayout 几乎无所不能。在该方法中，您计算需要使用的每个 layoutAttributes。通过获取事件的时间及其持续时间，您可以计算每个事件的帧。补充视图框架（每个 "hour" 块）也非常简单，因为它们的高度是固定的（origin.y = 固定高度乘以小时）。layoutAttributesForElementsInRect: 简单地遍历您之前准备的 layoutAttributes 和 return 其框架与提供的框架相交的所有框架。layoutAttributesForItemAtIndexPath: 找到并 return 单元格的 layoutAttributes 匹配提供的 indexPath。
layoutAttributesForSupplementaryViewOfKind:atIndexPath 找到并 return 补充视图的 layoutAttributes 计算提供的 indexPath。
接下来，您将该布局的实例提供给集合视图：
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:myCustomLayout]
然后，您只需通过 UICollectionView 的委托和数据源为补充视图（a.k.a 小时块）和单元格提供所需的视图。如果您需要 UIViewController 提供更多标准 delegate/dataSource!
的信息，请随意在您的自定义布局中创建自定义委托
注意：由于指示一小时开始的线位于单元格顶部边框下方的几个像素处，因此您需要将每次事件移动相同数量的像素。假设每行上方有 6 个像素，每个小时块的高度为 60 像素，那么如果偶数从凌晨 2 点开始，您将设置它的 origin.y = 2 * 60 + 6（2 小时 * 每小时 60 像素 + 6 像素填充）。您还需要将最后一个单元格块调整为高 6 像素，因为它下面没有其他单元格。
我建议您阅读 the official documentation 关于创建自定义布局的内容。
为您提供帮助：我做了一个quick sample project，因为自己制作布局有时会很麻烦。去检查 CalendarViewLayout class，我添加了一些注释来解释我是如何处理填充的。这是它的样子：
我正在构建一个应用程序，我确实需要在其中显示一个列表，就像在 iOS 日历应用程序中看到的那样。我需要创建一个 collectionView，我可以让单元格扩展到足以覆盖它们各自的时间，如下所示：
我尝试了各种方法，包括 Github 中的 this project，但我不明白如何在另一个项目中使用它
除了这个项目，我在探索不同的方法时使用 UITableViewController 快速制作：
但我并没有真正到达我想去的地方。我需要在第一张图片中看到设计，想知道是否有人可以指出正确的方向来实现这一目标？
非常感谢您的帮助！！
更新：
实际的单元格框架不应该代表一个小时的开始吗，10:00 在这个例子中？ （而不是定制的分隔符）
更新
为什么层次结构看起来像这样：
这种定位似乎是 "blocking" 单元格的触摸，didSelectItemAtIndexPath 方法没有被调用。这适用于比其他单元格更靠后的单元格。
我不认为这很难做到。
你只需要一个不同于你尝试过的视角。
使所有 CollectionView 单元格的大小相同。它们代表 1 小时的时间，所以它们应该具有相同的大小。
然后在每个单元格中有另一个视图。这是表明有一个事件的那个。您将为该视图赋予颜色，并根据事件开始或结束的时间将其放置在单元格中。 因此，在 cellForRowAtIndexPath 中，您将检查您的事件，如果此单元格有任何事件，那么您将显示此事件视图，为其着色并定位。如果您将单元格设置为 60，则定位视图会变得非常容易。例如，如果事件开始于 1:20，在第 1 小时的单元格中，您将调整事件视图的大小 (0, 20, 320, 40)。
根据问题评论中的讨论，使用 Custom Collection View Layout library linked in the question is suitable for the mentioned problem which can be easily integrated using CocoaPods。
UICollectionView 可使用自定义 UICollectionViewLayout 进行高度自定义。请参阅 creating custom layouts.
坦率地说，Apple 的文档对我们大多数人来说太多了。因此，您可以查找 (google) custom UICollectionViewLayout tutorial，浏览您认为最简单的任何一个，然后继续使用该库来满足您的特定需求。
您确实应该使用 UICollectionView 以及自定义布局。只需提供 supplementary views 来构建基本的每日时间表（每小时一个视图），然后使用 cells 来设置您的事件。
subclassing UICollectionViewLayout时，需要实现几个方法：
collectionViewContentSize应该 return 高度等于小时数 (24) 乘以代表一个小时的补充视图的高度。prepareLayout几乎无所不能。在该方法中，您计算需要使用的每个 layoutAttributes。通过获取事件的时间及其持续时间，您可以计算每个事件的帧。补充视图框架（每个 "hour" 块）也非常简单，因为它们的高度是固定的（origin.y = 固定高度乘以小时）。layoutAttributesForElementsInRect:简单地遍历您之前准备的 layoutAttributes 和 return 其框架与提供的框架相交的所有框架。layoutAttributesForItemAtIndexPath:找到并 return 单元格的 layoutAttributes 匹配提供的 indexPath。layoutAttributesForSupplementaryViewOfKind:atIndexPath找到并 return 补充视图的 layoutAttributes 计算提供的 indexPath。
接下来，您将该布局的实例提供给集合视图：
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:myCustomLayout]
然后，您只需通过 UICollectionView 的委托和数据源为补充视图（a.k.a 小时块）和单元格提供所需的视图。如果您需要 UIViewController 提供更多标准 delegate/dataSource!
的信息，请随意在您的自定义布局中创建自定义委托注意：由于指示一小时开始的线位于单元格顶部边框下方的几个像素处，因此您需要将每次事件移动相同数量的像素。假设每行上方有 6 个像素，每个小时块的高度为 60 像素，那么如果偶数从凌晨 2 点开始，您将设置它的 origin.y = 2 * 60 + 6（2 小时 * 每小时 60 像素 + 6 像素填充）。您还需要将最后一个单元格块调整为高 6 像素，因为它下面没有其他单元格。
我建议您阅读 the official documentation 关于创建自定义布局的内容。
为您提供帮助：我做了一个quick sample project，因为自己制作布局有时会很麻烦。去检查 CalendarViewLayout class，我添加了一些注释来解释我是如何处理填充的。这是它的样子：