转载

瀑布流-01-自定义布局实现绚丽的瀑布流

概述

  • 瀑布流是电商应用展示商品通常采用的一种方式,如图示例

    瀑布流-01-自定义布局实现绚丽的瀑布流

  • 瀑布流的实现方式,通常有以下几种

    • 通过UITableView实现(不常用)
    • 通过UIScrollView实现(工作量较大)
    • 通过UICollectionView实现(通常采用的方式)

UICollectionView基础

  • UICollectionView与UITableView有很多相似的地方,如

    • 都通过数据源提供数据
    • 都通过代理执行相关的事件
    • 都可以自定义cell,且涉及到cell的重用
    • 都继承自UIScrollView,具有滚动效果
  • UICollectionView的特性

    • 需要有一个UICollectionViewLayout类(通常是UICollectionViewFlowLayout类)或其子类对象,来决定cell的布局
    • 可以实现UICollectionViewLayout的子类,来定制UICollectionView的滚动方向以及cell的布局
  • UICollectionViewLayout的子类UICollectionViewFlowLayout

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

自定义布局

  • 自定义布局需要实现UICollectionViewLayout的子类
  • 自定义布局常用方法

    • 初始化布局

      - (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最终停留的点 }

示例

  • 实现效果

    瀑布流-01-自定义布局实现绚丽的瀑布流

  • 实现思路

    • 通过UICollectionView实现
    • 自定义布局,即横向流水布局和圆形普通布局
    • 通过UICollectionView的代理方法,当点击cell时,将其删除
    • 通过监听UIView的触摸事件,当点解控制器的view时更改布局
  • 实现步骤

    • 自定横向流水布局

      • 初始化布局

        - (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 = CGAffineTransformMakeScale(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];    } } 
正文到此结束
Loading...