iOS開發-自定義流水布局UICollectionViewFlowLayout實現動態放大效果

效果截圖:

7BAF9FD3-7A55-4ADF-8AC7-3675A9F41DAE.png
28B75949-ADC5-44D0-AD78-166377D416D5.png

關鍵的CustomFlowLayout類

//
//  CustomFlowLayout.h
//  流水布局
//
//  Created by zengchunjun on 17/1/4.
//  Copyright ? 2017年 zengchunjun. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CustomFlowLayout : UICollectionViewFlowLayout

@end

//
//  CustomFlowLayout.m
//  流水布局
//
//  Created by zengchunjun on 17/1/4.
//  Copyright ? 2017年 zengchunjun. All rights reserved.
//

#import "CustomFlowLayout.h"

/*
 自定義布局:只要了解5個方法
 
 - (void)prepareLayout;
 
 - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
 
 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
 
 - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity; // return a point at which to rest after scrolling - for layouts that want snap-to-point scrolling behavior
 
 - (CGSize)collectionViewContentSize;
 
 */

@implementation CustomFlowLayout

/*
 UICollectionViewLayoutAttributes:確定cell的尺寸
 一個UICollectionViewLayoutAttributes對象就對應一個cell
 拿到UICollectionViewLayoutAttributes相當于拿到cell
 */

// 重寫它方法,擴展功能

// 什么時候調用:collectionView第一次布局,collectionView刷新的時候也會調用
// 作用:計算cell的布局,條件:cell的位置是固定不變
// - (void)prepareLayout
//{
//    [super prepareLayout];
//
//    NSLog(@"%s",__func__);
//
//}

// 作用:指定一段區域給你這段區域內cell的尺寸
// 可以一次性返回所有cell尺寸,也可以每隔一個距離返回cell
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //    NSLog(@"%s",__func__);
    // 設置cell尺寸 => UICollectionViewLayoutAttributes
    // 越靠近中心點,距離越小,縮放越大
    // 求cell與中心點距離
    
    // 1.獲取當前顯示cell的布局
    NSArray *attrs = [super layoutAttributesForElementsInRect:self.collectionView.bounds];
    
    for (UICollectionViewLayoutAttributes *attr in attrs) {
        
        // 2.計算中心點距離
        CGFloat delta = fabs((attr.center.x - self.collectionView.contentOffset.x) - self.collectionView.bounds.size.width * 0.5);
        
        // 3.計算比例
        CGFloat scale = 1 - delta / (self.collectionView.bounds.size.width * 0.5) * 0.25;
        
        attr.transform = CGAffineTransformMakeScale(scale, scale);
    }
    
    return attrs;
    
}

// 什么時候調用:用戶手指一松開就會調用
// 作用:確定最終偏移量
// 定位:距離中心點越近,這個cell最終展示到中心點
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
    
    // 拖動比較快 最終偏移量 不等于 手指離開時偏移量
    CGFloat collectionW = self.collectionView.bounds.size.width;
    
    // 最終偏移量
    CGPoint targetP = [super targetContentOffsetForProposedContentOffset:proposedContentOffset withScrollingVelocity:velocity];
    
    // 0.獲取最終顯示的區域
    CGRect targetRect = CGRectMake(targetP.x, 0, collectionW, MAXFLOAT);
    
    // 1.獲取最終顯示的cell
    NSArray *attrs = [super layoutAttributesForElementsInRect:targetRect];
    
    // 獲取最小間距
    CGFloat minDelta = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attr in attrs) {
        // 獲取距離中心點距離:注意:應該用最終的x
        CGFloat delta = (attr.center.x - targetP.x) - self.collectionView.bounds.size.width * 0.5;
        
        if (fabs(delta) < fabs(minDelta)) {
            minDelta = delta;
        }
    }
    
    // 移動間距
    targetP.x += minDelta;
    
    if (targetP.x < 0) {
        targetP.x = 0;
    }
    
    return targetP;
}

// Invalidate:刷新
// 在滾動的時候是否允許刷新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
    return YES;
}

// 計算collectionView滾動范圍
//- (CGSize)collectionViewContentSize{
//    return [super collectionViewContentSize];
//}

@end

項目分享地址:https://pan.baidu.com/s/1c2tGHNy

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,556評論 25 708
  • 可能看到這個題目的人,會對我有個疑問:月光族如何能更美好?其實,我之前很省。兩百塊錢可以花一個星期。可是,我...
    益西卓瑪閱讀 129評論 0 0
  • 投射老公(和阿姨老公一起)幫忙單位拼裝家具一切順利! 投射女兒今天課外輔導班學得開心,有所收獲! 投射自己一天能量...
    靈媽閱讀 161評論 0 0