UICollectionView详解三：UICollectionViewLayout

标签：uicollectionview   继承   对象   uicollectionviewlayo   

上一节中，我介绍了UICollectionViewFlowLayout的使用，它主要是使用在流式布局中的，但对于某些复杂的布局，UICollectionViewFlowLayout就不起作用了。这个时候，我们可以考虑使用UICollectionViewLayout。 UICollectionViewFlowLayout是继承自UICollectionViewLayout，并且拥有自己的流式特性。对于一些复杂的效果，我们完全可以自定义UICollectionViewLayout来实现。

这一节，我就介绍使用UICollectionViewLayout来实现不同布局的来回切换。最终效果图如下：

样式1：

样式2：

我们可以通过点击屏幕的空白区域来回的切换上面两种效果，并且切换过程中，动画效果非常的流畅。

主界面的代码和以前一样，设置数据源；初始化UICollectionView；注册UICollectionViewCell；代码如下：

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (nonatomic,strong) NSMutableArray *images;
@property (nonatomic,weak) UICollectionView *collectionView;
@end

static NSString *const identifer = @"ImageCell";

@implementation ViewController

-(NSMutableArray *)images {
    if (!_images) {
        _images = [NSMutableArray array];
        for (int i=1;i<=8;i++) {
            [_images addObject:[NSString stringWithFormat:@"%d.jpg",i]];
        }
    }
    return _images;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGRect rect = CGRectMake(0, 150, self.view.frame.size.width,400);
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:rect collectionViewLayout:[[LFStackLayout alloc] init]];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    
    // 注册collectionView(因为是从xib中加载cell的,所以registerNib)
    [collectionView registerNib:[UINib nibWithNibName:@"ImageCell" bundle:nil] forCellWithReuseIdentifier:identifer];
    
    [self.view addSubview:collectionView];
    
    self.collectionView = collectionView;
}

#pragma mark - 点击屏幕空白处，切换布局模式
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    if ([self.collectionView.collectionViewLayout isKindOfClass:[LFStackLayout class]]) {
        [self.collectionView setCollectionViewLayout:[[LFCircleLayout alloc] init] animated:YES];
    } else {
        [self.collectionView setCollectionViewLayout:[[LFStackLayout alloc] init] animated:YES];
    }
}

#pragma mark - delegate
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return  self.images.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    ImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifer forIndexPath:indexPath];
    
    cell.iconName = self.images[indexPath.item];
    
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    // 1. 删除模型数据
    [self.images removeObjectAtIndex:indexPath.item];
    
    // 2. 删除UI元素
    [collectionView deleteItemsAtIndexPaths:@[indexPath]];
}

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

@interface LFCircleLayout : UICollectionViewLayout

@end

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
     ...
}

自定义LFCircleLayout中实现的layoutAttributesForElementsInRect方法如下：

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

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.size = CGSizeMake(60, 60);
    
    // 第几个Item
    NSInteger index = indexPath.item;
    
    // 半径100
    CGFloat radius = 100;
    
    // 圆心
    CGFloat circleX = self.collectionView.frame.size.width * 0.5;
    CGFloat circleY = self.collectionView.frame.size.height * 0.5;
    
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    CGFloat singleItemAngle = 360.0 / count;
    
    // 计算各个环绕的图片center
    attrs.center = CGPointMake(circleX + radius * cosf(kCalcAngle(singleItemAngle * index)), circleY - radius * sinf(kCalcAngle(singleItemAngle * index)));
    
    return attrs;
}

#define kCalcAngle(x) x * M_PI / 180.0

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.size = CGSizeMake(150, 150);
    attrs.center = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);
    
    NSInteger index = indexPath.item;
    CGFloat angles[] ={0,15,30,45,60};
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    
    if (index >= 5) {
        attrs.hidden = YES;
    } else {
        attrs.transform = CGAffineTransformMakeRotation(kCalcAngle(angles[index]));
        attrs.zIndex = count - index;
    }
    
    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;
}

UICollectionView详解三：UICollectionViewLayout

标签：uicollectionview   继承   对象   uicollectionviewlayo   

原文地址：http://blog.csdn.net/sinat_27706697/article/details/45887355