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

网址：edu.51CTO.comiOS7开发中弹簧式列表的制作UIScrollView可以说是UIKit中最重要的类之一了，包括UITableView和UICollectionView等重要的数据容器类都是UIScrollView的子类。在历年的WWDC上，UIScrollView和相关的API都有专门的主题进行介绍，也可以看出这个类的使用和变化之快。今年也不例外，因为iOS7完全重新定义了UI，这使得UIScrollView里原来不太会使用的一些用法和实现的效果在新的系统中得到了很好的表现。另外，由于引入了UIKitDynamics，我们还可以结合ScrollView做出一些以前不太可能或者需要花费很大力气来实现的效果，包括带有重力的swipe或者是类似新的信息app中的带有弹簧效果聊天泡泡等。如果您还不太了解iOS7中信息app的效果，这里有一张gif图可以帮您大概了解一下：iOS7中信息app的弹簧效果这次笔记的内容主要就是实现一个这样的效果。为了避免重复造轮子，我对这个效果进行了一些简单的封装，并连同这篇笔记的demo一起扔在了Github上，有需要的童鞋可以到这里自取。iOS7的SDK中Apple最大的野心其实是想用SpriteKit来结束iOS平台游戏开发（至少是2D游戏开发）的乱战，统一游戏开发的方式并建立良性社区。而UIKitDynamics，个人猜测Apple在花费力气为SpriteKit开发了物理引擎的同时，发现在UIKit中也可以使网址：edu.51CTO.com用，并能得到不错的效果，于是顺便革新了一下设计理念，在UI设计中引入了不少物理的概念。在iOS系统中，最为典型的应用是锁屏界面打开相机时中途放弃后的重力下坠+反弹的效果，另一个就是信息应用中的加入弹性的消息列表了。弹性列表在我自己上手试过以后觉得表现形式确实很生动，可以消除原来列表那种冷冰冰的感觉，是有可能在今后的设计中被大量使用的，因此决定学上一学。首先我们需要知道要如何实现这样一种效果，我们会用到哪些东西。毋庸置疑，如果不使用UIKitDynamics的话，自己从头开始来完成会是一件非常费力的事情，你可能需要实现一套位置计算和物理模拟来使效果看起来真实滑润。而UIKitDynamics中已经给我们提供了现成的弹簧效果，可以用UIAttachmentBehavior进行实现。另外，在说到弹性效果的时候，我们其实是在描述一个列表中的各个cell之间的关系，对于传统的UITableView来说，描述UITableViewCell之间的关系是比较复杂的（因为Apple已经把绝大多数工作做了，包括计算cell位置和位移等。使用越简单，定制就会越麻烦在绝大多数情况下都是真理）。而UICollectionView则通过layout来完成cell之间位置关系的描述，给了开发者较大的空间来实现布局。另外，UIKitDynamics为UICollectionView做了很多方便的Catagory，可以很容易地“指导”UICollectionView利用加入物理特性计算后的结果，在实现弹性效果的时候，UICollectionView是我们不二的选择。如果您在阅读这篇笔记的时候遇到困难的话，建议您可以看看我之前的一些笔记，包括今年的UIKitDynamics的介绍和去年的UICollectionView介绍。话不多说，我们开工。首先准备一个UICollectionViewFlowLayout的子类（在这里叫做VVSpringCollectionViewFlowLayout），然后在ViewController中用这个layout实现一个简单的collectionView：1.//ViewController.m2.023.03@interfaceViewController()UICollectionViewDataSource,UICollectionViewDelegate4.04@property(nonatomic,strong)VVSpringCollectionViewFlowLayout*layout;5.05@end6.067.07staticNSString*reuseId=@collectionViewCellReuseId;8.089.09@implementationViewController10.10-(void)viewDidLoad11.11{网址：edu.51CTO.com12.12[superviewDidLoad];13.13//Doanyadditionalsetupafterloadingtheview,typicallyfromanib.14.1415.15self.layout=[[VVSpringCollectionViewFlowLayoutalloc]init];16.16self.layout.itemSize=CGSizeMake(self.view.frame.size.width,44);17.17UICollectionView*collectionView=[[UICollectionViewalloc]initWithFrame:self.view.framecollectionViewLayout:self.layout];18.1819.19collectionView.backgroundColor=[UIColorclearColor];20.2021.21[collectionViewregisterClass:[UICollectionViewCellclass]forCellWithReuseIdentifier:reuseId];22.2223.23collectionView.dataSource=self;24.24[self.viewinsertSubview:collectionViewatIndex:0];25.25}26.2627.27#pragmamark-UICollectionViewDataSource28.28-(NSInteger)collectionView:(UICollectionView*)collectionViewnumberOfItemsInSection:(NSInteger)section29.29{30.30return50;31.31}32.3233.33-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionViewcellForItemAtIndexPath:(NSIndexPath*)indexPath34.34{35.35UICollectionViewCell*cell=[collectionViewdequeueReusableCellWithReuseIdentifier:reuseIdforIndexPath:indexPath];36.3637.37//Justgivearandomcolortothecell.Seeahref=\=\_blank\=[UIColorrandomColor];39.39returncell;40.40}41.41@end这部分没什么可以多说的，现在我们有一个标准的FlowLayout的UICollectionView了。通过使用UICollectionViewFlowLayout的子类来作为开始的layout，我们可以节省下所有的初始cell位置计算的代码，在上面代码的情况下，这个collectionView的表现和一网址：edu.51CTO.com个普通的tableView并没有太大不同。接下来我们着重来看看要如何实现弹性的layout。对于弹性效果，我们需要的是连接一个item和一个锚点间弹性连接的UIAttachmentBehavior，并能在滚动时设置新的锚点位置。我们在scroll的时候，只要使用UIKitDynamics的计算结果，替代掉原来的位置更新计算（其实就是简单的scrollView的contentOffset的改变），就可以模拟出弹性的效果了。首先在-prepareLayout中为cell添加UIAttachmentBehavior。1.//VVSpringCollectionViewFlowLayout.m2.02@interfaceVVSpringCollectionViewFlowLayout()3.03@property(nonatomic,strong)UIDynamicAnimator*animator;4.04@end5.056.06@implementationVVSpringCollectionViewFlowLayout7.07//...8.089.09-(void)prepareLayout{10.10[superprepareLayout];11.1112.12if(!_animator){13.13_animator=[[UIDynamicAnimatoralloc]initWithCollectionViewLayout:self];14.14CGSizecontentSize=[selfcollectionViewContentSize];15.15NSArray*items=[superlayoutAttributesForElementsInRect:CGRectMake(0,0,contentSize.width,contentSize.height)];16.1617.17for(UICollectionViewLayoutAttributes*iteminitems){18.18UIAttachmentBehavior*spring=[[UIAttachmentBehavioralloc]initWithItem:itemattachedToAnchor:item.center];19.1920.20spring.length=0;21.21spring.damping=0.5;22.22spring.frequency=0.8;23.2324.24[_animatoraddBehavior:spring];25.25}26.26}27.27}28.28@endprepareLayout将在CollectionView进行排版的时候被调用。首先当然是call一下super的prepareLayout，你肯定不会想要全都要自己进行设置的。接下来，如果是第一次网址：edu.51CTO.com调用这个方法的话，先初始化一个UIDynamicAnimator实例，来负责之后的动画效果。iOS7SDK中，UIDynamicAnimator类专门有一个针对UICollectionView的Category，以使UICollectionView能够轻易地利用UIKitDynamics的结果。在UIDynamicAnimator.h中能够找到这个Category：1.@interfaceUIDynamicAnimator(UICollectionViewAdditions)2.023.03//Whenyouinitializeadynamicanimatorwiththismethod,youshouldonlyassociatecollectionviewlayoutattributeswithyourbehaviors.4.04//Theanimatorwillemploythecollectionviewlayout’scontentsizecoordinatesystem.5.05-(