UICollectionViewController基础(4)自定义

老规矩,直接上码。关于CustomCollectionViewLayout没有深入,照着例子来了一遍,也点进去看了一下。如果需要做比较复杂的布局,可以深入去研究一下。做到此时,感觉UICollectionViewController的应用场景太多了,因为CustomCollectionViewLayout的可定制性非常高。
项目github下载地址

CustomCollectionViewLayout

新建CustomCollectionViewLayout继承自UICollectionViewFlowLayout。在此处继承父类的方法进行重写。

//
//  CustomCollectionViewLayout.m
//  UICollectionVIewDemo
//
//  Created by DaLei on 2017/6/8.
//  Copyright © 2017年 DaLei. All rights reserved.
//

#import "CustomCollectionViewLayout.h"

@implementation CustomCollectionViewLayout

- (instancetype)init{
    if (self = [super init]) {
        
    }
    return self;
}

//判定为布局需要被无效化并重新计算的时候,布局对象会被询问以提供新的布局。
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return YES;
}

- (void)prepareLayout {
    [super prepareLayout];
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置内边距
    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    // 获得super已经计算好的布局属性
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
    // 计算collectionView最中心点的x值
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
    // 在原有布局属性的基础上,进行微调
    for (UICollectionViewLayoutAttributes *attrs in attributes) {
        // cell的中心点x 和 collectionView最中心点的x值 的间距
        CGFloat delta = ABS(attrs.center.x - centerX);
        // 根据间距值 计算 cell的缩放比例
        CGFloat scale = 1.2 - delta / self.collectionView.frame.size.width;
        NSLog(@"%f,%f",delta,scale);
        // 设置缩放比例
        attrs.transform = CGAffineTransformMakeScale(scale, scale);
    }
    return  attributes;
}

//这个方法的返回值,就决定了collectionView停止滚动时的偏移量
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
    // 计算出最终显示的矩形框
    CGRect rect;
    rect.origin.y = 0;
    rect.origin.x = proposedContentOffset.x;
    rect.size = self.collectionView.frame.size;
    // 获得super已经计算好的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    // 计算collectionView最中心点的x值
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    // 存放最小的间距值
    CGFloat minDelta = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attrs in array) {
        if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
            minDelta = attrs.center.x - centerX;
        }
    }
    // 修改原有的偏移量
    proposedContentOffset.x += minDelta;
    return proposedContentOffset;
}

@end

CustomCollectionViewController

新建CustomCollectionViewController继承自UICollectionViewController,像以往正常的CollectionViewController一样。

//
//  CustomCollectionViewController.m
//  UICollectionVIewDemo
//
//  Created by DaLei on 2017/6/8.
//  Copyright © 2017年 DaLei. All rights reserved.
//

#import "CustomCollectionViewController.h"
#import "CustomCollectionViewCell.h"
#import "CustomCollectionViewLayout.h"

@interface CustomCollectionViewController ()

@property(nonatomic,strong)NSArray *imageArray;

@end

@implementation CustomCollectionViewController

static NSString * const reuseIdentifier = @"CustomCollectionViewCell";

-(instancetype)init{
    CustomCollectionViewLayout *layout = [CustomCollectionViewLayout new];
    layout.itemSize = CGSizeMake(230, 350);
    return [super initWithCollectionViewLayout:layout];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"面皮大师-自定义";
    self.collectionView.backgroundColor = [UIColor yellowColor];
    // Register cell classes
    [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([CustomCollectionViewCell class]) bundle:nil] forCellWithReuseIdentifier:reuseIdentifier];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

-(NSArray *)imageArray{
    if (!_imageArray) {
        _imageArray = @[@"photo1.jpg",@"photo2.jpg",@"photo3.jpg",@"photo4.jpg",@"photo5.jpg",@"photo6.jpg",@"photo7.jpg",@"photo8.jpg",@"photo8.jpg"];
    }
    return _imageArray;
}

#pragma mark <UICollectionViewDataSource>

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CustomCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    [cell.image setImage:[UIImage imageNamed:[self.imageArray objectAtIndex:indexPath.item]]];
    return cell;
}

@end

CustomCollectionViewCell

新建CustomCollectionViewCell定义image变量。

//
//  CustomCollectionViewCell.h
//  UICollectionVIewDemo
//
//  Created by DaLei on 2017/6/8.
//  Copyright © 2017年 DaLei. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CustomCollectionViewCell : UICollectionViewCell

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

@end

同样,采用XIB。并拖一张图片上去

XIB

运行结果如下:

运行结果

学习参考:Developer_CYX

UICollectionViewController基础(1)
UICollectionViewController基础(2)引导页
UICollectionViewController基础(3)瀑布流
UICollectionViewController基础(4)自定义

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容