UICollectionView高级进阶篇

By 庞海礁 | 2015年8月30日

转载请注明出处:http://www.olinone.com/

HI，亲爱读者朋友们，又到了博客更新的时间，在经历了大半年的沉淀，目前博客日访问人次已突破400大关，最高峰达到2600人次，非常感谢各位朋友的来访，在以后的博客中争取为大家带来更多的干货。各位朋友如果有好的文章或者题材都可以推荐给我，有什么想了解的知识，都可以在下面跟我留言，或者@庞海礁的个人空间

在聊完几次理论后，今天给大家带来一篇关于UI的文章，看标题大家已经知道了，没错，就是大家所熟悉的UICollectionView。说起github上赫赫有名的卡片展示视图iCarousel，大多数iOS开发人员或多或少都有听过或使用过，其丰富的展示样式经常出现在某些APP的一级路径，其实，苹果公司针对卡片样式祭出了自己的解决方案——UICollectionView

废话少说，先上干货HJCarouselDemo

看完GIF展示的效果，各位是否已经蠢蠢欲动，这不就是iCarousel视图嘛，没错！但是今天我们采用UICollectionView实现这些效果。平常开发中，最熟悉的莫过于UICollectionViewFlowLayout，其实UICollectionViewFlowLayout相当于苹果提前定义的一个特殊UICollectionViewLayout。

先看看UICollectionViewLayout类的官方文档（好吧，原谅我半天打不开苹果网址，最近敏感期，各种和谐)，还是直接看代码吧，总之，自定义UICollectionViewLayout，必须实现以下几个函数

collectionViewContentSize
layoutAttributesForElementsInRect:
layoutAttributesForItemAtIndexPath:
layoutAttributesForSupplementaryViewOfKind:atIndexPath: (if your layout supports supplementary views)
layoutAttributesForDecorationViewOfKind:atIndexPath: (if your layout supports decoration views)
shouldInvalidateLayoutForBoundsChange:

看函数名就可以知道各个函数实现的功能：第一个定位View的contentSize，第二个函数定义屏幕展示的范围和数量，第三个定义cell的布局，第四个和第五个是可选项，定义SupplementaryView以及DecorationView的布局，最后一个定义是否重新布局

UICollectionViewLayout的精髓在于你可以定义每个cell的UICollectionViewLayoutAttributes属性，包括

@property (nonatomic) CGRect frame;
@property (nonatomic) CGPoint center;
@property (nonatomic) CGSize size;
@property (nonatomic) CATransform3D transform3D;
@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGFloat alpha;
@property (nonatomic) NSInteger zIndex; // default is 0

@property (nonatomic) CGRect frame;

@property (nonatomic) CGPoint center;

@property (nonatomic) CGSize size;

@property (nonatomic) CATransform3D transform3D;

@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);

@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);

@property (nonatomic) CGFloat alpha;

@property (nonatomic) NSInteger zIndex; // default is 0

通过定义transform3D属性可以实现视图的旋转、放大以及透视等效果，具体实现参考HJCarouselDemo

在这里格外需要强调的一点，那就是page属性，当滑动停止时，希望UICollectionView滑动到卡片的中心，而不是任意位置

UICollectionViewLayout定义函数

