UICollectionView高级进阶篇

转载请注明出处: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属性，包括

1

2

3

4

5

6

7

8

@property(nonatomic)CGRectframe;

@property(nonatomic)CGPointcenter;

@property(nonatomic)CGSizesize;

@property(nonatomic)CATransform3Dtransform3D;

@property(nonatomic)CGRectboundsNS_AVAILABLE_IOS(7_0);

@property(nonatomic)CGAffineTransformtransformNS_AVAILABLE_IOS(7_0);

@property(nonatomic)CGFloatalpha;

@property(nonatomic)NSIntegerzIndex;// default is 0

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

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

UICollectionViewLayout定义函数

• - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

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

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