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

【问题标题】：UICollectionViewController - Over-scrolling / No vertical scrolling issueUICollectionViewController - 过度滚动/没有垂直滚动问题
【发布时间】：2014-04-23 13:10:19
【问题描述】：

我正在编写一份简报，其中涉及构建一个包含许多锻炼和练习的水平滚动视图。

我已经走上了在 UIView 中使用 UICollectionView 的路线，因为这听起来很适合我的需要。

我已经有一个水平滚动的视图来显示我的自定义单元格 - 我的问题是当页面滚动时它似乎滚动不足 - 即它将滚动小于页面宽度 - 所以如果我有 6到我的视图中途时的页面不同步（偏离中心）-

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

我的代码如下——

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;
}

故事板设置截图 -

【问题讨论】：

标签： ios objective-c uicollectionview

【解决方案1】：

您的UICollectionView 正在使用默认的“流”布局，该布局仅支持单向滚动 - 您不能使用流布局并在水平和垂直方向上滚动。

要实现双向滚动，您需要更改布局。幸运的是，有许多现有的 StackOverflow 问题可以帮助您继续前进：

Scrolling horizontal and vertical both direction

UICollectionView scrolling in both directions

【讨论】：

【解决方案2】：

第一个问题：

您的页面大小比您的滚动视图 contentsize.width 稍大。 UISCrollView（UICollectionView 是一个 UIScrollView）滚动整个 contentsize.width 的页面。在您的情况下，iPhone 屏幕的整个宽度。你的页面尺寸比那个大，它是手机屏幕尺寸+迭代项间距。

对于这种分页，您需要禁用本机 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

但该解决方案存在缺陷，因为它不能很好地处理轻弹。我的解决方案可以。

【讨论】：