IOS UI-自定义UIColectionView布局

ViewController.m

 //
 //  ViewController.m
 //  IOS_0226_自定义UIColectionView布局
 //
 //  Created by ma c on 16/2/26.
 //  Copyright © 2016年 博文科技. All rights reserved.
 //

 #import "ViewController.h"
 #import "ImgCell.h"
 #import "LineLayout.h"
 #import "FoldLayout.h"
 #import "CircleLayout.h"

 @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

 @property (nonatomic, strong) NSMutableArray *imgsArray;
 @property (nonatomic, weak) UICollectionView *collectionView;

 @end

 @implementation ViewController

 static NSString *ID = @"image";

 - (NSMutableArray *)imgsArray
 {
     if (!_imgsArray) {
         _imgsArray = [NSMutableArray array];

         for (int i=; i<; i++) {
             [_imgsArray addObject:[NSString stringWithFormat:@"%d.jpg",i]];

         }
     }
     return _imgsArray;
 }

 - (void)viewDidLoad {
     [super viewDidLoad];
     [self createUI];
 }

 - (void)createUI
 {
     CGRect rect = CGRectMake(, , , );
     UICollectionView *collection = [[UICollectionView alloc] initWithFrame:rect collectionViewLayout:[[FoldLayout alloc] init]];
     collection.dataSource = self;
     collection.delegate = self;
 //    [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
     [collection registerNib:[UINib nibWithNibName:@"ImgCell" bundle:nil] forCellWithReuseIdentifier:ID];
     [self.view addSubview:collection];
     self.collectionView = collection;

 }

 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
 {
     if ([self.collectionView.collectionViewLayout isKindOfClass:[FoldLayout class]]) {
         [self.collectionView setCollectionViewLayout:[[CircleLayout alloc] init] animated:YES];
     }
     else{
         [self.collectionView setCollectionViewLayout:[[FoldLayout alloc] init] animated:YES];
     }
 }

 #pragma mark - UICollectionViewDataSource

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

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     ImgCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];

     cell.image = self.imgsArray[indexPath.item];

     return cell;
 }

 #pragma mark - UICollectionViewDelegate

 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
 {
     //删除模型数据
     [self.imgsArray removeObjectAtIndex:indexPath.item];
     //刷新UI
     [collectionView deleteItemsAtIndexPaths:@[indexPath]];
 }

 @end

LineLayout.m(线性流水布局)

 //
 //  LineLayout.m
 //  IOS_0226_自定义UIColectionView布局
 //
 //  Created by ma c on 16/2/26.
 //  Copyright © 2016年 博文科技. All rights reserved.
 //

 #import "LineLayout.h"

 static const CGFloat lineLayoutSize = ;

 @implementation LineLayout

 //初始化
 - (void)prepareLayout
 {
     [super prepareLayout];
     //设置item大小
     self.itemSize = CGSizeMake(lineLayoutSize, lineLayoutSize);
     //设置两端居中
     CGFloat inset = (self.collectionView.frame.size.width - lineLayoutSize) * 0.5;
     self.sectionInset = UIEdgeInsetsMake(, inset, , inset);

     //设置水平滚动
     self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
     //设置间距
     self.minimumLineSpacing = lineLayoutSize;

     //每一个item都有自己的UICollectionViewLayoutAttributes
     //每一indexPath都有自己的UICollectionViewLayoutAttributes
 }

 //只要显示的边界发生变化就重新布局：内部会重新调用prepareLayout,layoutAttributesForElementsInRect方法获得所有item的布局属性
 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
 {
     return YES;
 }

 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
 {
     //NSLog(@"layoutAttributesForElementsInRect");
     // 0.计算可见的矩形框
     CGRect visibleRect;
     visibleRect.size = self.collectionView.frame.size;
     visibleRect.origin = self.collectionView.contentOffset;
     // 1.获得默认的item的UICollectionViewLayoutAttributes
     NSArray *array = [super layoutAttributesForElementsInRect:rect];
     NSArray * attributes = [[NSArray alloc] initWithArray:array copyItems:YES];

     // 2.计算屏幕最中间的x
     CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;

     for (UICollectionViewLayoutAttributes *attr in attributes) {

         if (!CGRectIntersectsRect(visibleRect, attr.frame))  continue;

         // 每一个item中点x
         CGFloat itemCenterX = attr.center.x;
         //计算item离屏幕中间的距离
         CGFloat distance = ABS(itemCenterX - centerX);
         //距离越小，缩放比例越大
         CGFloat zoom =  - (distance / (self.collectionView.frame.size.width * 0.5));
         //NSLog(@"%f",zoom);
         //缩放比例
         CGFloat scale =  + 0.5 * zoom;
         //缩放
         attr.transform3D = CATransform3DMakeScale(scale, scale, );
     }

     return attributes;
 }

 //用来设置UICollectionView停止滚动那一刻的位置
 - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
 {
     // 1.计算UICollectionView最终停止的范围
     CGRect lastRect;
     lastRect.origin = proposedContentOffset;
     lastRect.size = self.collectionView.frame.size;
     // 计算屏幕中间的x
     CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
     // 2.取出这个范围内的所有属性
     NSArray *array = [super layoutAttributesForElementsInRect:lastRect];
     NSArray * attributes = [[NSArray alloc] initWithArray:array copyItems:YES];

     // 3.遍历所有属性
     CGFloat adjustOffsetX = MAXFLOAT;
     for (UICollectionViewLayoutAttributes *attr in attributes) {
         if (ABS(attr.center.x - centerX) < ABS(adjustOffsetX)) {
             adjustOffsetX = attr.center.x - centerX;
         }
     }
     return CGPointMake(proposedContentOffset.x + adjustOffsetX, proposedContentOffset.y);
 }

 @end

