使用CollectionView做横向滑动分页效果:

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用CollectionView做横向滑动分页效果:相关的知识,希望对你有一定的参考价值。

一开始几页滑动是没有问题的,等滑到三四个页面之后,就出现奇怪的缝隙,一开始死活找不到原因,最后在layout的代理方法minimumLineSpacingForSectionAtIndex返回值设置为0才解决,一开始想我只显示一行,跟这个应该没什么关系吧,就没设置,其他的两个代理方法minimumInteritemSpacingForSectionAtIndex和insetForSectionAtIndex都返回的是0.最后没辙了,1个晚上过去了,加了一个代理方法,然后问题就奇妙的解决了。

 

//添加UICollectionView

    {

        MyBigPictureFlowLayout *layout = [[MyBigPictureFlowLayout alloc] init];

        //UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

        [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

        self.albumCollection = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, kAllWidth, kAllHeight - 64) collectionViewLayout:layout];

        self.albumCollection.backgroundColor = [UIColor clearColor];

        self.albumCollection.dataSource = self;

        self.albumCollection.delegate = self;

        self.albumCollection.pagingEnabled = YES;

        self.albumCollection.bounces = YES;

        self.albumCollection.showsVerticalScrollIndicator = NO;

        self.albumCollection.showsHorizontalScrollIndicator = NO;

        self.albumCollection.contentSize = CGSizeMake(kAllWidth*self.dataSource.count, kAllHeight-64);

        self.albumCollection.contentOffset = CGPointMake(kAllWidth*(self.index-1), 0);

        [vContainer addSubview:self.albumCollection];

       

        //注册cell的视图

        static NSString *identifer = @"BigPictureCell";

        [self.albumCollection registerClass:[BigPictureCell class] forCellWithReuseIdentifier:identifer];

}

 

 

#pragma mark-Delegate的代理方法

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{

    return 0;

}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    return 0;

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    return CGSizeMake(kAllWidth, kAllHeight - 64);

}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    return UIEdgeInsetsMake(0, 0, 0, 0);

}

 

 

 

UICollectionViewFlowLayout的写法:

#import <UIKit/UIKit.h>

@interface MyBigPictureFlowLayout : UICollectionViewFlowLayout

@end

 

#import "MyBigPictureFlowLayout.h"

@implementation MyBigPictureFlowLayout

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{

    NSArray *answer=[[super layoutAttributesForElementsInRect:rect] mutableCopy];

    for (int i=1; i<[answer count]; i++) {

        UICollectionViewLayoutAttributes *currentLayoutAttributes=answer[i];

        UICollectionViewLayoutAttributes *prevLayoutAttributesans=answer[i-1];

        NSInteger maximumSpacing=0;

       

        //NSInteger origin=CGRectGetMaxX(prevLayoutAttributesans.frame);

        float origin = prevLayoutAttributesans.frame.origin.x + prevLayoutAttributesans.frame.size.width;

       

        CGRect frame=currentLayoutAttributes.frame;

        frame.origin.x=origin+maximumSpacing;

        currentLayoutAttributes.frame=frame;

    }

    NSLog(@"%@",answer);

    return answer;

}

@end

 

代码地址:http://git.oschina.net/hyp.cn/demo

 

 

以上是关于使用CollectionView做横向滑动分页效果:的主要内容,如果未能解决你的问题,请参考以下文章

iOS UICollectionView横向滑动并且横向加载数据

Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)

导航栏实现横向滑动效果

Android RecyclerView实现横向滑动翻页

横向滑动类listview 带回弹效果

Android两种方式实现横向滚动图标+指示器