---

瀑布流是電商運用展現商品平日采取的一種方法，如圖示例

瀑布流的完成方法，平日有以下幾種

• 經由過程UITableView完成（不經常使用）
• 經由過程UIScrollView完成（任務量較年夜）
• 經由過程UICollectionView完成（平日采取的方法）

1、UICollectionView基本
1、UICollectionView與UITableView有許多類似的處所，如

• 都經由過程數據源供給數據
  
• 都經由過程署理履行相干的事宜
  
• 都可以自界說cell，且觸及到cell的重用
  
• 都繼續自UIScrollView，具有轉動後果
  

2、UICollectionView的特征

• 須要有一個UICollectionViewLayout類（平日是UICollectionViewFlowLayout類）或其子類對象，來決議cell的結構
• 可以完成UICollectionViewLayout的子類，來定制UICollectionView的轉動偏向和cell的結構
  

3、UICollectionViewLayout的子類UICollectionViewFlowLayout

• UICollectionViewFlowLayout即流水結構
  
• 流水結構UICollectionView的最經常使用的一種結構方法

2、自界說結構
1、自界說結構須要完成UICollectionViewLayout的子類
2、自界說結構經常使用辦法
初始化結構

- (void)prepareLayout
{
  //平日在該辦法中完成結構的初始化操作
}

當尺寸轉變時，能否更新結構

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
  //默許前往YES
}

結構UICollectionView的元素

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
  //該辦法須要前往rect區域中一切元素結構屬性的數組
}
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
  //該辦法前往indexPath地位的元素的結構屬性
}

修正UICollectionView停滯轉動是的偏移量

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
  //前往值是，UICollectionView終究逗留的點
}

3、示例
1、完成後果

2、完成思緒

• 經由過程UICollectionView完成
  
• 自界說結構，即橫向流水結構和圓形通俗結構
  
• 經由過程UICollectionView的署理辦法，當點擊cell時，將其刪除
  
• 經由過程監聽UIView的觸摸事宜，當點解掌握器的view時更改結構
  

3、完成步調
自定橫向流水結構
初始化結構

- (void)prepareLayout
{
  [super prepareLayout];
  //設置轉動偏向
  self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
  //設置內邊距
  CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
  self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

指定當尺寸轉變時，更新結構

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

設置一切元素的結構屬性

- (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
  //獲得rect區域中一切元素的結構屬性
  NSArray *array = [super layoutAttributesForElementsInRect:rect];

  //獲得UICollectionView的中點，以contentView的左上角為原點
  CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;

  //重置rect區域中一切元素的結構屬性，即基於他們間隔UICollectionView的中點的激烈，轉變其年夜小
  for (UICollectionViewLayoutAttributes *attribute in array)
  {
    //獲得間隔中點的間隔
    CGFloat delta = ABS(attribute.center.x - centerX);
    //盤算縮放比例
    CGFloat scale = 1 - delta / self.collectionView.bounds.size.width;
    //設置結構屬性
    attribute.transform = CGAff.netransformMakeScale(scale, scale);
  }

  //前往一切元素的結構屬性
  return [array copy];
}

設置UICollectionView停滯轉動是的偏移量，使其為與中間點

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
  //盤算終究顯示的矩形框
  CGRect rect;
  rect.origin.x = proposedContentOffset.x;
  rect.origin.y = 0;
  rect.size = self.collectionView.frame.size;

  //獲得終究顯示在矩形框中的元素的結構屬性
  NSArray *array = [super layoutAttributesForElementsInRect:rect];

  //獲得UICollectionView的中點，以contentView的左上角為原點
  CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;

  //獲得一切元素到中點的最短間隔
  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];

  //獲得元素的個數
  NSInteger count = [self.collectionView numberOfItemsInSection:0];
  //結構一切的元素
  for (NSInteger i = 0; i<count; i++)
  {
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
    //設置並獲得indexPath地位元素的結構屬性
    UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
    //將indexPath地位元素的結構屬性添加到一切結構屬性數組中
    [self.attrsArray addObject:attrs];
  }
}

結構indexPath地位的元素

- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
  //獲得元素的個數
  NSInteger count = [self.collectionView numberOfItemsInSection:0];

  /**設置圓心結構*/
  //設置圓形的半徑
  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];
  //設置尺寸
  attrs.size = CGSizeMake(50, 50);
  //設置地位
  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;
}

結構指定區域內一切的元素

- (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
  //前往一切元素的結構屬性
  return self.attrsArray;
}

經由過程xib自界說ce ll
設置成員屬性，保留cell外部的圖片

/**圖片名字*/

@property (nonatomic, copy) NSString *imageName;

初始化cell

- (void)awakeFromNib
{
  //經由過程Layer設置邊框
  self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
  self.imageView.layer.borderWidth = 6;
  self.imageView.layer.cornerRadius = 3;
}

設置cell內imageView的image屬性

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

加載圖片資本
經由過程成員屬性，保留一切的圖片名

/**一切的圖片*/
@property (nonatomic, strong) NSMutableArray *imageNames;

懶加載，初始化圖片名數組

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

創立UICollectionView
經由過程成員屬性保留UICollectionView對象，以便更改結構

@property (nonatomic, weak) UICollectionView *collectionView;

創立並設置collectionView

- (void)setupCollectionView
{
  //設置frame
  CGFloat collectionViewW = self.view.bounds.size.width;
  CGFloat collectionViewH = 200;
  CGRect frame = CGRectMake(0, 150, collectionViewW, collectionViewH);

  //創立結構
  LYPCircleLayout *layout = [[LYPCircleLayout alloc] init];

  //創立collectionView
  UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
  self.collectionView = collectionView;

  //設置collectionView的數據源和署理
  collectionView.dataSource = self;
  collectionView.delegate = self;

  //添加collectionView到掌握器的view中
  [self.view addSubview:collectionView];
}

完成UICollectionView的數據源辦法
注冊cell

/**設置重用表現*/
static NSString *const ID = @"photo";
- (void)viewDidLoad
{
  [super viewDidLoad];

  [self setupCollectionView];

  //注冊cell
  [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LYPPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:ID];
}

設置元素的個數

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

設置每一個元素的屬性

- (UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
  //依據重用標示從緩存池中掏出cell，若緩存池中沒有，則主動創立
  LYPPhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
  //設置cell的imageName屬性
  cell.imageName = self.imageNames[indexPath.item];

  //前往cell
  return cell;
}

完成UICollectionView的署理辦法，完成點擊某個元素將其刪除功效

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

監聽掌握器view的點擊，改換結構

- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event
{
  //斷定以後結構的品種
  if ([self.collectionView.collectionViewLayout isKindOfClass:[LYPLineLayout class]])
  {
    //流水結構，切換至圓形結構
    [self.collectionView setCollectionViewLayout:[[LYPCircleLayout alloc] init] animated:YES];
  } else
  {
    //圓形結構，切換至流水結構
    LYPLineLayout *layout = [[LYPLineLayout alloc] init];
    //設置元素的尺寸，若不設置，將應用主動盤算尺寸
    layout.itemSize = CGSizeMake(130, 130);
    [self.collectionView setCollectionViewLayout:layout animated:YES]; 
  }
}

以上就是本文的全體內容，願望對年夜家的進修有所贊助。

【IOS完成自界說結構瀑布流】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！