关于UICollectionView水平分页与纯代码

时间:2015-03-07 09:34:42

标签: ios objective-c uiscrollview uicollectionview uicollectionviewcell

为了实现自动水平滚动,我自定义了一个包含100个部分的collectionView,每个部分都有5个项目。然后添加一个NSTimer,将原始位置设置为collectionView(第50个部分)的中间,它最后工作。 (ps:collectionView是tableView的headerView!)

但是,当我自己滚动它时,它无法正确滚动到下一页。 它总是出现两个项目(位置不规则),但是我只想要一个。

最新进展:

设置flowLayout.minimumLineSpacing = 0.0f.后,两个项目的边距变为常规(接近未知的固定值)。我发现如果我刚刚完成启动应用程序并自己滚动它,它表现正常。但是,如果等待NSTimer运行并滚动,它的行为就像我说的那样。总之,如果没有NSTimer,它表现正常。也许NSTimer有问题......)

的例外:

enter image description here

enter image description here

原文实际上:

enter image description here

enter image description here

最新实际

enter image description here

enter image description here

如果我需要覆盖scrollViewDidScroll:,以及如何?还是要注意一些属性? 我的NSTimer有问题吗?

部分代码:

**POChannelPageHeader.h**  (a UICollectionViewCell)

@class POChannelPageItem;

@interface POChannelPageHeader : UICollectionViewCell
@property (nonatomic, strong) POChannelPageItem *channelPageItem;
+ (UICollectionViewCell *)cellWithCollectionView:(UICollectionView *)collectionView;

**POChannelPageHeader.m**
@interface POChannelPageHeader ()
@property (weak, nonatomic)  UILabel *titleLabel;
@property (weak, nonatomic)  UIImageView *picView;
@end


- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {

        [self makeView];
    }

    return self;
}

#pragma mark  custom cell
- (void)makeView
{
    UIImageView * picView = [[UIImageView alloc] init];
    self.picView = picView;
    self.picView.alpha = 0.1f;
    self.picView.contentMode = UIViewContentModeScaleToFill;
    [self.contentView addSubview:self.picView];

    UILabel *titleLabel = [[UILabel alloc] init];
    self.titleLabel = titleLabel;
    self.titleLabel.font = [UIFont systemFontOfSize:15.0f];
    self.titleLabel.textColor = [UIColor whiteColor];
    [self.titleLabel setBackgroundColor:[UIColor colorWithWhite:0.0f alpha:0.6f]];
    self.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;
    [self.contentView addSubview:self.titleLabel];
}


#pragma mark layoutSubviews
-(void)layoutSubviews
{
    [super layoutSubviews];

    self.picView.x = 0.0f;
    self.picView.y = 0.0f;
    self.picView.width = kScreenWidth ;
    self.picView.height = 0.4 * kScreenHeight;

    self.titleLabel.x = self.picView.x;
    self.titleLabel.width = kScreenWidth;
    CGFloat titleLabelPadding = 12.0f; 
    self.titleLabel.height = [NSString heightForText:self.titleLabel.text boundingRectWithWidth:TitleLabelWidth fontOfSize:15.0f] + titleLabelPadding;
    self.titleLabel.y = self.picView.height - self.titleLabel.height;

}

#pragma mark - setter
- (void)setChannelPageItem:(POChannelPageItem *)channelPageItem
{
    _channelPageItem = channelPageItem;
    self.picView.alpha = 0.1f;
    UIImage *placeholderImage = [UIImage imageWithColor:[UIColor colorWithWhite:0.0 alpha:0.2f]];
    [self.picView sd_setImageWithURL:[NSURL URLWithString:_channelPageItem.imgsrc] placeholderImage:placeholderImage options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        [UIView animateWithDuration:0.5f animations:^{
            self.picView.alpha = 1.0f;
        }];
    }];

    self.titleLabel.text = [@"  "  stringByAppendingString:_channelPageItem.title];

}




#import "POChannelPageViewController.h" ( a UITableViewController)

#define POChannelHeaderID     @"POChannelPageHeader"
#define POMaxSections         100
#define POChannelHeaderPages  5

@interface POChannelPageViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@property (weak, nonatomic)  UICollectionView *headerView;
@property (nonatomic, strong) NSMutableArray *headerNews;
@property (nonatomic, strong) NSTimer *timer;
@property (weak, nonatomic) UIPageControl *headerPage;


@end



- (void)viewDidLoad {

    [super viewDidLoad];
    [self makeHeaderView]
}

