CollectionView实现瀑布流

CollectionViewFlowLayout implement the Waterfall Effect

Effects

 

Installation

FlickerNumber 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.

import DDCollectionViewFlowLayout.h in your project

import@interface ViewController ()<DDCollectionViewDelegateFlowLayout,UICollectionViewDataSource>protocol

for example:

    DDCollectionViewFlowLayout *layout = [[DDCollectionViewFlowLayout alloc] init];
    layout.delegate = self;
    [self.collectionView setCollectionViewLayout:layout];

implemention the DDCollectionViewDelegateFlowLayout & UICollectionViewDataSource @required or @optional methods

DDCollectionViewDelegateFlowLayout inherit UICollectionViewDelegateFlowLayout Protocol.

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 2;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuseCell" forIndexPath:indexPath];
    UILabel *lblTitle = (UILabel *)[cell.contentView viewWithTag:2];
    lblTitle.text = [NSString stringWithFormat:@"{%ld,%ld}",indexPath.section,indexPath.item];
    cell.backgroundColor = dataList[indexPath.row][@"color"];
    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
    if(!hasMore){
        [loadingMoreIndicator stopAnimating];
        [loadingMoreIndicator removeFromSuperview];
        loadingMoreIndicator = nil;
        return footer;
    }
    if(!loadingMoreIndicator)
        loadingMoreIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0, 0.0, 20.0, 20.0f)];
    loadingMoreIndicator.center = CGPointMake(footer.center.x, 15.0f);
    loadingMoreIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
    [footer addSubview:loadingMoreIndicator];
    [loadingMoreIndicator startAnimating];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        if(!isLoadingMore && hasMore){
            [self addSize:YES];
        }
    });
    return footer;
}

#pragma mark - UICollectionView Delegate Methods

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 8.0f;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 8.0f;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(6.0f, 6.0, 0.0, 6.0f);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return [dataList[indexPath.row][@"size"] CGSizeValue];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    return CGSizeMake(self.view.bounds.size.width, 44.0f);
}

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

Requirements

• Xcode 6
• iOS 6.0

Author

DeJohn Dong, dongjia_9251@126.com

License

DDCollectionViewFlowLayout is available under the MIT license. See the LICENSE file for more info.

除了需要加载制定布局文件外，还需要根据展示的图片大小的不同计算出每个cell的大小

- (CGSize)collectionView:(UICollectionView *)collectionView  layout:(UICollectionViewLayout *)collectionViewLayout  sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
  NSDictionary *dicData = self.imageLibraryMarr[indexPath.row];
    NSURL *url = [NSURL URLWithString:dicData[@"imageUrl"]];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *aimage = [[UIImage alloc] initWithData:data];
      float imageHeight =((screen_Width - 30) / 2) / aimage.size.width * aimage.size.height;
      return CGSizeMake((screen_Width - 30) / 2, imageHeight);
  }