– (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

其中，proposedContentOffset为系统期望滑动到的位置，velocity为加速度，你可以通过这两个参数以及当前所在的位置计算出你希望它滑动到的位置，具体算法根据需求的不同来实现

有用过我们天天动听iOS客户端或者QQ音乐的朋友，可能都非常熟悉这个动画效果，天天动听的推荐页面以及QQ音乐的电台界面，是不是就这样，嘿嘿！重要的事说三遍，赶快下载天天动听客户端，跟我们一起摇摆起来~~~

番外篇

说完View，接下来聊聊Controller，谈什么了？谈谈它们之间的关系，最近业界对设计模式的话题讨论比较热烈，MVC、MVVM、MVP等等，不知道各位在实际开发中一般使用什么样的设计模式，有什么好的想法都可以在下面留言，下期再见！

60 thoughts on “UICollectionView高级进阶篇”

一只小鱼 2015年8月31日

推荐MVVM，不错！

Reply ↓
So Easy 2015年9月1日

不错，支持一下!

Reply ↓
1. 庞海礁 Post author2015年9月1日
  
  谢谢来访
  
  Reply ↓
sauchye 2015年9月7日

支持支持

Reply ↓
1. 庞海礁 Post author2015年9月7日
  
  欢迎欢迎，多多交流~
  
  Reply ↓
匿名 2015年9月9日

感谢分享这么好的demo，要是可以无限循环就更好了

Reply ↓
1. 庞海礁 Post author2015年9月9日
  
  谢谢来访，无限循环是个问题~
  
  Reply ↓
卡卡 2015年9月9日

算法好复杂，有点注释就好了。

Reply ↓
1. 庞海礁 Post author2015年9月9日
  
  感谢来访，以后写demo时可以考虑加上必要的注释
  
  Reply ↓
匿名 2015年9月9日

写的很好啊~要是有数组内图片无限循环就好了，另外问一下能在storyboard中的View使用么？

Reply ↓
1. 庞海礁 Post author2015年9月9日
  
  这个只是collectionView的layout布局不属于试图，storyboard可以放collectionview
  
  Reply ↓
  1. 大炮哥哥 2015年9月10日
    
    嗯，学习了，正在移植，小弟是新手，楼主大大有QQ之类的嘛~有不明白的请教下你~
    
    Reply ↓
    1. 庞海礁 Post author2015年9月11日
      
      查看关于有个人资料
      
      Reply ↓
  2. 大炮哥哥 2015年9月10日
    
    感谢你的回复，正在移植中，但是遇到了一点问题，请问可以用QQ联系么？
    
    Reply ↓
大炮哥哥 2015年9月9日

写的很好啊，要是能无限循环数组内的图片就好了，另外问一下，可以在storyboard中的view使用吗？

Reply ↓
北京网络电话安装 2015年9月11日

你的站很好，可以做友情链接吗？
我们的站http://www.8fen.cn专业安装网络电话的，长途、市话一律8分钱，很划算，QQ138130

Reply ↓
1. 庞海礁 Post author2015年9月11日
  
  很抱歉，为了用户体验，暂不考虑广告，谢谢来访!
  
  Reply ↓
匿名 2015年9月15日

如果点击第二个不会滚动到第二个，如果点击第3个第4个直接跳转到第一个这是BUG么？
HJCarouselAnimLinear 这个样式

Reply ↓
1. 庞海礁 Post author2015年9月15日
  
  是的，目前collectionview对scroll这块支持还有问题，我们只能自己定义scrollto的位置，demo里面有部分代码，但是与实际使用中的高度和宽度有关系，没法统一，只能自己调节!
  
  Reply ↓
Rick 2015年9月18日

原文内容：“在这里格外需要强调的一点，那就是page属性，当滑动停止时，希望UICollectionView滑动到卡片的中心，而不是任意位置”
这里的page感觉表达的不是很好呀。我还以为是UICollectiooViewAtrribute对象里面的属性，还认真仔细的找了找，发现没有。
后来仔细想想感觉page的意思是要表达的UICollectionViewCell在滚动的时候停靠的处理

Reply ↓
1. 庞海礁 Post author2015年9月20日
  
  是的，想想系统控件貌似都没这个属性名，考虑到与page最相似，就用page了~
  
  Reply ↓
匿名 2015年10月13日

能不能限制一次只能滑出一个row不要自动一直平滑.

Reply ↓
1. 庞海礁 Post author2015年10月13日
  
  – (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
  函数中可以指定需要滚动到什么位置，可以自定义的
  
  Reply ↓
Pikdays 2015年12月29日

不知道各位在实际开发中一般使用什么样的设计模式，有什么好的想法都可以在下面留言，下期再见！

楼主来聊聊这个： VIPER

Reply ↓
莲花 2016年1月6日

没注释，表示看着费劲啊

Reply ↓
Pingback: 精品iOS阅读学习资料整理积累（2016年2月1日更新）-IT大道
Pingback: iOS开发博客及资源 - BirdMichael
匿名 2016年2月5日

你好，请问下如果是分组数据的话，怎样去做呢

Reply ↓
匿名 2016年2月25日

好炫的效果….

Reply ↓
匿名 2016年3月17日

为什么没有无限循环啊。。

Reply ↓
EK 2016年3月17日

为什么没有无限循环啊，希望加入这个啊

Reply ↓
1. 庞海礁 Post author2016年3月17日
  
  其实你可以将collection的数量设置为无穷大，起始点设置为一个很大一个值模拟为无限循环的
  
  Reply ↓
  1. 王宝安 2016年4月13日
    
    庞海礁，我这个想把活动的速度变慢，一次滑动一页，我应该怎样设置呢
    
    Reply ↓
    1. 庞海礁 Post author2016年4月13日
      
      如果做到每次滑动一页是很难的，毕竟滑动距离不同，不过可以修改期望滑动函数里面的终点距离
      
      Reply ↓
匿名 2016年5月6日

您好，我想了解下以下几个参数的计算依据/思想是怎样的，请教下博主：

CGFloat delta = cY – attributesY;
CGFloat ratio = – delta / (_itemHeight * 2);
CGFloat scale = 1 – ABS(delta) / (_itemHeight * 6.0) * cos(ratio * M_PI_4);

Reply ↓
HugSea 2016年5月6日

您好，我想了解下以下几个参数的计算依据/思想是怎样的，请教下博主：

CGFloat delta = cY – attributesY;
CGFloat ratio = – delta / (_itemHeight * 2);
CGFloat scale = 1 – ABS(delta) / (_itemHeight * 6.0) * cos(ratio * M_PI_4);

Reply ↓
1. 庞海礁 Post author2016年5月6日
  
  这个就是以中心为对齐点，计算两边的缩放比例
  
  Reply ↓
匿名 2016年5月19日

萨芬了

Reply ↓
李 2016年5月19日

不能循环。。。

Reply ↓
李 2016年5月19日

没有循环请求循环

Reply ↓
1. 庞海礁 Post author2016年5月20日
  
  把数量设为最大，从中间起始位置就可以模拟循环了
  
  Reply ↓
  1. 匿名 2016年7月27日
    
    咋么设置间距啊，跪求啊
    
    Reply ↓
匿名 2016年7月27日

能问下怎么设置行间距吗，找了半天没找到怎么设置啊

Reply ↓
刘 2016年7月28日

怎么设置间距啊，水平的那种，找了好久没找到哪里改啊

Reply ↓
1. 庞海礁 Post author2016年7月28日
  
  cell间距吗？
  
  Reply ↓
  1. 刘 2016年7月29日
    
    对，就是cell的间距，急需用到，求指导
    
    Reply ↓
    1. 庞海礁 Post author2016年7月29日
      
      目前具体还没有提供接口，需要修改Layout源码，你可以看看修改centerY值
      
      Reply ↓
      1. 刘 2016年7月29日
        
        恩，谢谢，之前试着改了下centerY的值，但是没改对，我在试试看
      2. 庞海礁 Post author2016年7月31日
        
        好的，源码并不复杂，看一下还是能理解的，都是系统SDK
刘 2016年8月19日

大神，能不能加下你qq，我通过修改centerY的值改了间距，但是模拟无限循环的时候，滑到几十张以后后面的就显示不出来了，给你留言没法发图，你帮我看一下，哪里还要改，看了好久，找不到原因啊。不修改间距就不会出现这个问题。我qq625158983

Reply ↓
刘 2016年8月19日

改成功了，通过改centerY的值来改变间距的思路没太对，我是改了scale的值+了0.055就好了，再次感谢大神的demo

Reply ↓
1. 庞海礁 Post author2016年8月19日
  
  赞一个
  
  Reply ↓
Pingback: 精品iOS阅读学习资料整理积累（2016年2月27日更新） – 项目经验积累与分享
匿名 2017年7月17日

受教了我以前都是自己手写ScrollerView来实现pageEnable的UICollecitonView

Reply ↓
匿名 2017年12月14日

HJCarouselAnimCarousel 下设置pagingEnabled

Reply ↓
b2e68885dfff98b5c8f4d0d64531b794 2018年1月18日

HJCarouselAnimCarousel 下设置pagingEnabled

Reply ↓
1. 庞海礁 Post author2018年1月30日
  
  这个无效的
  
  Reply ↓
匿名 2018年4月10日

大神，请问一下，UICollectionViewLayout不能直接放在UICollectionView上使用吗？如果要放到UICollectionView上直接展示该怎么设置？

Reply ↓
1. 庞海礁 Post author2018年4月18日
  
  可以的啊
  
  Reply ↓
匿名 2018年5月18日

您好，请教下，使用您这种自定义的Layout布局，UIcollectionView 的 scrollToItem 方法就失效了?

Reply ↓

番外篇

60 thoughts on “UICollectionView高级进阶篇”

发表回复 取消回复

发表回复取消回复