IOS實(shí)現(xiàn)自定義布局瀑布流

更新時(shí)間：2016年01月11日 11:10:01 作者：世俗孤島

這篇文章主要介紹了IOS實(shí)現(xiàn)自定義布局瀑布流，畫(huà)面感非常炫麗，想要學(xué)習(xí)的朋友不要錯(cuò)過(guò)本文

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

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

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

一、UICollectionView基礎(chǔ)
1、UICollectionView與UITableView有很多相似的地方，如

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

2、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的布局

3、UICollectionViewLayout的子類(lèi)UICollectionViewFlowLayout

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

二、自定義布局
1、自定義布局需要實(shí)現(xiàn)UICollectionViewLayout的子類(lèi)
2、自定義布局常用方法
初始化布局

- (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)
}

三、示例
1、實(shí)現(xiàn)效果

2、實(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í)更改布局

3、實(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]; 
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: