iOS 利用UICollectionView横向滚动、余弦函数曲线特性实现居中放大的卡片浏览工具 XLCardSwitch

转载：http://blog.csdn.net/u013282507/article/details/54136812

一、实现效果

二、原理说明

要实现这样的效果总共分三步：实现横向滚动、居中放大、自动居中。下面就仔细说一下具体的细节：

1、横向滚动

横向滚动是通过UICollectionView的横向滚动特性实现的，这里的数据源用plist文件模拟了一下

初始化数据：

[objc]view plain copy

NSString*filePath = [[NSBundlemainBundle]pathForResource:@"DataPropertyList"ofType:@"plist"];

NSArray*arr = [NSArrayarrayWithContentsOfFile:filePath];

NSMutableArray*models = [NSMutableArraynew];

for(NSDictionary*dic in arr) {

XLCardModel*model = [XLCardModelnew];

[modelsetValuesForKeysWithDictionary:dic];

[modelsaddObject:model];

}

下面是Collectionview创建的方法：

[objc]view plain copy

XLCardSwitchFlowLayout*flowLayout = [[XLCardSwitchFlowLayoutalloc]init];

[flowLayoutsetItemSize:CGSizeMake(200,self.bounds.size.height)];

//设置滚动方向

[flowLayoutsetScrollDirection:UICollectionViewScrollDirectionHorizontal];

_collectionView = [[UICollectionViewalloc]initWithFrame:self.boundscollectionViewLayout:flowLayout];

_collectionView.showsHorizontalScrollIndicator=false;

_collectionView.backgroundColor= [UIColorclearColor];

[_collectionViewregisterClass:[XLCardclass]forCellWithReuseIdentifier:@"XLCard"];

[_collectionViewsetUserInteractionEnabled:YES];

_collectionView.delegate=self;

_collectionView.dataSource=self;

[selfaddSubview:_collectionView];

数据源方法：

[objc]view plain copy

-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionViewcellForItemAtIndexPath:(NSIndexPath*)indexPath

{

staticNSString* cellId =@"XLCard";

XLCard* card = [collectionViewdequeueReusableCellWithReuseIdentifier:cellIdforIndexPath:indexPath];

card.model= _models[indexPath.row];

returncard;

}

这里用到了一个是自定义的FlowLayout，在以后放大工能中会使用到,实现的效果如下：

要实现第一个cell和最后一个cell都能滚动到屏幕居中的位置还需要加一下缩进：

[objc]view plain copy

//设置左右缩进

-(CGFloat)collectionInset

{

returnself.bounds.size.width/2.0f- [selfcellWidth]/2.0f;

}

-(UIEdgeInsets)collectionView:(UICollectionView*)collectionViewlayout:(UICollectionViewLayout*)collectionViewLayoutinsetForSectionAtIndex:(NSInteger)section

{

returnUIEdgeInsetsMake(0, [selfcollectionInset],0, [selfcollectionInset]);

}

效果如下：

2、居中放大

在自定义的UIcollectionFlowLayout中的layoutAttributesForElementsInRect方法里中设置放大的功能，放大功能主要是通过余弦函数曲线特性实现的，当x = 0时y = 1，两侧递减：

可以参考我之前写过的一篇博客：利用余弦函数实现卡片浏览工具

[objc]view plain copy

//设置放大动画

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

{

NSArray*arr = [selfgetCopyOfAttributes:[superlayoutAttributesForElementsInRect:rect]];

//屏幕中线

CGFloat centerX =self.collectionView.contentOffset.x+self.collectionView.bounds.size.width/2.0f;

//刷新cell缩放

for(UICollectionViewLayoutAttributes*attributes in arr) {

CGFloat distance = fabs(attributes.center.x- centerX);

//移动的距离和屏幕宽度的的比例

CGFloat apartScale = distance/self.collectionView.bounds.size.width;

//把卡片移动范围固定到 -π/4到 +π/4这一个范围内

CGFloat scale = fabs(cos(apartScale* M_PI/4));

//设置cell的缩放按照余弦函数曲线越居中越趋近于1

attributes.transform= CGAffineTransformMakeScale(1.0, scale);

}

returnarr;

}

[objc]view plain copy

//防止报错先复制attributes

- (NSArray*)getCopyOfAttributes:(NSArray*)attributes

{

NSMutableArray*copyArr = [NSMutableArraynew];

for(UICollectionViewLayoutAttributes*attribute in attributes) {

[copyArraddObject:[attributecopy]];

}

returncopyArr;

}

[objc]view plain copy

//是否需要重新计算布局

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

{

returntrue;

}

实现效果如下：

3、自动居中

设置全局属性，保存拖拽开始位置、结束位置和更新之后的位置。在手指拖拽开始记录起始位置，手指离开时记录结束位置并居中卡片。

[objc]view plain copy

NSInteger _currentIndex;

CGFloat _dragStartX;

CGFloat _dragEndX;

[objc]view plain copy

//手指拖动开始

-(void)scrollViewWillBeginDragging:(UIScrollView*)scrollView

{

_dragStartX = scrollView.contentOffset.x;

}

//手指拖动停止

-(void)scrollViewDidEndDragging:(UIScrollView*)scrollViewwillDecelerate:(BOOL)decelerate

{

_dragEndX = scrollView.contentOffset.x;

dispatch_async(dispatch_get_main_queue(), ^{

[selffixCellToCenter];

});

}

[objc]view plain copy

//配置cell居中

-(void)fixCellToCenter

{

//最小滚动距离

floatdragMiniDistance =self.bounds.size.width/20.0f;

if(_dragStartX - _dragEndX >= dragMiniDistance) {

_currentIndex -=1;//向右

}elseif(_dragEndX - _dragStartX >= dragMiniDistance){

_currentIndex +=1;//向左

}

NSInteger maxIndex = [_collectionViewnumberOfItemsInSection:0] -1;

_currentIndex = _currentIndex <=0?0: _currentIndex;

_currentIndex = _currentIndex >= maxIndex ? maxIndex : _currentIndex;

[_collectionViewscrollToItemAtIndexPath:[NSIndexPathindexPathForRow:_currentIndexinSection:0]atScrollPosition:UICollectionViewScrollPositionCenteredHorizontallyanimated:YES];

}