NVBnbCollectionView 1.0.2

NVBnbCollectionView 1.0.2

×

测试已测试✓
语言语言 Obj-CObjective C
许可证 MIT
发布时间最后发布2016年1月

由 Vinh Nguyen 维护。

NVBnbCollectionView 1.0.2

介绍

NVBnbCollectionView 是一个受 Airbnb 启发的集合视图。

演示

纵向

Portrait

横向

Landscpae

为了获得第一手体验，只需打开项目并运行它。

安装

手动

将 NVBnbCollectionView 文件夹复制到您的项目中。就是这样。

布局

在第一个版本中，为了保持简单，我使用了与 Airbnb 应用中相同的固定布局。

Layout

带有红色边框的单元格是视差单元格。其他的是网格单元格。

绿色区域是网格填充 gridPadding。

橙色区域是单元格间距 gridCellSpacing。

大小

在纵向中，网格单元格和视差单元格的高度分别在布局中的 gridCellSize 和 parallaxCellSize 中指定，宽度将根据 gridPadding 和集合视图宽度进行计算。

同样的原则也适用于横向以及其他（例如，页眉，更多加载器以及网格单元格之间的间距）。

用法

NVBnbCollectionView 与 UICollectionView 之间没有太大的区别，所以就像通常使用 UICollectionView 那样使用它。

故事板

使用故事板时，将集合视图的类更改为 NVBnbCollectionView，并将布局更改为 NVBnbCollectionViewLayout。

布局的所有属性都可以检查，因此您可以直接在故事板中更改布局中的尺寸。然而，IBInspectable 需要 Xcode 6 以上版本。

代码

如果您从代码创建集合视图，以下示例可能会有所帮助

NVBnbCollectionViewLayout *layout = [[NVBnbCollectionViewLayout alloc] init];
NVBnbCollectionView *collectionView = [[NVBnbCollectionView alloc] initWithFrame:CGRectMake(0, 0, 500, 500) collectionViewLayout:layout];

layout.gridCellSize = CGSizeMake(150, 150);
layout.parallaxCellSize = CGSizeMake(300, 300);
// Set other properties of layout if need be

再次强调，您可以与 UICollectionView 做的事情，也可以与 NVBnbCollectionView 做同样的事情。

数据源

集合视图需要数据源来提供关于单元格的信息，您的类必须符合 NVBnbCollectionViewDatasource 接口和 3 个必需的方法。

  • NVBnbCollectionView 需要知道将要显示多少个项目。
- (NSInteger)numberOfItemsInBnbCollectionView:(NVBnbCollectionView *)collectionView;
  • 网格单元格的看起来是什么样子。
- (UICollectionViewCell *)bnbCollectionView:(NVBnbCollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
  • 视差单元格的看起来是什么样子。
- (NVBnbCollectionViewParallaxCell *)bnbCollectionView:(NVBnbCollectionView *)collectionView parallaxCellForItemAtIndexPath:(NSIndexPath *)indexPath;

此外，如果集合视图有头部和加载更多功能，它还应知道头部和更多加载器的样子。

  • 头部看起来是什么样子。
- (UICollectionReusableView *)bnbCollectionView:(NVBnbCollectionView *)collectionView headerAtIndexPath:(NSIndexPath *)indexPath;
  • 更多加载器看起来是什么样子。
- (UIView *)moreLoaderInBnbCollectionView:(NVBnbCollectionView *)collectionView;

代理

NVBnbCollectionViewDelegate 是 UICollectionViewDelegate 的子类，因此继承了父类的所有能力，并添加了一个方法，用于在集合视图需要更多数据时通知控制器。

- (void)loadMoreInBnbCollectionView:(NVBnbCollectionView *)collectionView;

视差单元格

NVBnbCollectionViewParallaxCell 是具有内置视差效果图像视图的 UICollectionViewCell 的子类。因此，您的类应该是 NVBNbCollectionViewParallaxCell 的子类才能拥有这种能力。

要设置用于视差效果的图像，请使用 parallaxImage 属性。示例

NVBnbCollectionViewParallaxCell *parallaxCell = [collectionView dequeueReusableCellWithReuseIdentifier:<identifier> forIndexPath:indexPath];

cell.parallaxImage = [UIImage imageNamed:<image name>];

您也可以在 NVBnbCollectionViewLayout 中设置 maxParallaxOffset 以调整视差图像将偏移多少。

头部

要添加头部，请在布局中将 headerSize 设置大于 0。

使用类型 NVBnbCollectionElementKindHeader 将头部注册到集合视图中

[collectionView registerNib:<nib> forSupplementaryViewOfKind:NVBnbCollectionElementKindHeader withReuseIdentifier:<identifier>];
[collectionView registerClass:<nib> forSupplementaryViewOfKind:NVBnbCollectionElementKindHeader withReuseIdentifier:<identifier>];

头部必须是 UICollectionReusableView 的子类。

如果集合视图具有头部，您必须在数据源中实现 bnbCollectionView:headerAtIndexPath:。否则，这将导致错误。

- (UICollectionReusableView *)bnbCollectionView:(NVBnbCollectionView *)collectionView headerAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind: NVBnbCollectionElementKindHeader withReuseIdentifier:<identifier> forIndexPath:indexPath];

    return header;
}

如果集合视图没有头部，您可以选择省略 bnbCollectionView:headerAtIndexPath: 或简单地返回 nil。

更多加载器

NVBnbCollectionView 本身具有加载更多功能。在集合视图下方有一个更多加载器部分来指示集合视图正在等待更多数据。此部分的尺寸由 NVBnbCollectionViewLayout 中的 moreLoaderSize 指定。

您可以通过在 moreLoaderInBnbCollectionView:collectionView: 中提供自定义的来更改更多加载器部分的 Activity Indicator View。默认情况下，将使用 UIActivityIndicatorView。但是，如果您想使用更好看且可立即使用的项，请参阅 NVActivityIndicatorView。

一旦集合视图到达底部，它将委托给 loadMoreInBnbCollectionView:collectionView。这样，控制器就有机会加载更多数据。在进行此操作时，集合视图将不会委托任何更多操作，直到 loadingMore 被设置为 false。例如

- (void)loadMoreInBnbCollectionView:(NVBnbCollectionView *)collectionView {
    [self loadMore];
}

- (void)loadMore {
    // Your async call to fetch more data
    // Once done, let collection view knows it should delegate again the next time hitting its bottom
    collectionView.loadingMore = false;
}

您可以通过在 NVBnbCollectionView 中设置 enableLoadMore 来放弃此功能。

文档

这个 README 实际上描述了您需要使用 NVBnbCollectionView 的足够信息。

更多详情： CocoaDocs

参考

为了创建视差效果，我阅读了以下帖子并借用了部分代码。如果想要了解屏幕背后的情况，以下内容并不复杂。

许可

MIT 许可协议 (MIT)

版权所有（c）2015 Nguyen Vinh @ninjaprox