- (void)makeHeaderView
{

    UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
    flowLayout.itemSize = CGSizeMake(kScreenWidth, 0.4 * kScreenHeight);
    UICollectionView *headerView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth , 0.4 *kScreenHeight) collectionViewLayout:flowLayout];
    headerView.pagingEnabled = YES;

    self.headerView = headerView;
    self.headerView.delegate = self;
    self.headerView.dataSource = self;
    self.headerView.showsHorizontalScrollIndicator = NO;

    [self.headerView registerClass:[POChannelPageHeader class] forCellWithReuseIdentifier:POChannelHeaderID];
    self.tableView.tableHeaderView =self.headerView;

    // add PageControl
    UIPageControl *headerPage = [[UIPageControl alloc] init];
    headerPage.x = kScreenWidth - 100.0f  + 2.0f; // little adjustment 
    headerPage.height = 37;
    headerPage.y =  self.headerView.height - headerPage.height +  5.0f;// little adjustment 
    headerPage.width = 100.0f;
    self.headerPage = headerPage;
    self.headerPage.numberOfPages = POChannelHeaderPages;
    self.headerPage.currentPage = 0;
    self.headerPage.pageIndicatorTintColor = [UIColor lightGrayColor];
    self.headerPage.currentPageIndicatorTintColor = [UIColor colorWithRed:0.735 green:1.000 blue:0.300 alpha:1.000];
    [self.tableView addSubview:self.hederPage];

    [self.headerView  scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:POMaxSections / 2] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];

    [self addTimer];

}

#pragma mark - add Timer
- (void)addTimer
{
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:10.0f target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    self.timer = timer;

}

#pragma mark - remove Timer
- (void)removeTimer
{
    [self.timer invalidate];
    self.timer = nil;
}

#pragma mark - resetIndexPath
- (NSIndexPath *)resetIndexPath
{
    NSIndexPath *currentIndexPath = [[self.headerView indexPathsForVisibleItems] lastObject];

    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:POMaxSections / 2];

    [self.headerView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    return currentIndexPathReset;
}

- (void)nextPage
{
    NSIndexPath *currentIndexPathReset = [self resetIndexPath];

    NSInteger nextItem = currentIndexPathReset.item + 1;
    NSInteger nextSection = currentIndexPathReset.section;
    if (nextItem == self.headerNews.count) {
        nextItem = 0;
        nextSection++;
    }
    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];

    [self.headerView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}

#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.headerNews.count;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return POMaxSections;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    POChannelPageHeader *cell = [collectionView dequeueReusableCellWithReuseIdentifier:POChannelHeaderID forIndexPath:indexPath];

    cell.channelPageItem = self.headerNews[indexPath.item];

    return cell;
}

#pragma mark  - UICollectionViewDelegate
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
        [self removeTimer];

}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{

    if (scrollView == self.headerView) {
         [self addTimer];
    }


}



**// I'm not sure this method, because I study from a demo**
- (void)scrollViewDidScroll:(UIScrollView *)scrollView  
{
    if(scrollView == self.tableView ){
        **// especially here!!!** 
     NSInteger page = (NSInteger)(scrollView.contentOffset.x / scrollView.bounds.size.width + 0.5) % self.headerNews.count;
     self.headerPage.currentPage = page;

  } else if (scrollView ==self.tableView && scrollView.contentOffset.y ==0){

      [self addTimer];

} 

2 个答案:

答案 0 :(得分:2)

你能解释为什么你创造100个部分而不是一个部分有100个项目?无论如何,我看到2个错误: 1)你有一个全宽的图片和“项目间空间”,但你没有在这个空间的屏幕上有一个位置(在你的情况下,它不是项目间空间,而是右侧部分插入或其他) 2)你有一个正确的部分插入,但你没有左边

因此,如果您将初始位置设置为第一个单元格并滑动,您将在屏幕上看到一个插入部分。在下一次滑动时,您将看到前一个单元格的一小部分,插入和下一个单元格...这样,在50次滑动后,您将看到不可预测的屏幕偏移。

我画了一些方法来解决你的问题(对不起我的fotoshop的技巧:D)。在图片中黑色rect是屏幕,红色 - 集合视图和绿色 - 单元格。 X是单元格之间的空间。因此,您需要增加集合视图宽度,将其左侧,将左右部分插入设置为此空间的一半值。

enter image description here

结果是你将拥有一个带有项目间空间的全屏宽度图片,只有在刷卡时才能看到。

编辑:有示例项目https://github.com/dimasv28/slider

答案 1 :(得分:0)

为什么不为此使用UIPageViewController?它似乎更适合您的问题。它旨在完成您正在尝试做的事情。