第二次更新:更加丰富的相册图片展示
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
弱智博主模仿了LOL选择英雄皮肤的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 _)indexPath
3.-(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. 获得这个区域的item NSArray *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. 获取到可见区域的centerX CGFloat horizontalCenter = proposedContentOffset.x + self.collectionView.bounds.size.width / 2; // 3. 拿到可见区域的rect CGRect 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; // 比较是否有更小的,有的话赋值给minOffset if (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来计算对应的indexpath CGPoint pInView = [self.collectionView.superview convertPoint:self.collectionView.center toView:self.collectionView]; // 通过坐标获取对应的indexpath NSIndexPath *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]; // 获取中间的indexpath NSIndexPath *indexpathNew = [collectionView indexPathForItemAtPoint:pInUnderView]; if (indexPath.row == indexpathNew.row) { NSLog(@"点击了同一个"); return; } else { // 点击不同就把点击的滚动到中心居中 [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES]; } }
主要的一些方法和实现思路都已经介绍完了,小白写的Demo,大神勿喷,理解的同学可以自己试试
Demo地址:点击打开链接
Demo写的很仓促,有些细节还没做的很好,只是玩英雄联盟选择皮肤的时候突然想到要写一个试试,各位有什么问
题可以留言,我会慢慢更正
能阅读完博主的文章也是不容易,谢谢捧场,好人一生平安,博主会不断进步的,谢谢