iOS7开发中弹簧式列表的制作

1、iOS 7 开发中弹簧式列表的制作UIScrollView可以说是UIKit中最重要的类之一了，包括UITableView和UICollectionView等重要的数据容器类都是UIScrollView的子类。在历年的WWDC上，UIScrollView和相关的API都有专门的主题进行介绍，也可以看出这个类的使用和变化之快。今年也不例外，因为iOS7完全重新定义了UI，这使得UIScrollView里原来不太会使用的一些用法和实现的效果在新的系统中得到了很好的表现。另外，由于引入了UIKit Dynamics，我们还可以结合ScrollView做出一些以前不太可能或者需要花费很大力气来实现的效

2、果，包括带有重力的swipe或者是类似新的信息app中的带有弹簧效果聊天泡泡等。如果您还不太了解iOS7中信息app的效果，这里有一张gif图可以帮您大概了解一下：iOS7中信息app的弹簧效果这次笔记的内容主要就是实现一个这样的效果。为了避免重复造轮子，我对这个效果进行了一些简单的封装，并连同这篇笔记的demo一起扔在了Github上，有需要的童鞋可以到这里自取。iOS7的SDK中Apple最大的野心其实是想用SpriteKit来结束iOS平台游戏开发（至少是2D游戏开发）的乱战，统一游戏开发的方式并建立 良性社区。而UIKit Dynamics，个人猜测Apple在花费力气为SpriteK

3、it开发了物理引擎的同时，发现在UIKit中也可以使用，并能得到不错的效果，于是顺便革新了一下设计理念，在UI设计中引入了不少物理的概念。在iOS系统中，最为典型的应用是锁屏界面打开相机时中途放弃后的重力下坠+反弹的效果，另一 个就是信息应用中的加入弹性的消息列表了。弹性列表在我自己上手试过以后觉得表现形式确实很生动，可以消除原来列表那种冷冰冰的感觉，是有可能在今后的设 计中被大量使用的，因此决定学上一学。首先我们需要知道要如何实现这样一种效果，我们会用到哪些东西。毋庸置疑，如果不使用UIKit Dynamics的话，自己从头开始来完成会是一件非常费力的事情，你可能需要实现一套位置计算和物理模

4、拟来使效果看起来真实滑润。而UIKit Dynamics中已经给我们提供了现成的弹簧效果，可以用UIAttachmentBehavior进行实现。另外，在说到弹性效果的时候，我们其实是 在描述一个列表中的各个cell之间的关系，对于传统的UITableView来说，描述UITableViewCell之间的关系是比较复杂的（因为 Apple已经把绝大多数工作做了，包括计算cell位置和位移等。使用越简单，定制就会越麻烦在绝大多数情况下都是真理）。而 UICollectionView则通过layout来完成cell之间位置关系的描述，给了开发者较大的空间来实现布局。另外，UIKit Dynamic

5、s为UICollectionView做了很多方便的Catagory，可以很容易地“指导”UICollectionView利用加入物 理特性计算后的结果，在实现弹性效果的时候，UICollectionView是我们不二的选择。如果您在阅读这篇笔记的时候遇到困难的话，建议您可以看看我之前的一些笔记，包括今年的UIKit Dynamics的介绍和去年的UICollectionView介绍。话不多说，我们开工。首先准备一个UICollectionViewFlowLayout的子类（在这里叫做 VVSpringCollectionViewFlowLayout），然后在ViewController中用这个

6、layout实现一个简单的 collectionView：1. /ViewController.m2. 023. 03interfaceViewController()4. 04property(nonatomic,strong)VVSpringCollectionViewFlowLayout*layout;5. 05end6. 067. 07staticNSString*reuseId=collectionViewCellReuseId;8. 089. 09implementationViewController10. 10-(void)viewDidLoad11. 1112. 12supe