FoldLayout.m（折叠布局）

 //
 //  FoldLayout.m
 //  IOS_0226_自定义UIColectionView布局
 //
 //  Created by ma c on 16/2/27.
 //  Copyright © 2016年 博文科技. All rights reserved.
 //

 #import "FoldLayout.h"

 #define Random0_1 (arc4random_uniform(100)/100)

 @implementation FoldLayout

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

 - (CGSize)collectionViewContentSize
 {
     return CGSizeMake(, );
 }

 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     NSArray *angles = @[@, @(-0.2), @(-0.5), @, @(0.2), @(0.5)];

     UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
     attrs.size = CGSizeMake(, );
     //        attrs.center = CGPointMake(arc4random_uniform(self.collectionView.frame.size.width), arc4random_uniform(self.collectionView.frame.size.height));
     attrs.center = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);
     if (indexPath.item >= ) {
         attrs.hidden = YES;
     } else {
         attrs.transform = CGAffineTransformMakeRotation([angles[indexPath.item] floatValue]);
         //zIndex越大，就越在上面
         attrs.zIndex = [self.collectionView numberOfItemsInSection:indexPath.section] - indexPath.item;
     }
     return attrs;
 }

 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
 {
     NSMutableArray *array = [NSMutableArray array];
     NSInteger count = [self.collectionView numberOfItemsInSection:];

     for (int i=; i<count; i++) {
 //        UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
 //        attrs.size = CGSizeMake(100, 100);
 //        attrs.center = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);
 //        if (i >= 5) {
 //            attrs.hidden = YES;
 //        } else {
 //
 //            NSArray *angles = @[@0, @(-0.2), @(-0.5), @(0.2), @(0.5)];
 //            attrs.transform = CGAffineTransformMakeRotation([angles[i] floatValue]);
 //            //zIndex越大，就越在上面
 //            attrs.zIndex = count - i;
         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:];
         UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
         [array addObject:attrs];

         }
     return array;
 }

 @end

CircleLayout.m（环形布局）

 //
 //  CircleLayout.m
 //  IOS_0226_自定义UIColectionView布局
 //
 //  Created by ma c on 16/2/27.
 //  Copyright © 2016年 博文科技. All rights reserved.
 //

 #import "CircleLayout.h"

 @implementation CircleLayout

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

 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
 {

     UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
     attrs.size = CGSizeMake(, );

     //圆的半径
     CGFloat radius = ;
     CGPoint cireclecenter = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);
     //每个item间角度
     CGFloat angleDetla = M_PI *  / [self.collectionView numberOfItemsInSection:indexPath.section];

     //计算当前item角度
     CGFloat angle = indexPath.item * angleDetla;
     attrs.center = CGPointMake(cireclecenter.x + radius * cosf(angle), cireclecenter.y + radius * sinf(angle));

     attrs.zIndex = indexPath.item;
     return attrs;
 }

 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
 {
     NSMutableArray *array = [NSMutableArray array];
     NSInteger count = [self.collectionView numberOfItemsInSection:];

     for (int i=; i<count; i++) {
         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:];
         UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
         [array addObject:attrs];

     }
     return array;
 }

 @end

ImgCell.h（自定义UICollectionViewCell）

 //
 //  ImgCell.h
 //  IOS_0226_自定义UIColectionView布局
 //
 //  Created by ma c on 16/2/26.
 //  Copyright © 2016年 博文科技. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface ImgCell : UICollectionViewCell

 @property (weak, nonatomic) IBOutlet UIImageView *imgView;
 @property (nonatomic, copy) NSString *image;

 @end

 //
 //  ImgCell.m
 //  IOS_0226_自定义UIColectionView布局
 //
 //  Created by ma c on 16/2/26.
 //  Copyright © 2016年 博文科技. All rights reserved.
 //

 #import "ImgCell.h"

 @interface ImgCell ()

 @end

 @implementation ImgCell

 - (void)setImage:(NSString *)image
 {
     _image = [image copy];
     self.imgView.image = [UIImage imageNamed:_image];
 }

 - (void)awakeFromNib {
     self.imgView.layer.borderWidth = ;
     self.imgView.layer.borderColor = [UIColor whiteColor].CGColor;
     self.imgView.layer.cornerRadius = ;
     self.imgView.clipsToBounds = YES;
 }

 @end