UICollectionViewController - 滚动过度/没有垂直滚动问题

时间:2014-04-23 13:10:20

标签: ios objective-c uicollectionview

我正在制作一个简介,其中包括构建一个包含大量锻炼和练习的水平滚动视图。

我已经走过了在UIView中使用UICollectionView的路线,因为这听起来像是符合我的需要。

我有一个水平滚动视图,显示我的自定义单元格 - 我的问题是,当页面滚动它似乎下滚动 - 即它将滚动小于页面宽度 - 所以如果我有6我到达视线中间时的页面不同步(偏离中心) -

enter image description here

我的第二个问题是虽然我的视图水平滚动 - 但我无法垂直滚动以查看所有单元格。 - 我怎样才能让它发挥作用?

我的代码如下 -

WO_SessionVC.H

#import <UIKit/UIKit.h>
#import "BG_Blur_ViewController.h"

@interface WO_SessionVC : BG_Blur_ViewController <UICollectionViewDelegate,
UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout>
@property (weak, nonatomic) IBOutlet UICollectionView *colView;
@property (weak, nonatomic) IBOutlet UIPageControl *pager;
@end

WO_SessionVC.M

#import "WO_SessionVC.h"
#import "WOColView.h"
@interface WO_SessionVC ()
@end

@implementation WO_SessionVC

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
    // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
     [super viewDidLoad];
    // Do any additional setup after loading the view.
    _pager.numberOfPages = 9;
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

- (NSInteger)collectionView:(UICollectionView *)collectionView
 numberOfItemsInSection:(NSInteger)section
 {
     return 9;
 }

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
 {
    CGFloat pageWidth = _colView.frame.size.width;
    _pager.currentPage = _colView.contentOffset.x / pageWidth;
 }

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
              cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     // Dequeue a prototype cell and set the label to indicate the page
    WOColView *cell = [collectionView
                   dequeueReusableCellWithReuseIdentifier:@"CellWO"
                   forIndexPath:indexPath
                   ];

    return cell;
}

故事板设置屏幕截图 -

enter image description here

2 个答案:

答案 0 :(得分:2)

您的UICollectionView正在使用默认的&#39;流程&#39;布局,仅支持单向滚动 - 您不能使用流布局并在水平和垂直方向滚动。

要在两个方向上滚动,您需要更改布局。幸运的是,有很多现有的StackOverflow问题可以帮助您实现这些目标:

Scrolling horizontal and vertical both direction

UICollectionView scrolling in both directions

答案 1 :(得分:0)

第一个问题:

您的网页大小比您的scrollview contentsize.width大一点。 UISCrollView(UICollectionView是一个UIScrollView)滚动整个contentsize.width的页面。在你的情况下iPhone屏幕的整个宽度。您的页面尺寸大于此值,它是手机屏幕尺寸+ iteritem间距。

对于这种分页,您需要禁用本机UIScrollView分页(在故事板中启用“分页”)并告诉滚动视图以编程方式停止滚动的位置。在scrollViewDelegate和collectionView中的布局对象中有一种方法。我建议使用继承自UICollectionViewFlowLayout的自定义布局对象。我之前在自定义布局对象中已经完成了here

- (CGFloat)pageWidth {
    return self.itemSize.width + self.minimumLineSpacing;
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {

    if (self.paginationEnabled) {
        CGFloat rawPageValue = self.collectionView.contentOffset.x / self.pageWidth;
        CGFloat currentPage = (velocity.x > 0.0) ? floor(rawPageValue) : ceil(rawPageValue);
        CGFloat nextPage = (velocity.x > 0.0) ? ceil(rawPageValue) : floor(rawPageValue);

        BOOL pannedLessThanAPage = fabs(1 + currentPage - rawPageValue) > 0.5;
        BOOL flicked = fabs(velocity.x) > [self flickVelocity];
        if (pannedLessThanAPage && flicked) {
            proposedContentOffset.x = nextPage * self.pageWidth;
        } else {
            proposedContentOffset.x = round(rawPageValue) * self.pageWidth;
        }

        return proposedContentOffset;
    }

    return proposedContentOffset;
}

- (CGFloat)flickVelocity {
    return 0.3;
}

请注意,之前已在StackOverflow中询问过:targetContentOffsetForProposedContentOffset:withScrollingVelocity without subclassing UICollectionViewFlowLayout

但解决方案存在缺陷,因为它无法很好地处理轻弹。我的解决方案确实如此。