7、rviewDidLoad;13. 13/Doanyadditionalsetupafterloadingtheview,typicallyfromanib.14. 1415. 15self.layout=VVSpringCollectionViewFlowLayoutallocinit;16. 16self.layout.itemSize=CGSizeMake(self.view.frame.size.width,44);17. 17UICollectionView*collectionView=UICollectionViewallocinitWithFrame:self.view.fram

8、ecollectionViewLayout:self.layout;18. 1819. 19collectionView.backgroundColor=UIColorclearColor;20. 2021. 21collectionViewregisterClass:UICollectionViewCellclassforCellWithReuseIdentifier:reuseId;22. 2223. 23collectionView.dataSource=self;24. 24self.viewinsertSubview:collectionViewatIndex:0;25. 2526.

9、 2627. 27#pragmamark-UICollectionViewDataSource28. 28-(NSInteger)collectionView:(UICollectionView*)collectionViewnumberOfItemsInSection:(NSInteger)section29. 2930. 30return50;31. 3132. 3233. 33-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionViewcellForItemAtIndexPath:(NSIndexPath

10、*)indexPath34. 3435. 35UICollectionViewCell*cell=collectionViewdequeueReusableCellWithReuseIdentifier:reuseIdforIndexPath:indexPath;36. 3637. 37/Justgivearandomcolortothecell.See/kylefox/38. 38cell.contentView.backgroundColor=UIColorrandomColor;39. 39returncell;40. 4041. 41end这

11、部分没什么可以多说的，现在我们有一个标准的FlowLayout的UICollectionView了。通过使用 UICollectionViewFlowLayout的子类来作为开始的layout，我们可以节省下所有的初始cell位置计算的代码，在上面代码的情况下，这个collectionView的表现和一个普通的tableView并没有太大不同。接下来我们着重来看看要如何实现弹性的layout。对于弹性效果，我们需要的是连接一个item和一个锚点间弹性连接的UIAttachmentBehavior，并能在滚动时设置新的锚点位置。我们在scroll的时候，只要使用UIKit Dynamics的计算

12、结果，替代掉原来的位置更新计算（其实就是简单的scrollView的contentOffset的改变），就可以模拟出弹性的效果了。首先在-prepareLayout中为cell添加UIAttachmentBehavior。1. /VVSpringCollectionViewFlowLayout.m2. 02interfaceVVSpringCollectionViewFlowLayout()3. 03property(nonatomic,strong)UIDynamicAnimator*animator;4. 04end5. 056. 06implementationVVSpringColle

13、ctionViewFlowLayout7. 07/.8. 089. 09-(void)prepareLayout10. 10superprepareLayout;11. 1112. 12if(!_animator)13. 13_animator=UIDynamicAnimatorallocinitWithCollectionViewLayout:self;14. 14CGSizecontentSize=selfcollectionViewContentSize;15. 15NSArray*items=superlayoutAttributesForElementsInRect:CGRectMa

14、ke(0,0,contentSize.width,contentSize.height);16. 1617. 17for(UICollectionViewLayoutAttributes*iteminitems)18. 18UIAttachmentBehavior*spring=UIAttachmentBehaviorallocinitWithItem:itemattachedToAnchor:item.center;19. 1920. 20spring.length=0;21. 21spring.damping=0.5;22. 22spring.frequency=0.8;23. 2324.

15、 24_animatoraddBehavior:spring;25. 2526. 2627. 2728. 28endprepareLayout将在CollectionView进行排版的时候被调用。首先当然是call一下super的prepareLayout，你 肯定不会想要全都要自己进行设置的。接下来，如果是第一次调用这个方法的话，先初始化一个UIDynamicAnimator实例，来负责之后的动画效 果。iOS7 SDK中，UIDynamicAnimator类专门有一个针对UICollectionView的Category，以使 UICollectionView能够轻易地利用UIKit Dy

