概述

• 瀑布流是電商應(yīng)用展示商品通常采用的一種方式，如圖示例

  

• 瀑布流的實(shí)現(xiàn)方式，通常有以下幾種

  • 通過(guò)UITableView實(shí)現(xiàn)（不常用）
    
  • 通過(guò)UIScrollView實(shí)現(xiàn)（工作量較大）
    
  • 通過(guò)UICollectionView實(shí)現(xiàn)（通常采用的方式）

UICollectionView基礎(chǔ)

• UICollectionView與UITableView有很多相似的地方，如

  • 都通過(guò)數(shù)據(jù)源提供數(shù)據(jù)
    
  • 都通過(guò)代理執(zhí)行相關(guān)的事件
    
  • 都可以自定義cell，且涉及到cell的重用
    
  • 都繼承自UIScrollView，具有滾動(dòng)效果
    

• UICollectionView的特性

  • 需要有一個(gè)UICollectionViewLayout類(lèi)（通常是UICollectionViewFlowLayout類(lèi)）或其子類(lèi)對(duì)象，來(lái)決定cell的布局
    
  • 可以實(shí)現(xiàn)UICollectionViewLayout的子類(lèi)，來(lái)定制UICollectionView的滾動(dòng)方向以及cell的布局

• UICollectionViewLayout的子類(lèi)UICollectionViewFlowLayout

  • UICollectionViewFlowLayout即流水布局
    
  • 流水布局UICollectionView的最常用的一種布局方式

自定義布局

• 自定義布局需要實(shí)現(xiàn)UICollectionViewLayout的子類(lèi)
  

