瀑布流-01-自定義佈局實現絢麗的瀑布流

時間  2019-12-08
標籤 瀑布 自定義 佈局 實現 絢麗 欄目 悠閒生活 简体版
原文   原文鏈接

概述

  • 瀑布流是電商應用展現商品一般採用的一種方式，如圖示例數組

  • 瀑布流的實現方式，一般有如下幾種
    • 經過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的元素ui

      - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //該方法須要返回rect區域中全部元素佈局屬性的數組
}
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //該方法返回indexPath位置的元素的佈局屬性
}

    • 修改UICollectionView中止滾動是的偏移量atom

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

示例

  • 實現效果代理

  • 實現思路
    • 經過UICollectionView實現
    • 自定義佈局，即橫向流水佈局和圓形普通佈局
    • 經過UICollectionView的代理方法，當點擊cell時，將其刪除
    • 經過監聽UIView的觸摸事件，當點解控制器的view時更改佈局
  • 實現步驟
    • 自定橫向流水佈局

      • 初始化佈局code

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

      • 指定當尺寸改變時，更新佈局orm

        - (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中止滾動是的偏移量，使其爲與中心點blog

        - (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];  
    }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程