一、背景
效果：
video_22.gif
原本以为用collectionView实现很方便，发现使用page属性或者自己控制都达不到理想效果。下面通过修改flowLayout的方式实现：
#import "FDMBannerFlowLayout.h"
@interface FDMBannerFlowLayout()
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
@property (nonatomic, assign) CGFloat miniLineSpace;
@property (nonatomic, assign) CGFloat miniInterItemSpace;
@property (nonatomic, assign) CGSize eachItemSize;
@property (nonatomic, assign) BOOL scrollAnimation;/**<是否有分页动画*/
@property (nonatomic, assign) CGPoint lastOffset;/**<记录上次滑动停止时contentOffset值*/
@end
@implementation FDMBannerFlowLayout
/*初始化部分*/
- (instancetype)initWithSectionInset:(UIEdgeInsets)insets andMiniLineSapce:(CGFloat)miniLineSpace andMiniInterItemSpace:(CGFloat)miniInterItemSpace andItemSize:(CGSize)itemSize
{
self = [self init];
if (self) {
//基本尺寸/边距设置
self.sectionInsets = insets;
self.miniLineSpace = miniLineSpace;
self.miniInterItemSpace = miniInterItemSpace;
self.eachItemSize = itemSize;
// self.scrollAnimation = YES;
}
return self;
}
- (instancetype)init
{
self = [super init];
if (self) {
_lastOffset = CGPointZero;
}
return self;
}
-(void)prepareLayout
{
[super prepareLayout];
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;// 水平滚动
/*设置内边距*/
self.sectionInset = _sectionInsets;
self.minimumLineSpacing = _miniLineSpace;
self.minimumInteritemSpacing = _miniInterItemSpace;
self.itemSize = _eachItemSize;
/**
* decelerationRate系统给出了2个值：
* 1. UIScrollViewDecelerationRateFast（速率快）
* 2. UIScrollViewDecelerationRateNormal（速率慢）
* 此处设置滚动加速度率为fast，这样在移动cell后就会出现明显的吸附效果
*/
self.collectionView.decelerationRate = UIScrollViewDecelerationRateFast;
}
/**
* 这个方法的返回值，就决定了collectionView停止滚动时的偏移量
*/
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
CGFloat pageSpace = [self stepSpace];//计算分页步距
//最后一页左边的offsetX的值，实际滑不到这个值，用它是为了滑到最后一个时，往回滑可以正确计算前一个值
CGFloat contentWidth = self.collectionView.contentSize.width-(self.sectionInset.right+self.sectionInset.left);
CGFloat offsetMax = contentWidth - self.eachItemSize.width;
//x实际能到达的最大距离
CGFloat realOffsetMax = contentWidth - (self.collectionView.size.width-self.sectionInset.right);
CGFloat offsetMin = 0;
/*修改之前记录的位置，如果小于最小contentsize或者大于最大contentsize则重置值*/
if (proposedContentOffset.x=realOffsetMax)
{
//已经是最后一页了
//就算设置的x值大于realOffsetMax，最终也是滑到realOffsetMax的位置
proposedContentOffset.x = offsetMax;
}
CGFloat offsetForCurrentPointX = ABS(proposedContentOffset.x - _lastOffset.x);//目标位移点距离当前点的距离绝对值
CGFloat velocityX = velocity.x;
BOOL direction = (proposedContentOffset.x - _lastOffset.x) > 0;//判断当前滑动方向,手指向左滑动：YES；手指向右滑动：NO
if (offsetForCurrentPointX > pageSpace/6.0)
{
NSInteger pageFactor = 0;//分页因子，用于计算滑过的cell个数
if (velocityX != 0)
{
//不是拖动，就有速度，速度为滑动多少页
pageFactor = ABS(velocityX);//速率越快，cell滑过数量越多
}
else
{
//拖动
pageFactor = ABS(offsetForCurrentPointX/pageSpace);
}
/*设置pageFactor上限为2, 防止滑动速率过大，导致翻页过多*/
pageFactor = pageFactor<1?1:(pageFactor<3?1:2);
CGFloat pageOffsetX = pageSpace*pageFactor;
proposedContentOffset = CGPointMake(_lastOffset.x + (direction?pageOffsetX:-pageOffsetX), proposedContentOffset.y);
}
else
{
/*滚动距离，小于翻页步距一半，则不进行翻页操作*/
proposedContentOffset = CGPointMake(_lastOffset.x, _lastOffset.y);
}
if (proposedContentOffset.x>offsetMax)
{
proposedContentOffset.x = offsetMax;
}
//记录当前最新位置
_lastOffset.x = proposedContentOffset.x;
return proposedContentOffset;
}
/**
*计算每滑动一页的距离：步距
*/
-(CGFloat)stepSpace
{
return self.eachItemSize.width + self.miniLineSpace;
}
/**
* 当collectionView的显示范围发生改变的时候，是否需要重新刷新布局
* 一旦重新刷新布局，就会重新调用 layoutAttributesForElementsInRect:方法
*/
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
*防止报错先复制attributes
*/
- (NSArray *)getCopyOfAttributes:(NSArray *)attributes
{
NSMutableArray *copyArr = [NSMutableArray new];
for (UICollectionViewLayoutAttributes *attribute in attributes) {
[copyArr addObject:[attribute copy]];
}
return copyArr;
}
/**
*设置放大动画
*/
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
/*获取rect范围内的所有subview的UICollectionViewLayoutAttributes*/
NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];
/*动画计算*/
if (self.scrollAnimation)
{
/*计算屏幕中线*/
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*/
CATransform3D plane_3D = CATransform3DIdentity;
plane_3D = CATransform3DScale(plane_3D, 1, scale, 1);
attributes.transform3D = plane_3D;
}
}
return arr;
}
@end
使用collectionView加载flowLayout：
#import "FDMBaseBannerView.h"
#import "FDMBannerFlowLayout.h"
@interface FDMBaseBannerView()
{
}
@property(nonatomic) FDMBannerFlowLayout *flowLayout;
@property(nonatomic) UICollectionView *collectionView;
@end
@implementation FDMBaseBannerView
- (instancetype)initWithSectionInset:(UIEdgeInsets)insets andMiniLineSapce:(CGFloat)miniLineSpace andItemSize:(CGSize)itemSize{
if(self = [super init]){
self.flowLayout = [[FDMBannerFlowLayout alloc] initWithSectionInset:insets andMiniLineSapce:miniLineSpace andMiniInterItemSpace:0 andItemSize:itemSize];
[self setupUI];
}
return self;
}
- (void)setupUI{
self.dataArr = @[@"page1",@"page2",@"page3",@"page4",@"page5",@"page6",@"page7",@"page8"];
[self addSubview:self.collectionView];
[self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(0);
}];
}
#pragma -mark UICollectionViewDelegate
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.dataArr.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
NSInteger row = indexPath.row%self.dataArr.count;
NSString *str = self.dataArr[row];
//
UILabel *lab = [cell.contentView viewWithTag:10];
if(!lab){
lab = [[UILabel alloc] init];
lab.tag = 10;
[cell.contentView addSubview:lab];
[lab mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(0);
}];
}
lab.text = str;
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@">>>>>>>>>>%zi",indexPath.row);
}
#pragma -mark getting
- (UICollectionView *)collectionView{
if(!_collectionView){
UICollectionView *collect = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.flowLayout];
//代理设置
collect.delegate = self;
collect.dataSource = self;
collect.showsVerticalScrollIndicator = NO;
collect.showsHorizontalScrollIndicator = NO;
collect.decelerationRate = UIScrollViewDecelerationRateFast;
// collect.pagingEnabled = YES;
// collect.delaysContentTouches = NO;
// collect.canCancelContentTouches = NO;
// layout.itemSize = CGSizeMake(collect.frame.size.width-100, collect.frame.size.height);
//注册item类型 这里使用系统的类型
[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
_collectionView = collect;
}
return _collectionView;
}
@end
运用：
CGFloat collectH = 120;
CGFloat itemW = 200;
// UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, (iScreenW-itemW)/2, 0, (iScreenW-itemW)/2);
UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
self.bannerView = [[FDMBaseBannerView alloc] initWithSectionInset:sectionInset andMiniLineSapce:10 andItemSize:CGSizeMake(itemW, collectH)];
[self.view addSubview:self.bannerView];
[self.bannerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.trailing.mas_equalTo(0);
make.top.mas_equalTo(100);
make.height.mas_equalTo(collectH);
}];
如果想实现滑动过程中可以看到左边划走的内容，可以通过控制edgeInset.left和right实现