• 自定義布局常用方法

  • 初始化布局

    - (void)PRepareLayout{	//通常在該方法中完成布局的初始化操作}

  • 當(dāng)尺寸改變時(shí)，是否更新布局

    - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{	//默認(rèn)返回YES}

  • 布局UICollectionView的元素

    - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{	//該方法需要返回rect區(qū)域中所有元素布局屬性的數(shù)組}- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{	//該方法返回indexPath位置的元素的布局屬性}

  • 修改UICollectionView停止?jié)L動(dòng)是的偏移量

    - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{	//返回值是，UICollectionView最終停留的點(diǎn)}

示例

• 實(shí)現(xiàn)效果

  

• 實(shí)現(xiàn)思路

  • 通過(guò)UICollectionView實(shí)現(xiàn)
    
  • 自定義布局，即橫向流水布局和圓形普通布局
    
  • 通過(guò)UICollectionView的代理方法，當(dāng)點(diǎn)擊cell時(shí)，將其刪除
    
  • 通過(guò)監(jiān)聽(tīng)UIView的觸摸事件，當(dāng)點(diǎn)解控制器的view時(shí)更改布局
    

• 實(shí)現(xiàn)步驟

  • 自定橫向流水布局

    • 初始化布局

      - (void)prepareLayout{    [super prepareLayout];    //設(shè)置滾動(dòng)方向    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;    //設(shè)置內(nèi)邊距    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);}

    • 指定當(dāng)尺寸改變時(shí)，更新布局

      - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{    return YES;}

    • 設(shè)置所有元素的布局屬性

      - (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{    //獲取rect區(qū)域中所有元素的布局屬性    NSArray *array = [super layoutAttributesForElementsInRect:rect];    //獲取UICollectionView的中點(diǎn)，以contentView的左上角為原點(diǎn)    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;    //重置rect區(qū)域中所有元素的布局屬性，即基于他們距離UICollectionView的中點(diǎn)的劇烈，改變其大小    for (UICollectionViewLayoutAttributes *attribute in array)    {        //獲取距離中點(diǎn)的距離        CGFloat delta = ABS(attribute.center.x - centerX);        //計(jì)算縮放比例        CGFloat scale = 1 - delta / self.collectionView.bounds.size.width;        //設(shè)置布局屬性        attribute.transform = CGAffineTransformMakeScale(scale, scale);    }    //返回所有元素的布局屬性    return [array copy];}

    • 設(shè)置UICollectionView停止?jié)L動(dòng)是的偏移量，使其為與中心點(diǎn)

      - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{    //計(jì)算最終顯示的矩形框    CGRect rect;    rect.origin.x = proposedContentOffset.x;    rect.origin.y = 0;    rect.size = self.collectionView.frame.size;    //獲取最終顯示在矩形框中的元素的布局屬性    NSArray *array = [super layoutAttributesForElementsInRect:rect];    //獲取UICollectionView的中點(diǎn)，以contentView的左上角為原點(diǎn)    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;    //獲取所有元素到中點(diǎn)的最短距離    CGFloat minDelta = MAXFLOAT;    for (UICollectionViewLayoutAttributes *attribute in array)    {        CGFloat delta = attribute.center.x - centerX;        if (ABS(minDelta) > ABS(delta))        {            minDelta = delta;        }    }    //改變UICollectionView的偏移量    proposedContentOffset.x += minDelta;    return proposedContentOffset;}

  • 自定義圓形普通布局

    • 定義成員屬性，保存所有的布局屬性

      @property (nonatomic, strong) NSMutableArray *attrsArray;

    • 懶加載，初始化attrsArray

      - (NSMutableArray *)attrsArray{    if (_attrsArray == nil)    {        _attrsArray = [NSMutableArray array];    }    return _attrsArray;}

    • 初始化布局

      - (void)prepareLayout{    [super prepareLayout];    //移除所有舊的布局屬性    [self.attrsArray removeAllObjects];    //獲取元素的個(gè)數(shù)    NSInteger count = [self.collectionView numberOfItemsInSection:0];    //布局所有的元素    for (NSInteger i = 0; i<count; i++)    {        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];        //設(shè)置并獲取indexPath位置元素的布局屬性        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];        //將indexPath位置元素的布局屬性添加到所有布局屬性數(shù)組中        [self.attrsArray addObject:attrs];    }}

    • 布局indexPath位置的元素

      - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(nonnull NSIndexPath *)indexPath{    //獲取元素的個(gè)數(shù)    NSInteger count = [self.collectionView numberOfItemsInSection:0];    /**設(shè)置圓心布局*/    //設(shè)置圓形的半徑    CGFloat radius = 70;    //圓心的位置    CGFloat oX = self.collectionView.frame.size.width * 0.5;    CGFloat oY = self.collectionView.frame.size.height * 0.5;    //獲取indexPath位置的元素的布局屬性    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    //設(shè)置尺寸    attrs.size = CGSizeMake(50, 50);    //設(shè)置位置    if (count == 1)    {        attrs.center = CGPointMake(oX, oY);    }    else    {        CGFloat angle = (2 * M_PI / count) * indexPath.item;        CGFloat centerX = oX + radius * sin(angle);        CGFloat centerY = oY + radius * cos(angle);        attrs.center = CGPointMake(centerX, centerY);    }    //返回indexPath位置元素的布局屬性    return attrs;}

    • 布局指定區(qū)域內(nèi)所有的元素

      - (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{    //返回所有元素的布局屬性    return self.attrsArray;}

  • 通過(guò)xib自定義ce ll

    • 設(shè)置成員屬性，保存cell內(nèi)部的圖片

      /**圖片名字*/@property (nonatomic, copy) NSString *imageName;

    • 初始化cell

      - (void)awakeFromNib{    //通過(guò)Layer設(shè)置邊框    self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;    self.imageView.layer.borderWidth = 6;    self.imageView.layer.cornerRadius = 3;}

    • 設(shè)置cell內(nèi)imageView的image屬性

      - (void)setImageName:(NSString *)imageName{    _imageName = [imageName copy];    self.imageView.image = [UIImage imageNamed:imageName];}

  • 加載圖片資源

    • 通過(guò)成員屬性，保存所有的圖片名

      /**所有的圖片*/@property (nonatomic, strong) NSMutableArray *imageNames;

    • 懶加載，初始化圖片名數(shù)組

      - (NSMutableArray *)imageNames{    if (_imageNames == nil)    {        NSMutableArray *imageNames = [NSMutableArray array];        for (NSInteger i = 0; i<20; i++)        {            NSString *imageName = [NSString stringWithFormat:@"%zd", i + 1];            [imageNames addObject:imageName];        }        _imageNames = imageNames;    }    return _imageNames;}

  • 創(chuàng)建UICollectionView

    • 通過(guò)成員屬性保存UICollectionView對(duì)象，以便更改布局

      @property (nonatomic, weak) UICollectionView *collectionView;

    • 創(chuàng)建并設(shè)置collectionView

      - (void)setupCollectionView{    //設(shè)置frame    CGFloat collectionViewW = self.view.bounds.size.width;    CGFloat collectionViewH = 200;    CGRect frame = CGRectMake(0, 150, collectionViewW, collectionViewH);    //創(chuàng)建布局    LYPCircleLayout *layout = [[LYPCircleLayout alloc] init];    //創(chuàng)建collectionView    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];    self.collectionView = collectionView;    //設(shè)置collectionView的數(shù)據(jù)源和代理    collectionView.dataSource = self;    collectionView.delegate = self;    //添加collectionView到控制器的view中    [self.view addSubview:collectionView];}

  • 實(shí)現(xiàn)UICollectionView的數(shù)據(jù)源方法

    • 注冊(cè)cell

      /**設(shè)置重用表示*/static NSString *const ID = @"photo";- (void)viewDidLoad{    [super viewDidLoad];    [self setupCollectionView];    //注冊(cè)cell    [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LYPPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:ID];}

    • 設(shè)置元素的個(gè)數(shù)

      - (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return self.imageNames.count;}

    • 設(shè)置每個(gè)元素的屬性

      - (UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath{    //根據(jù)重用標(biāo)示從緩存池中取出cell，若緩存池中沒(méi)有，則自動(dòng)創(chuàng)建    LYPPhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];    //設(shè)置cell的imageName屬性    cell.imageName = self.imageNames[indexPath.item];    //返回cell    return cell;}

  • 實(shí)現(xiàn)UICollectionView的代理方法，實(shí)現(xiàn)點(diǎn)擊某個(gè)元素將其刪除功能

    - (void)collectionView:(nonnull UICollectionView *)collectionView didSelectItemAtIndexPath:(nonnull NSIndexPath *)indexPath{	//將圖片名從數(shù)組中移除    [self.imageNames removeObjectAtIndex:indexPath.item];    //刪除collectionView中的indexPath位置的元素    [self.collectionView deleteItemsAtIndexPaths:@[indexPath]];}

  • 監(jiān)聽(tīng)控制器view的點(diǎn)擊，更換布局

    - (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{	//判斷當(dāng)前布局的種類(lèi)    if ([self.collectionView.collectionViewLayout isKindOfClass:[LYPLineLayout class]])    {    	//流水布局，切換至圓形布局        [self.collectionView setCollectionViewLayout:[[LYPCircleLayout alloc] init] animated:YES];    } else    {    	//圓形布局，切換至流水布局        LYPLineLayout *layout = [[LYPLineLayout alloc] init];        //設(shè)置元素的尺寸，若不設(shè)置，將使用自動(dòng)計(jì)算尺寸        layout.itemSize = CGSizeMake(130, 130);        [self.collectionView setCollectionViewLayout:layout animated:YES];      }}