IOS 瀑布流UICollectionView实现

在实现瀑布流之前先来看看瀑布流的雏形（此方法的雏形 UICollectionView）

对于UICollectionView我们有几点注意事项

• 它和tableView不一样，ContentView的内容完全需要我们自己去添加。
• 它与tableview相比，他的初始化需要FlowLayout并且大部分操作在其上。
• UIcollectionView的实用性极强，虽然有时他并不是最好的解决方案，但是它可以很灵活的实现各种效果。

图（一）

如图，模拟器上展示的是很多方格，但是值得注意的是他们是有规则的。

虽然看上去很整洁但是并不美观。

我们所说的要实现瀑布流就是要实现它的不整洁，但是规律（这里我说的是规律）

正题

前面说了UIcollectionView的大部分操作在FlowLayout上，当然也包括格局部署。

为了实现瀑布流我们所要实现的便是改变他的格局部署。

在写代码前先确定一下实现思想。

• 需要什么？？？
  • 首先我们需要确定瀑布流的显示风格
  • 然后根据确定好的风格进行整体设计
  • 最后通过细节的处理完善代码
    • 我们需要什么样的风格？？？
      • 我们需要的是实现将上面图片中的布局改变为不等高的效果
      • 说的俗一点就是像名字一样，像瀑布流水一样
    • 整体该如何设计？？？
      • 整体采用与上面图片一样的设计方法，每个模块都是一个cell
      • 确保最上面一行的cell的y值相同（美观）
      • 确保不不会出现一列特别长，一列特别短的效果
    • 初步细节有哪些？？？
      • 因为每个cell的height不同，所以我们要考虑放置的顺序应该是什么
      • 精简代码（这是每个项目必须注意的）

实现效果

代码

下面是实现的代码部分（不提供demo了 很简单）

我在注释中简单介绍。

---

//// ViewController.m// CX-瀑布流UIcollectionView实现//// Created by ma c on 16/4/8.// Copyright © 2016年 bjsxt. All rights reserved.//#import "ViewController.h"#import "CXCollectionViewCell.h"#import "CXCollectionViewLayout.h"static NSString * identifier = @"cellID";@interface ViewController ()<UICollectionViewDataSource>//所要展示的UICollectionView@property (nonatomic, strong) UICollectionView * collectionView;@end@implementation ViewController#pragma mark - <懒加载>- (UICollectionView *)collectionView {  if (!_collectionView) {    //初始化我们自定义的flowLayout    CXCollectionViewLayout * flowLayout = [[CXCollectionViewLayout alloc]init];    //初始化collectionView    _collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];    //设置数据源（collectionView的命根子）    _collectionView.dataSource = self;    //注册我们自定义的cell    [_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([CXCollectionViewCell class]) bundle:nil] forCellWithReuseIdentifier:identifier];  }  return _collectionView;}#pragma mark - <life>- (void)viewDidLoad {  [super viewDidLoad];  //在self.view上添加---  [self.view addSubview:self.collectionView];}#pragma mark - <UICollectionViewDataSource>//这里返回的是item的个数 返回100- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 100;}//这里返回的是cell 我们可以在这里进行一些简单的操作-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    CXCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];  //为了瀑布流的实现细节我们添加的Label    cell.label.text = [NSString stringWithFormat:@"%zd",indexPath.item];  //cell的背景色  cell.backgroundColor = [UIColor orangeColor];    return cell;}@end

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：IOS 瀑布流UICollectionView实现

关键词：IOS