帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:AIR  collection  COL  Collect  VIEW  
A Airbnb-inspired collection view

  • 源代码名称:NVBnbCollectionView
  • 源代码网址:http://www.github.com/ninjaprox/NVBnbCollectionView
  • NVBnbCollectionView源代码文档
  • NVBnbCollectionView源代码下载
  • Git URL:
    git://www.github.com/ninjaprox/NVBnbCollectionView.git
  • Git Clone代码到本地:
    git clone http://www.github.com/ninjaprox/NVBnbCollectionView
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ninjaprox/NVBnbCollectionView
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • NVBnbCollectionView

    Build Status

    简介

    NVBnbCollectionView是一个airbnb的收集视图。

    演示

    Portrait

    Landscpae

    对于第一手经验,只要打开这个项目并运行它。

    安装

    Cocoapods

    如果需要,安装 Cocoapods

    $ gem install cocoapods

    Podfile 中添加 NVActivityIndicatorView

    pod 'NVBnbCollectionView'

    然后,运行以下命令

    $ pod install

    手册

    将NVBnbCollectionView文件夹复制到你的项目中。 完成。

    布局

    为了在第一版中保持简单,我使用固定布局作为Airbnb应用程序。

    Layout

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

    绿色区域是网格填充 gridPadding

    橙色区域是单元格间距 gridCellSpacing

    大小

    方法分别在 gridCellSizeparallaxCellSize 中分别指定栅格格和视差格的高度,并基于 gridPadding 和集合视图宽度分别计算出宽度。

    在landspace和其他( 例如 ) 中应用相同的。 头,更多加载器和网格单元之间的间距。

    用法

    NVBnbCollectionViewUICollectionView 之间没有多大差别,所以只需使用 UICollectionView 就可以了。

    Storyboard

    使用 Storyboard,将集合视图的类更改为 NVBnbCollectionView,并将它的设置为 NVBnbCollectionViewLayout

    布局的所有属性都是可以检查的,因此你可以在 Storyboard 中直接更改布局的大小。 但是,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;

    委托

    NVBnbCollectionViewDelegateUICollectionViewDelegate的子类,因此它从其父级继承所有功能,并在集合视图需要更多数据时,向控制器添加一个方法。

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

    视差单元

    NVBnbCollectionViewParallaxCellUICollectionViewCell的子类,内置了视差效果图像视图。 因此,类应该是 NVBnbCollectionViewParallaxCell的子类才能具有这里能力。

    要设置使用的视差效果,请使用 parallaxImage 属性。 例如:

    NVBnbCollectionViewParallaxCell *parallaxCell = [collectionView dequeueReusableCellWithReuseIdentifier:<identifier> forIndexPath:indexPath];
    cell.parallaxImage = [UIImage imageNamed:<image name>];

    你也可以在 NVBnbCollectionViewLayout 中设置 maxParallaxOffset 来调整视差图像的移动程度。

    若要添加页眉,请在大于 0的布局中设置 headerSize

    使用类型 NVBnbCollectionElementKindHeader的register 标头到集合视图

    [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: 默认情况下,将使用 UIActivityIndicatorView。 但是,如果你希望其他更好的东西可以使用,请检查 NVActivityIndicatorView。

    一旦集合视图到达它的底部,它将委托给 loadMoreInBnbCollectionView:collectionView 通过这种方式,控制器有机会加载更多的数据。 执行这里操作时,在 loadingMore 设置为 false 之前,集合视图将不再委托。 例如:

    - (void)loadMoreInBnbCollectionView:(NVBnbCollectionView *)collectionView {
     [selfloadMore];
    }
    - (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 来选择这个能力。

    文档

    这里自述文件literraly描述了你需要使用 NVBnbCollectionView的足够信息。

    有关详细信息,请参阅 CocoaDocs

    引用

    我看了下面的文章并借用了大量的代码,创造了视差效果。 如果你想知道屏幕后面的happends,不要太复杂。

    许可证

    麻省理工学院许可证( MIT )

    版权所有( c ) 2015 Nguyen Vinh @ninjaprox



    文章标签:COL  VIEW  Collect  collection  AIR  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语