ios 启用分页的 UICollectionView

UICollectionView with Paging Enable

提问by user3755698

I have to create Grid view like Appstore iOS app. I want to do this with UICollectionView paging. I have also implemented the code but not able to scroll like that.

我必须像 Appstore iOS 应用程序一样创建网格视图。我想用 UICollectionView 分页来做到这一点。我也实现了代码，但不能像那样滚动。

What I want to do is there will one image in Center and at both sides(left and right), it should show some portion of previous and next image. I have set Frame for UICollectionView is 320*320. cell size is 290*320.(cell min spacing is 10)1

我想要做的是在中心和两侧（左侧和右侧）会有一个图像，它应该显示上一张和下一张图像的某些部分。我已将 UICollectionView 的 Frame 设置为 320*320。单元格大小为 290*320。（单元格最小间距为 10）1

Below are two links which depicts my requirement. Thanks in advance.

下面是两个链接，描述了我的要求。提前致谢。

(This is what I want) 2

（这就是我想要的）2

回答by Deepak

Have you tried setting the scroll direction of your UICollectionViewFlowLayout to horizontal?

您是否尝试将 UICollectionViewFlowLayout 的滚动方向设置为水平？

[yourFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

[yourFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

You'll need to enable paging on your collection view like so:

您需要在集合视图上启用分页，如下所示：

[yourCollectionView setPagingEnabled:YES];

[yourCollectionView setPagingEnabled:YES];

回答by Rickster

I took shtefane's answerand improved on it. Enter your own cellWidthand cellPaddingvalues.

我接受了shtefane 的回答并对其进行了改进。输入您自己的cellWidth和cellPadding值。

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
                     withVelocity:(CGPoint)velocity
              targetContentOffset:(inout CGPoint *)targetContentOffset
{
    CGFloat cellWidth = self.cellWidth;
    CGFloat cellPadding = 9;

    NSInteger page = (scrollView.contentOffset.x - cellWidth / 2) / (cellWidth + cellPadding) + 1;

    if (velocity.x > 0) page++;
    if (velocity.x < 0) page--;
    page = MAX(page,0);

    CGFloat newOffset = page * (cellWidth + cellPadding);
    targetContentOffset->x = newOffset;
}

回答by shtefane

If you use pagining in collectionView it will scroll by one page Not one cell. You can disable pagining and implement ScrollViewDelegate

如果您在 collectionView 中使用分页，它将滚动一页而不是一个单元格。您可以禁用分页并实现 ScrollViewDelegate

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
 {
     CGFloat pageW = 300;
    int page = scrollView.contentOffset.x / pageW;

    CGFloat newOffset =(page + ((velocity.x > 0)? 1 : -1)) * (pageW - 20);
    CGPoint target = CGPointMake(newOffset, 0);
    targetContentOffset = ⌖
    NSLog(@"end Drag at %f /%i /%f",scrollView.contentOffset.x, page, velocity.x);

 }

Only one different from standart paging: If you drag fast Collection will scroll more than one cell. And don't forget to add UIScrollViewDelegate

与标准分页只有一个不同：如果您快速拖动收藏夹将滚动多个单元格。并且不要忘记添加 UIScrollViewDelegate

回答by Habib Ali

Just use collectionView.isPagingEnabled = true;

只需使用 collectionView.isPagingEnabled = true;

回答by Abdoelrhman

Here's a working swift4 version of Ricksteranswer:

这是Rickster答案的swift4 版本：

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let cellWidth = 174 as CGFloat
    let cellPadding = 10 as CGFloat

    var page = (scrollView.contentOffset.x - cellWidth / 2) / (cellWidth + cellPadding) + 1

    if (velocity.x > 0) { page += 1 }
    if (velocity.x < 0) { page -= 1 }

    page = max(page,0)

    targetContentOffset.pointee.x = page * (cellWidth + cellPadding)
}

回答by Bill Chan

Ref to Rickster's answer and I rewrite with Swift 4:

参考 Rickster 的回答，我用 Swift 4 重写：

/* paging */
extension AlbumViewController {

    /* In case the user scrolls for a long swipe, the scroll view should animate to the nearest page when the scrollview decelerated. */
    override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        scrollToPage(scrollView, withVelocity: CGPoint(x:0, y:0))
    }

    override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        scrollToPage(scrollView, withVelocity: velocity)
    }

    func scrollToPage(_ scrollView: UIScrollView, withVelocity velocity: CGPoint) {
        let cellWidth: CGFloat = cellSize
        let cellPadding: CGFloat = 10

        var page: Int = Int((scrollView.contentOffset.x - cellWidth / 2) / (cellWidth + cellPadding) + 1)
        if velocity.x > 0 {
            page += 1
        }
        if velocity.x < 0 {
            page -= 1
        }
        page = max(page, 0)
        let newOffset: CGFloat = CGFloat(page) * (cellWidth + cellPadding)

        scrollView.setContentOffset(CGPoint(x:newOffset, y:0), animated: true)
    }
}