第二次更新：更加丰富的相册图片展示
1.由于不在继承与FlowLayout,只是单纯继承与UIColletionLayout
2.关键方法 layoutAttributesForItemAtIndexPath 在返回的对应index返回需要布局的UICollectionViewLayoutAttributes属性即可
3.还是直接下载代码看自定义的Layout吧，有问题请留言，大过年的写的比较仓促
传送门
个人感觉CollectionView过于强大，基本什么界面都能用他来完成需求，只是如果自定义Layout的时候可能性能开销大。如果是普通的需求，他和tableView并没有多大的区别，同样都是通过datasource和delegate两个代理来进行用户交互稍微回顾下CollectionView的构成
1.Cells
2.Supplementary Views 追加视图 （sectionHeader or footer）
3.Decoration Views 装饰视图 （用作背景展示） 这货貌似还没怎么用过
另一方面，对于cell的组织方式和样式，确实由于collectionView比tableView要复杂的多，因此没有按照tableView的方式来定义，而是专门启用了一个布局类UICollectionViewlayout来对collectionView进行布局。废话不多说，系统自带的Layout已经是很常见了，今天写个自定义Layout来做些看起来还是蛮不错的Demo
正常人的Demo
先理论BB以下，不想看的请跳过
实现一个自定义Layout的正常做法就是继承与UICollectionViewlayout，然后重载以下方法，听我一一道来
三个必须手动重载的方法
1.-(CGSize)collectionViewContentSize返回可见区域内的大小2.-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect返回的是包含UICollectionViewlayoutAttributes对象的数组，该对象可以是cell，supplementary或装饰视图返回对应indexPath下cell的布局属性-(UICollectionViewLayoutAttributes _)layoutAttributesForItemAtIndexPath:(NSIndexPath _)indexPath返回对应indexpath下对应的追加视图属性 （没有可不重载）-(UICollectionViewLayoutAttributes _)layoutAttributesForSupplementaryViewOfKind:(NSString _)kind atIndexPath:(NSIndexPath *)indexPath返回对应indexpath下对应的追加视图属性 （没有可不重载）-(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString_)decorationViewKind atIndexPath:(NSIndexPath _)indexPath3.-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds当边界发生变化时，也就是滚动的时候，如果返回Yes，就是会一直调用，而且不断刷新重新计算布局信息
一个自动重载的方法-(void)prepareLayout一般在该方法中设定一些必要的layout的结构和初始需要的参数等。
注意：在需要更新layout时，需要给当前layout发送 -invalidateLayout，该消息会立即返回，并且预约在下一个loop的时候刷新当前layout，这一点和UIView的setNeedsLayout方法十分类似。在-invalidateLayout后的下一个collectionView的刷新loop中，又会从prepareLayout开始，依次再调用-collectionViewContentSize和-layoutAttributesForElementsInRect来生成更新后的布局。
Demo分析
1.简单的做个弹出的动画容器View 以下的self就是指弹出来的View，View上面给了一层underBackView，最终是在改View上面布局
// self是继承于UIView的，给上面的第一个View容器加个动画- (void)showInSuperView:(UIView *)superView{CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];popAnimation.duration = 0.25;popAnimation.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1f, 0.1f, 1.0f)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0f, 1.0f, 1.0f)]];popAnimation.keyTimes = @[@0.2f, @1.0f];popAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];// 在点击按钮的时候在改方法里面add到父视图上面去[superView addSubview:self];// 给View上面的容器View加动画[self.underBackView.layer addAnimation:popAnimation forKey:nil];}
2.简单的懒加载布局视图以及一些回调delegate的设置就没必要多说了，大家都知道
#pragma mark - 懒加载- (UIView *)underBackView{if (_underBackView == nil) {_underBackView = [[UIView alloc] init];_underBackView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.8];_underBackView.originX = 30;_underBackView.originY = 60;_underBackView.width = SCREEN_WIDTH - 2 * _underBackView.originX;_underBackView.height = SCREEN_HEIGHT - 2 * _underBackView.originY;_underBackView.layer.cornerRadius = 5;_underBackView.layer.borderColor = [UIColor redColor].CGColor;_underBackView.layer.borderWidth = 2.0f;}return _underBackView;}- (UILabel *)nameLabel{if (_nameLabel == nil) {_nameLabel = [[UILabel alloc] init];_nameLabel.textAlignment = NSTextAlignmentCenter;_nameLabel.backgroundColor = [UIColor whiteColor];_nameLabel.font = [UIFont boldSystemFontOfSize:20];_nameLabel.textColor = [UIColor blueColor];_nameLabel.layer.cornerRadius = 5.0f;_nameLabel.layer.borderColor = [UIColor blackColor].CGColor;_nameLabel.layer.borderWidth = 2.0f;}return _nameLabel;}- (UIButton *)selectedButton{if (_selectedButton == nil) {_selectedButton = [UIButton buttonWithType:UIButtonTypeCustom];_selectedButton.backgroundColor = [UIColor blackColor];[_selectedButton setTitle:@"选这个" forState:UIControlStateNormal];[_selectedButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[_selectedButton addTarget:self action:@selector(chooseDone:) forControlEvents:UIControlEventTouchUpInside];_selectedButton.layer.cornerRadius = 20.0f;_selectedButton.layer.borderWidth = 2.0f;_selectedButton.layer.borderColor = [UIColor whiteColor].CGColor;}return _selectedButton;}- (void)chooseDone:(UIButton *)button{if (self.delegate && [self.delegate respondsToSelector:@selector(selectedHero:)]) {[self.delegate selectedHero:self.dataSource[_selectedIndex]];}}- (UIButton *)closeButton{if (_closeButton == nil) {_closeButton = [UIButton buttonWithType:UIButtonTypeCustom];_closeButton.backgroundColor = [UIColor redColor];[_closeButton setImage:[UIImage imageNamed:@"close"] forState:UIControlStateNormal];[_closeButton addTarget:self action:@selector(close:) forControlEvents:UIControlEventTouchUpInside];}return _closeButton;}- (void)close:(UIButton *)button{if (self.delegate && [self.delegate respondsToSelector:@selector(closePopView)]) {[self.delegate closePopView];}}- (UICollectionView *)collectionView{if (_collectionView == nil) {MKJCollectionViewFlowLayout *flow = [[MKJCollectionViewFlowLayout alloc] init];flow.scrollDirection = UICollectionViewScrollDirectionHorizontal;flow.itemSize = CGSizeMake(self.underBackView.width / 2, self.underBackView.width - 100);flow.minimumLineSpacing = 30;flow.minimumInteritemSpacing = 30;flow.needAlpha = YES;flow.delegate = self;CGFloat oneX =self.underBackView.width / 4;flow.sectionInset = UIEdgeInsetsMake(0, oneX, 0, oneX);_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 30, self.underBackView.bounds.size.width, self.underBackView.bounds.size.height * 0.65) collectionViewLayout:flow];_collectionView.backgroundColor = [UIColor whiteColor];_collectionView.delegate = self;_collectionView.dataSource = self;_collectionView.showsHorizontalScrollIndicator = NO;[_collectionView registerNib:[UINib nibWithNibName:indentify bundle:nil] forCellWithReuseIdentifier:indentify];}return _collectionView;}
3.关键是还是要看最终自定义的FlowLayout一些小东西的实现
重载的方法和方式在上面都已经理论了一番了，需要的自己去上面看看
第一个效果：需要一个放大的效果和透明的效果
// 重载第一个方法// 返回可见区域的的内容尺寸- (CGSize)collectionViewContentSize{return [super collectionViewContentSize];}// 重载方法第二个// 返回rect中所有元素的布局属性// 返回的是包含UICollectionViewLayoutAttributes的NSArray// UICollectionViewAttributes可以是cell，追加视图以及装饰视图的信息，通过以下三个不同的方法可以获取到不同类型的UICollectionViewLayoutAttributes属性// layoutAttributesForCellWithIndexPath： 返回对应cell的UICollectionViewAttributes布局属性// layoutAtttibutesForSupplementaryViewOfKind：withIndexPath： 返回装饰的布局属性 如果没有追加视图可不重载// layoutAttributesForDecorationViewOfKind：withIndexPath： 返回装饰的布局属性 如果没有可以不重载- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{//1. 获取可见区域CGRect visibleRect = CGRectMake(self.collectionView.contentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);//2. 获得这个区域的itemNSArray *visibleItemArray = [super layoutAttributesForElementsInRect:visibleRect];//3. 遍历，让靠近中心线的item方法，离开的缩小for (UICollectionViewLayoutAttributes *attributes in visibleItemArray){//1. 获取每个item距离可见区域左侧边框的距离 有正负CGFloat leftMargin = attributes.center.x - self.collectionView.contentOffset.x;//2. 获取边框距离屏幕中心的距离（固定的）CGFloat halfCenterX = self.collectionView.frame.size.width / 2;//3. 获取距离中心的的偏移量，需要绝对值CGFloat absOffset = fabs(halfCenterX - leftMargin);//4. 获取的实际的缩放比例 距离中心越多，这个值就越小，也就是item的scale越小 中心是方法最大的CGFloat scale = 1 - absOffset / halfCenterX;//5. 缩放attributes.transform3D = CATransform3DMakeScale(1 + scale * MKJMinZoomScale, 1 + scale * MKJMinZoomScale, 1);// 是否需要透明if (self.needAlpha){if (scale < 0.6){attributes.alpha = 0.6;}else if (scale > 0.99){attributes.alpha = 1.0;}else{attributes.alpha = scale;}}}NSArray *attributesArr = [[NSArray alloc] initWithArray:visibleItemArray copyItems:YES];return attributesArr;}
第二个效果：如何让滚动的的item根据中心距离，自动居中对齐，避免滚动到哪停到哪
这里做了第一个和最后一个的判断，不然在头和尾会出现对不齐的情况
// 重载第四个属性，item自动中心对齐// 该方法可写可不写，主要是让滚动的item根据距离中心的值，确定哪个必须展示在中心，不会像普通的那样滚动到哪里就停到哪里- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{// ProposeContentOffset是本来应该停下的位子// 1. 先给一个字段存储最小的偏移量 那么默认就是无限大CGFloat minOffset = CGFLOAT_MAX;// 2. 获取到可见区域的centerXCGFloat horizontalCenter = proposedContentOffset.x + self.collectionView.bounds.size.width / 2;// 3. 拿到可见区域的rectCGRect visibleRec = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);// 4. 获取到所有可见区域内的item数组NSArray *visibleAttributes = [super layoutAttributesForElementsInRect:visibleRec];// 遍历数组，找到距离中心最近偏移量是多少for (UICollectionViewLayoutAttributes *atts in visibleAttributes){// 可见区域内每个item对应的中心X坐标CGFloat itemCenterX = atts.center.x;// 比较是否有更小的，有的话赋值给minOffsetif (fabs(itemCenterX - horizontalCenter) <= fabs(minOffset)) {minOffset = itemCenterX - horizontalCenter;}}// 这里需要注意的是 上面获取到的minOffset有可能是负数，那么代表左边的item还没到中心，如果确定这种情况下左边的item是距离最近的，那么需要左边的item居中，意思就是collectionView的偏移量需要比原本更小才是，例如原先是1000的偏移，但是需要展示前一个item，所以需要1000减去某个偏移量，因此不需要更改偏移的正负// 但是当propose小于0的时候或者大于contentSize（除掉左侧和右侧偏移以及单个cell宽度） 、// 防止当第一个或者最后一个的时候不会有居中（偏移量超过了本身的宽度），直接卡在推荐的停留位置CGFloat centerOffsetX = proposedContentOffset.x + minOffset;if (centerOffsetX < 0) {centerOffsetX = 0;}if (centerOffsetX > self.collectionView.contentSize.width -(self.sectionInset.left + self.sectionInset.right + self.itemSize.width)) {centerOffsetX = floor(centerOffsetX);}return CGPointMake(centerOffsetX, proposedContentOffset.y);}
第三个效果：如何让视图滚动的时候（不触发点击事件），自动把滚动到第几个的图片展示出来（delegate）
CGPoint pInView = [self.collectionView.superviewconvertPoint:self.collectionView.centertoView:self.collectionView];
同学如果你无法理解上面的坐标转换可以点击以下传送门，帮你快速理解
点击打开链接我要学习
// 重载第三个属性// 滚动的时候会一直调用// 当边界发生变化的时候，是否应该刷新布局。如果YES那么就是边界发生变化的时候，重新计算布局信息 这里的newBounds变化的只有x值的变化，也就是偏移量的变化- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{// 把collectionView的父视图（underBackView）上的中心坐标，转换到整个CollectionView ContentSize中的坐标 根据point来计算对应的indexpathCGPoint pInView = [self.collectionView.superview convertPoint:self.collectionView.center toView:self.collectionView];// 通过坐标获取对应的indexpathNSIndexPath *indexPathNow = [self.collectionView indexPathForItemAtPoint:pInView];if (indexPathNow.row == 0){if (newBounds.origin.x < SCREEN_WIDTH / 2){if (_index != indexPathNow.row){_index = 0;if (self.delegate && [self.delegate respondsToSelector:@selector(collectioViewScrollToIndex:)]){[self.delegate collectioViewScrollToIndex:_index];}}}}else{if (_index != indexPathNow.row){_index = indexPathNow.row;if (self.delegate && [self.delegate respondsToSelector:@selector(collectioViewScrollToIndex:)]){[self.delegate collectioViewScrollToIndex:_index];}}}[super shouldInvalidateLayoutForBoundsChange:newBounds];return YES;}
第四个效果：点击Item，自动中心对齐
// 点击item的时候- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{// 这里的坐标相互转换 可看我写的另一个小博客CGPoint pInUnderView = [self.underBackView convertPoint:collectionView.center toView:collectionView];// 获取中间的indexpathNSIndexPath *indexpathNew = [collectionView indexPathForItemAtPoint:pInUnderView];if (indexPath.row == indexpathNew.row){NSLog(@"点击了同一个");return;}else{// 点击不同就把点击的滚动到中心居中[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];}}
主要的一些方法和实现思路都已经介绍完了，小白写的Demo，大神勿喷，理解的同学可以自己试试
Demo地址：点击打开链接
Demo写的很仓促，有些细节还没做的很好，只是玩英雄联盟选择皮肤的时候突然想到要写一个试试，各位有什么问题可以留言，我会慢慢更正能阅读完博主的文章也是不容易，谢谢捧场，好人一生平安，博主会不断进步的，谢谢
如果觉得《iOS卡片式立体轮播仿英雄联盟选择皮肤效果展示》对你有帮助，请点赞、收藏，并留下你的观点哦！
