IOS 支付寶－五福簡單框架實現－線性滾動（UICollectionView）

猴年支付寶可算是給大家一個很好的驚喜，刺激。大家都在為敬業福而四處奔波。可是到最后也沒有幾個得到敬業福德，就像我。不知道大家有沒有觀察，五福界面的滾動是一個很好的設計。在這里，給大家帶來簡單的滾動實現，首先看一下實現效果。

通過觀察不難發現，有很多地方並不是那么容易想出來的，對於篇隨筆，感興趣可以查查相關資料，我就不盡行過多說明，（主要是開考文字，不好說明😄）。

獻出代碼，請收下。

 

//
//  ViewController.m
//  CX 支付寶－五福簡單框架實現－線性滾動（UICollectionView）
//
//  Created by ma c on 16/3/19.
//  Copyright © 2016年 xubaoaichiyu. All rights reserved.
//

#import "ViewController.h"
#import "CXCollectionViewFlowLayout.h"

static NSString * identifier = @"cxCellID";
@interface ViewController ()<UICollectionViewDataSource>

@property (nonatomic, strong) UICollectionView * collectionView;

@end

@implementation ViewController
#pragma mark - set_and_get

-(UICollectionView *)collectionView{
    if (!_collectionView) {
        //自定義網格布局
        CXCollectionViewFlowLayout * flowLayout = [[CXCollectionViewFlowLayout alloc]init];
        
        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 300) collectionViewLayout:flowLayout];
        
        _collectionView.dataSource = self;
        
        [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];
        
    }
    return _collectionView;
    
}

#pragma mark - life
- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addSubview:self.collectionView];
    
}

#pragma mark - deleDate
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 30;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor orangeColor];
    
    return cell;
}

@end

//
//  CXCollectionViewFlowLayout.m
//  CX 支付寶－五福簡單框架實現－線性滾動（UICollectionView）
//
//  Created by ma c on 16/3/19.
//  Copyright © 2016年 xubaoaichiyu. All rights reserved.
//

#import "CXCollectionViewFlowLayout.h"

@implementation CXCollectionViewFlowLayout
//准備開始布局
-(void)prepareLayout{
    
    [super prepareLayout];
    //設置滾動方向
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //設置item最大size
    CGFloat width = self.collectionView.frame.size.height * 0.8;
    
    self.itemSize = CGSizeMake(width, width);
    //設置首位Item的位置(通過內邊距)
    CGFloat insertWidth = (self.collectionView.frame.size.width - width) / 2;
    
    self.sectionInset = UIEdgeInsetsMake(0, insertWidth, 0, insertWidth);

}
//返回值為也定cell樣式的數組
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    NSArray * attributes =  [super layoutAttributesForElementsInRect:rect];
    
    //計算中心點的contentOffset
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width * 0.5;
    
    //獲取每一個cell的布局屬性
    for (UICollectionViewLayoutAttributes * attri in attributes) {
        
        //計算每一個cell中心與中心點的contentOffset距離
        CGFloat delat = ABS(attri.center.x - centerX);
        
        //計算比例
        CGFloat scales = 1 - delat / (self.collectionView.bounds.size.width);
        
        attri.transform = CGAffineTransformMakeScale(scales, scales);
    }
    return attributes;
}
//實時刷新

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

//targetContentOffset 調整后的contentOffset
//proposedContentOffset 滑動停止的contentOffset

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
    
    // 計算最終的可見范圍
    CGRect rect;
    rect.origin = proposedContentOffset;
    rect.size = self.collectionView.frame.size;
    
    // 取得cell的布局屬性
    NSArray * attributes = [super layoutAttributesForElementsInRect:rect];
    
    CGFloat centerX = proposedContentOffset.x + self.collectionView.bounds.size.width * 0.5;
    
    //獲取最小間距
    CGFloat minDetal =  MAXFLOAT;
    
    for (UICollectionViewLayoutAttributes *attrs in attributes) {
        
        if (ABS(minDetal) > ABS(attrs.center.x - centerX)) {
            minDetal = attrs.center.x - centerX;
        }
    }
    // 在原有offset的基礎上進行微調
    return CGPointMake(proposedContentOffset.x + minDetal, proposedContentOffset.y);
}

@end