iOS开发 - UICollectionViewLayout 自定义布局

Model cell

#import <UIKit/UIKit.h>@interface ImageCell : UICollectionViewCell@property (nonatomic, copy) NSString *image;@end

#import "ImageCell.h"@interface ImageCell()@property (weak, nonatomic) IBOutlet UIImageView *imageView;@end@implementation ImageCell- (void)awakeFromNib {    self.imageView.layer.borderWidth = 3;    self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;    self.imageView.layer.cornerRadius = 3;    self.imageView.clipsToBounds = YES;}- (void)setImage:(NSString *)image{    _image = [image copy];    self.imageView.image = [UIImage imageNamed:image];}@end

控制器 ViewController

#import "ViewController.h"#import "ImageCell.h"#import "LineLayout.h"@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>@property (nonatomic, strong) NSMutableArray *images;@property (nonatomic, weak) UICollectionView *collectionView;@end@implementation ViewControllerstatic NSString *const ID = @"image";- (NSMutableArray *)images{    if (!_images) {        self.images = [[NSMutableArray alloc] init];        for (int i = 1; i<=20; i++) {            [self.images addObject:[NSString stringWithFormat:@"%d", i]];        }    }    return _images;}- (void)viewDidLoad {    [super viewDidLoad];    CGFloat w = self.view.frame.size.height;    CGRect rect = CGRectMake(0, 0, w, 200);    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:rect collectionViewLayout:[[LineLayout alloc] init]];    collectionView.dataSource = self;    collectionView.delegate = self;    [collectionView registerNib:[UINib nibWithNibName:@"ImageCell" bundle:nil] forCellWithReuseIdentifier:ID];    [self.view addSubview:collectionView];    self.collectionView = collectionView;    // collectionViewLayout :    // UICollectionViewLayout    // UICollectionViewFlowLayout}- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    if ([self.collectionView.collectionViewLayout isKindOfClass:[LineLayout class]]) {        [self.collectionView setCollectionViewLayout:[[UICollectionViewFlowLayout alloc] init] animated:YES];    } else {        [self.collectionView setCollectionViewLayout:[[LineLayout alloc] init] animated:YES];    }}#pragma mark - <UICollectionViewDataSource>- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return self.images.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    ImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];    cell.image = self.images[indexPath.item];    return cell;}- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    // 删除模型数据    [self.images removeObjectAtIndex:indexPath.item];    // 删UI(刷新UI)    [collectionView deleteItemsAtIndexPaths:@[indexPath]];}@end

堆布局 StackLayout

#define Random0_1 (arc4random_uniform(100)/100.0)#import "StackLayout.h"@implementation StackLayout- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{    return YES;}//- (CGSize)collectionViewContentSize//{//    return CGSizeMake(500, 500);//}- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    NSArray *angles = @[@0, @(-0.2), @(-0.5), @(0.2), @(0.5)];    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    attrs.size = CGSizeMake(100, 100);    attrs.center = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);    if (indexPath.item >= 5) {        attrs.hidden = YES;    } else {        attrs.transform = CGAffineTransformMakeRotation([angles[indexPath.item] floatValue]);        // zIndex越大,就越在上面        attrs.zIndex = [self.collectionView numberOfItemsInSection:indexPath.section] - indexPath.item;    }    return attrs;}- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    NSMutableArray *array = [NSMutableArray array];    NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (int i = 0; i<count; i++) {        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];        [array addObject:attrs];    }    return array;}@end

圆形布局 CircleLayout

#import "CircleLayout.h"@implementation CircleLayout- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{    return YES;}- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    attrs.size = CGSizeMake(50, 50);    // 圆的半径    CGFloat circleRadius = 70;    CGPoint circleCenter = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);    // 每个item之间的角度    CGFloat angleDelta = M_PI * 2 / [self.collectionView numberOfItemsInSection:indexPath.section];    // 计算当前item的角度    CGFloat angle = indexPath.item * angleDelta;    attrs.center = CGPointMake(circleCenter.x + circleRadius * cosf(angle), circleCenter.y - circleRadius * sinf(angle));    attrs.zIndex = indexPath.item;    return attrs;}- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    NSMutableArray *array = [NSMutableArray array];    NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (int i = 0; i<count; i++) {        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];        [array addObject:attrs];    }    return array;}@end