{"id":16818484,"url":"https://github.com/ninjaprox/nvbnbcollectionview","last_synced_at":"2025-03-17T03:31:53.447Z","repository":{"id":62448816,"uuid":"40221898","full_name":"ninjaprox/NVBnbCollectionView","owner":"ninjaprox","description":"A Airbnb-inspired collection view","archived":false,"fork":false,"pushed_at":"2016-01-31T17:44:20.000Z","size":9838,"stargazers_count":251,"open_issues_count":2,"forks_count":30,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-03-15T05:44:56.601Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninjaprox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-05T03:09:11.000Z","updated_at":"2023-08-23T03:28:01.000Z","dependencies_parsed_at":"2022-11-01T23:17:24.964Z","dependency_job_id":null,"html_url":"https://github.com/ninjaprox/NVBnbCollectionView","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninjaprox%2FNVBnbCollectionView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninjaprox%2FNVBnbCollectionView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninjaprox%2FNVBnbCollectionView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninjaprox%2FNVBnbCollectionView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninjaprox","download_url":"https://codeload.github.com/ninjaprox/NVBnbCollectionView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221671569,"owners_count":16861280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T10:50:14.748Z","updated_at":"2024-10-27T11:53:59.420Z","avatar_url":"https://github.com/ninjaprox.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"NVBnbCollectionView\n===================\n\n[![Build Status](https://travis-ci.org/ninjaprox/NVBnbCollectionView.svg?branch=master)](https://travis-ci.org/ninjaprox/NVBnbCollectionView)\n\n# Introduction\n\nNVBnbCollectionView is an Airbnb-inspired collection view.\n\n# Demo\n\n## Portrait\n\n![Portrait](https://raw.githubusercontent.com/ninjaprox/NVBnbCollectionView/master/Demo-portrait.gif)\n\n## Landscape\n\n![Landscpae](https://raw.githubusercontent.com/ninjaprox/NVBnbCollectionView/master/Demo-landscape.gif)\n\nFor first-hand experience, just open the project and run it.\n\n# Installation\n\n## Cocoapods\n\nInstall Cocoapods if need be\n\n```bash\n$ gem install cocoapods\n```\n\nAdd NVActivityIndicatorView in your `Podfile`\n\n```bash\npod 'NVBnbCollectionView'\n```\n\nThen, run the following command\n\n```bash\n$ pod install\n```\n\n## Manual\n\nCopy NVBnbCollectionView folder to your project. That's it.\n\n# Layout\n\nTo keep it simple in first version, I use fixed layout as in Airbnb app.\n\n![Layout](https://raw.githubusercontent.com/ninjaprox/NVBnbCollectionView/master/Layout.jpg)\n\nCells with red border are parallax cell. Others are grid cell.\n\nGreen regions are grid padding `gridPadding`.\n\nOrange regions are cell spacing `gridCellSpacing`.\n\n## Size\n\nIn portrait, height of grid cell and parallax cell are specified in `gridCellSize` and `parallaxCellSize` respectively in layout, width will be calculated base on `gridPadding` and collection view width.\n\nThe same is applied in landspace and for other (i.e. header, more loader and spacing between grid cells).\n\n# Usage\n\nThere is not much difference between `NVBnbCollectionView` and `UICollectionView`, so just use it as you normally do with `UICollectionView`.\n\n## Storyboard\n\nWith storyboard, change class of collection view to `NVBnbCollectionView` and layout to `NVBnbCollectionViewLayout`.\n\nAll properties of layout are inspectable so you can change sizes in layout directly in storyboard. However, `IBInspectable` requires Xcode 6 and above.\n\n## Code\n\nIf you create collection view from code, the following example can help:\n\n```objective-c\nNVBnbCollectionViewLayout *layout = [[NVBnbCollectionViewLayout alloc] init];\nNVBnbCollectionView *collectionView = [[NVBnbCollectionView alloc] initWithFrame:CGRectMake(0, 0, 500, 500) collectionViewLayout:layout];\n\nlayout.gridCellSize = CGSizeMake(150, 150);\nlayout.parallaxCellSize = CGSizeMake(300, 300);\n// Set other properties of layout if need be\n```\n\nAgain, what you can do with `UICollectionView`, do the same with `NVBnbCollectionView`.\n\n## Data source\n\nCollection view needs data source to provide information about cells, your class must conform `NVBnbCollectionViewDatasource` and 3 required methods:\n\n* `NVBnbCollectionView` needs to know how many items will be displayed:\n\n```objective-c\n- (NSInteger)numberOfItemsInBnbCollectionView:(NVBnbCollectionView *)collectionView;\n```\n\n* How a grid cell looks like:\n\n```objective-c\n- (UICollectionViewCell *)bnbCollectionView:(NVBnbCollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;\n```\n\n* How a parallax cell looks like:\n\n```objective-c\n- (NVBnbCollectionViewParallaxCell *)bnbCollectionView:(NVBnbCollectionView *)collectionView parallaxCellForItemAtIndexPath:(NSIndexPath *)indexPath;\n```\n\nIn addition, if collection view has header and load more ability, it should know how the header, more loader look like.\n\n* How header looks like:\n\n```objective-c\n- (UICollectionReusableView *)bnbCollectionView:(NVBnbCollectionView *)collectionView headerAtIndexPath:(NSIndexPath *)indexPath;\n```\n\n* How more loader looks like:\n\n```objective-c\n- (UIView *)moreLoaderInBnbCollectionView:(NVBnbCollectionView *)collectionView;\n```\n\n## Delegate\n\n`NVBnbCollectionViewDelegate` is subclass of `UICollectionViewDelegate` so it inherits all abilities from its parent, plus one method to notify controller whenever the collection view needs more data.\n\n```objective-c\n- (void)loadMoreInBnbCollectionView:(NVBnbCollectionView *)collectionView;\n\n```\n\n## Parallax cell\n\n`NVBnbCollectionViewParallaxCell` is subclass of `UICollectionViewCell` with built-in parallax effect image view. Therefore, you class should be subclass of `NVBNbCollectionViewParallaxCell` to have this ability.\n\nTo set image used parallax effect, use `parallaxImage` property. Example:\n\n```objective-c\nNVBnbCollectionViewParallaxCell *parallaxCell = [collectionView dequeueReusableCellWithReuseIdentifier:\u003cidentifier\u003e forIndexPath:indexPath];\n\ncell.parallaxImage = [UIImage imageNamed:\u003cimage name\u003e];\n```\n\nYou can also set `maxParallaxOffset` in `NVBnbCollectionViewLayout` to adjust how much the parallax image will be shifted.\n\n## Header\n\nTo add header, set `headerSize` in layout greater than 0.\n\nRegister header to collection view using kind `NVBnbCollectionElementKindHeader`\n\n```objective-c\n[collectionView registerNib:\u003cnib\u003e forSupplementaryViewOfKind:NVBnbCollectionElementKindHeader withReuseIdentifier:\u003cidentifier\u003e];\n[collectionView registerClass:\u003cnib\u003e forSupplementaryViewOfKind:NVBnbCollectionElementKindHeader withReuseIdentifier:\u003cidentifier\u003e];\n```\n\nHeader must be subclass of `UICollectionReusableView`.\n\nIf collection view has header, you have to implement `bnbCollectionView:headerAtIndexPath:` in data source. Otherwise, this will cause error.\n\n```objective-c\n- (UICollectionReusableView *)bnbCollectionView:(NVBnbCollectionView *)collectionView headerAtIndexPath:(NSIndexPath *)indexPath {\n    UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind: NVBnbCollectionElementKindHeader withReuseIdentifier:\u003cidentifier\u003e forIndexPath:indexPath];\n    \n    return header;\n}\n```\n\nIf collection view doesn't have header, you can omit `bnbCollectionView:headerAtIndexPath:` or just return `nil`.\n\n## More loader\n\n`NVBnbCollectionView` itself has load more ability. There is a more loader section below collection view to indicate the collection view waiting for more data. Size of this section is specified in  `moreLoaderSize` in `NVBnbCollectionViewLayout`.\n\nYou can change the activity indicator view in more loader section by providing your custom one in `moreLoaderInBnbCollectionView:collectionView:`. By default, `UIActivityIndicatorView` will be used. However, if you would like something else nicer and ready to use, check [NVActivityIndicatorView](https://github.com/ninjaprox/NVActivityIndicatorView).\n\nOnce collection view hits its bottom, it will delegate to `loadMoreInBnbCollectionView:collectionView`. In this way, controller has chance to load more data. While doing this, collection view will not delegate any more until `loadingMore` is set to `false`. For example:\n\n```objective-c\n- (void)loadMoreInBnbCollectionView:(NVBnbCollectionView *)collectionView {\n    [self loadMore];\n}\n\n- (void)loadMore {\n    // Your async call to fetch more data\n    // Once done, let collection view knows it should delegate again the next time hitting its bottom\n    collectionView.loadingMore = false;\n}\n```\n\nYou can opt-out this ability by setting `enableLoadMore` in `NVBnbCollectionView`.\n\n# Documentation\n\nThis README literraly describes enough information you need to use `NVBnbCollectionView`. \n\nFor more details: [CocoaDocs](http://cocoadocs.org/docsets/NVBnbCollectionView/1.0.0/)\n\n# References\n\nTo create parallax effect, I read the following posts and borrowed a hunk of code. Read them if you want to know what happends behind the screen, not too complicated.\n\n* [Parallax Scrolling as a Category on UICollectionView](http://www.kurutepe.com/2015/02/parallax-scrolling-as-a-category-on-uicollectionview/)\n* [Parallax Scrolling](http://oleb.net/blog/2014/05/parallax-scrolling-collectionview/)\n\n# License\n\nThe MIT License (MIT)\n\nCopyright (c) 2015 Nguyen Vinh [@ninjaprox](http://twitter.com/ninjaprox)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninjaprox%2Fnvbnbcollectionview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fninjaprox%2Fnvbnbcollectionview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninjaprox%2Fnvbnbcollectionview/lists"}