DDCollectionViewFlowLayout
a CollectionViewFlowLayout implement the Waterfall Effect, it's also supported mutiple sections.
you can custom the header & footer, you also can custom the UICollectionViewCell.
now, you can set header sticky on the top when you scroll the collectionView in version 0.5.
Effects
Please clicked this link to see effect one
Please clicked this link to see effect two
Installation
DDCollectionViewFlowLayout is available through CocoaPods, to install
it simply add the following line to your Podfile:
pod "DDCollectionViewFlowLayout"
Alternatively, you can just drag the files from DDCollectionViewFlowLayout / Classes into your own project.
Usage
To run the example project; clone the repo, and run pod install from the Project directory first.
1.example like Wechat photo wall effect
DDCollectionViewFlowLayout *layout = [[DDCollectionViewFlowLayout alloc] init];
layout.delegate = self;
layout.enableStickyHeaders = YES; //set the header sticky if you want
[self.collectionView setCollectionViewLayout:layout];
implemention the DDCollectionViewDelegateFlowLayout & UICollectionViewDataSource @required or @optional methods
DDCollectionViewDelegateFlowLayout inherit UICollectionViewDelegateFlowLayout Protocol.
code:
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return [[dataDict allKeys] count];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
sortedArray = [[dataDict allKeys] sortedArrayUsingSelector:@selector(compare:)];
return [dataDict[sortedArray[section]] count];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(DDCollectionViewFlowLayout *)layout numberOfColumnsInSection:(NSInteger)section{
return 4;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
PhotoCell *cell = (PhotoCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"PhotoCell" forIndexPath:indexPath];
NSURL *url = dataDict[sortedArray[indexPath.section]][indexPath.row];
[_assetLibrary assetForURL:url
resultBlock:^(ALAsset *asset) {
[cell.photo setImage:[UIImage imageWithCGImage:asset.thumbnail]];
}
failureBlock:^(NSError *error) {
}];
return cell;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
if(kind == UICollectionElementKindSectionHeader){
UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
// header.backgroundColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.5f];
UILabel *lblTitle = (UILabel *)[header viewWithTag:2];
lblTitle.text = sortedArray[indexPath.section];
return header;
}
return nil;
}
#pragma mark - UICollectionView Delegate Methods
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 1;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 1;
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(1, 1, 1, 1);
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(80, 80);
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
return CGSizeMake(self.view.bounds.size.width, 30);
}
2.effect like waterfall
example code:
#pragma mark - UICollectionView DataSource Methods
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return dataList.count;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(DDCollectionViewFlowLayout *)layout numberOfColumnsInSection:(NSInteger)section{
return 3;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
WaterfallCell *cell = (WaterfallCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"PhotoCell" forIndexPath:indexPath];
ALAsset *set = dataList[indexPath.item];
[cell.photo setImage:[UIImage imageWithCGImage:set.thumbnail]];
return cell;
}
#pragma mark - UICollectionView Delegate Methods
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 5;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 5;
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(5, 5, 5, 5);
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(100, 100 + indexPath.item % 20);
}
Protocol Methods
- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(DDCollectionViewFlowLayout *)layout numberOfColumnsInSection:(NSInteger)section;
DDCollectionViewDelegateFlowLayout inherit UICollectionViewDelegateFlowLayout Protocol. so you can use all the UICollectionViewDelegateFlowLayout protocal methods in DDCollectionViewDelegateFlowLayout
Updates
- 0.5 add the header sticky feature
- 0.4 code optimzation about the UI
Requirements
- Xcode 6
- iOS 6.0
Author
DeJohn Dong, [email protected]
License
DDCollectionViewFlowLayout is available under the MIT license. See the LICENSE file for more info.