16、namics的结果。在UIDynamicAnimator.h中能够找到这个Category：1. interfaceUIDynamicAnimator(UICollectionViewAdditions)2. 023. 03/Whenyouinitializeadynamicanimatorwiththismethod,youshouldonlyassociatecollectionviewlayoutattributeswithyourbehaviors.4. 04/Theanimatorwillemploythecollectionviewlayoutscontentsizecoordin

17、atesystem.5. 05-(instancetype)initWithCollectionViewLayout:(UICollectionViewLayout*)layout;6. 067. 07/Thethreeconveniencemethodsreturninglayoutattributes(ifassociatedtobehaviorsintheanimator)iftheanimatorwasconfiguredwithcollectionviewlayout8. 08-(UICollectionViewLayoutAttributes*)layoutAttributesFo

18、rCellAtIndexPath:(NSIndexPath*)indexPath;9. 09-(UICollectionViewLayoutAttributes*)layoutAttributesForSupplementaryViewOfKind:(NSString*)kindatIndexPath:(NSIndexPath*)indexPath;10. 10-(UICollectionViewLayoutAttributes*)layoutAttributesForDecorationViewOfKind:(NSString*)decorationViewKindatIndexPath:(

19、NSIndexPath*)indexPath;11. 1112. 12end于是通过-initWithCollectionViewLayout:进行初始化后，这个UIDynamicAnimator实例便和我们的 layout进行了绑定，之后这个layout对应的attributes都应该由绑定的UIDynamicAnimator的实例给出。就像下面这样：1. /VVSpringCollectionViewFlowLayout.m2. 02implementationVVSpringCollectionViewFlowLayout3. 034. 04/.5. 056. 06-(NSArray*)

20、layoutAttributesForElementsInRect:(CGRect)rect7. 07return_animatoritemsInRect:rect;8. 089. 0910. 10-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath11. 11return_animatorlayoutAttributesForCellAtIndexPath:indexPath;12. 1213. 13end 向上拖动时的锚点变化示意现在我们来实现这个锚点的变

21、化。既然都是滑动，我们是不是可以考虑在UIScrollView的scrollViewDidScroll:委托方法中来 设定新的Behavior锚点值呢？理论上来说当然是可以的，但是如果这样的话我们大概就不得不面临着将刚才的layout实例设置为 collectionView的delegate这样一个事实。但是我们都知道layout应该做的事情是给collectionView提供必要的布局 信息，而不应该负责去处理它的委托事件。处理collectionView的回调更恰当地应该由处于collectionView的controller 层级的类来完成，而不应该由一个给collectionView提

22、供数据和信息的类来响应。在UICollectionViewLayout中，我们有一个叫做-shouldInvalidateLayoutForBoundsChange:的方法，每次layout的bounds发生变化的时 候，collectionView都会询问这个方法是否需要为这个新的边界和更新layout。一般情况下只要layout没有根据边界不同而发生变化的 话，这个方法直接不做处理地返回NO，表示保持现在的layout即可，而每次bounds改变时这个方法都会被调用的特点正好可以满足我们更新锚点的需 求，因此我们可以在这里面完成锚点的更新。1. /VVSpringCollectionVie

23、wFlowLayout.m2. implementationVVSpringCollectionViewFlowLayout3. 4. /.5. 6. -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds7. UIScrollView*scrollView=self.collectionView;8. CGFloatscrollDelta=newBounds.origin.y-scrollView.bounds.origin.y;9. 10. /Getthetouchpoint11. CGPointtouchLocatio

24、n=scrollView.panGestureRecognizerlocationInView:scrollView;12. 13. for(UIAttachmentBehavior*springin_animator.behaviors)14. CGPointanchorPoint=spring.anchorPoint;15. 16. CGFloatdistanceFromTouch=fabsf(touchLocation.y-anchorPoint.y);17. CGFloatscrollResistance=distanceFromTouch/500;18. 19. UICollectionViewLayoutAttributes*item=spring.i