UICollectionView:像Safari选项卡或App Store搜索一样分页

Question

我想在我的应用程序中实现"卡片",如Safari标签或App Store搜索.

我将在屏幕中央向用户显示一张卡片,并在左侧和右侧向用户显示上一张和下一张卡片的一部分.(例如,请参阅App Store搜索或Safari选项卡)

我决定使用UICollectionView,我需要更改页面大小(没有找到如何)或实现自己的布局子类(不知道如何)？

有什么帮助吗？

Answer 1

以下是我发现获得此效果的最简单方法.它涉及您的集合视图和额外的秘密滚动视图.

设置您的集合视图

• 设置集合视图及其所有数据源方法.
• 构建集合视图; 它应该跨越您想要可见的整个宽度.

• 设置集合视图contentInset:

  _collectionView.contentInset = UIEdgeInsetsMake(0, (self.view.frame.size.width-pageSize)/2, 0, (self.view.frame.size.width-pageSize)/2);
  

这有助于正确抵消细胞.

设置您的秘密滚动视图

• 创建一个滚动视图,将其放在任何您喜欢的位置.hidden如果您愿意,可以将其设置为.
• 将scrollview的边界大小设置为所需的页面大小.
• 将自己设置为scrollview的委托.
• 将其设置contentSize为集合视图的预期内容大小.

移动手势识别器

• 将秘密scrollview的手势识别器添加到集合视图,并禁用集合视图的手势识别器:

  [_collectionView addGestureRecognizer:_secretScrollView.panGestureRecognizer];
  _collectionView.panGestureRecognizer.enabled = NO;
  

代表

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint contentOffset = scrollView.contentOffset;
    contentOffset.x = contentOffset.x - _collectionView.contentInset.left;
    _collectionView.contentOffset = contentOffset;
}

滚动视图移动时,获取其偏移量并将其设置为集合视图的偏移量.

我在这里写了这篇博文,请点击此链接获取更新:http://khanlou.com/2013/04/paging-a-overflowing-collection-view/

Answer 2

您可以子类化UICollectionViewFlowLayout并像这样重写:

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)contentOffset 
                                 withScrollingVelocity:(CGPoint)velocity
{
    NSArray* layoutAttributesArray = 
   [self layoutAttributesForElementsInRect:self.collectionView.bounds];

    if(layoutAttributesArray.count == 0)
        return contentOffset;


    UICollectionViewLayoutAttributes* candidate = 
    layoutAttributesArray.firstObject;

    for (UICollectionViewLayoutAttributes* layoutAttributes in layoutAttributesArray)
    {
        if (layoutAttributes.representedElementCategory != UICollectionElementCategoryCell)
            continue;


        if((velocity.x > 0.0 && layoutAttributes.center.x > candidate.center.x) ||
           (velocity.x <= 0.0 && layoutAttributes.center.x < candidate.center.x))
            candidate = layoutAttributes;


    }

    return CGPointMake(candidate.center.x - self.collectionView.bounds.size.width * 0.5f, contentOffset.y);
}

这将根据速度获得下一个或上一个单元格...但它不会在当前单元格上捕捉.