我正在制作一个简介,其中包括构建一个包含大量锻炼和练习的水平滚动视图。
我已经走过了在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;
}
故事板设置屏幕截图 -
答案 0 :(得分:2)
您的UICollectionView
正在使用默认的&#39;流程&#39;布局,仅支持单向滚动 - 您不能使用流布局并在水平和垂直方向滚动。
要在两个方向上滚动,您需要更改布局。幸运的是,有很多现有的StackOverflow问题可以帮助您实现这些目标:
答案 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
但解决方案存在缺陷,因为它无法很好地处理轻弹。我的解决方案确实如此。