水平分页滚动视图中缺少 UICollectionView 对齐逻辑 [英] UICollectionView align logic missing in horizontal paging scrollview

问题描述

我有一个 UICollectionView，它可以正常工作，直到我开始滚动.先来几张图:

I've got a UICollectionView, which works ok, until I start scrolling. Here some pics first:

如您所见，它很棒.当我开始滚动(启用分页)时，第一个有点离屏:

As you can see it's great. As I start scrolling (paging enabled) the first one goes a bit offscreen:

这就是问题所在.最初我的视图有 3 个视图，我只想滚动并显示 3 个视图.但是当它滚动(启用分页)时，它会隐藏一点第一个视图，并从下一页显示下一个第一个视图的一点点.

This is the problem. Originaly my view have 3 views and I want to scroll and show 3 views only. But as it scrolls (paging enabled) it hides a little bit of the first view and show little bit of the next first view from the next page.

这是一个视频，因为它有点难以解释:问题视频(Dropbox)

And here is a video, because it's kinda hard to explain: Video of the problem (Dropbox)

这是我的 UICollectionView 设置的图片:

Here is a picture of my UICollectionView settings:

如果有人可以提供帮助，那就太好了！

It's going to be great if someone can help!

推荐答案

根本问题是 Flow Layout 不是为支持分页而设计的.要实现分页效果，您将不得不牺牲单元格之间的空间.并仔细计算单元格框架，使其可以被集合视图框架分割，没有余数.我会解释原因.

The fundamental issue is Flow Layout is not designed to support the paging. To achieve the paging effect, you will have to sacrifice the space between cells. And carefully calculate the cells frame and make it can be divided by the collection view frame without remainders. I will explain the reason.

说下面的布局就是你想要的.

Saying the following layout is what you wanted.

注意，最左边的边距(绿色)不是单元格间距的一部分.它由流布局部分插图确定.由于流布局不支持异构间距值.这不是一项简单的任务.

Notice, the most left margin (green) is not part of the cell spacing. It is determined by the flow layout section inset. Since flow layout doesn't support heterogeneous spacing value. It is not a trivial task.

因此，在设置好间距和插图之后.您将得到以下布局.

Therefore, after setting the spacing and inset. The following layout is what you will get.

滚动到下一页后.您的单元格显然没有按照您的预期对齐.

After scroll to next page. Your cells are obviously not aligned as what you expected.

使单元格间距为 0 可以解决这个问题.但是，如果您想要页面上的额外边距，它会限制您的设计，尤其是当边距与单元格间距不同时.它还要求视图框架必须能被单元框架整除.有时，如果您的视图框架不固定(考虑旋转情况)，这会很痛苦.

Making the cell spacing 0 can solve this issue. However, it limits your design if you want the extra margin on the page, especially if the margin is different from the cell spacing. It also requires the view frame must be divisible by the cell frame. Sometimes, it is a pain if your view frame is not fixed (considering the rotation case).

- (CGSize)collectionViewContentSize
{
    // Only support single section for now.
    // Only support Horizontal scroll 
    NSUInteger count = [self.collectionView.dataSource collectionView:self.collectionView
                                               numberOfItemsInSection:0];

    CGSize canvasSize = self.collectionView.frame.size;
    CGSize contentSize = canvasSize;
    if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal)
    {
        NSUInteger rowCount = (canvasSize.height - self.itemSize.height) / (self.itemSize.height + self.minimumInteritemSpacing) + 1;
        NSUInteger columnCount = (canvasSize.width - self.itemSize.width) / (self.itemSize.width + self.minimumLineSpacing) + 1;
        NSUInteger page = ceilf((CGFloat)count / (CGFloat)(rowCount * columnCount));
        contentSize.width = page * canvasSize.width;
    }

    return contentSize;
}


- (CGRect)frameForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGSize canvasSize = self.collectionView.frame.size;

    NSUInteger rowCount = (canvasSize.height - self.itemSize.height) / (self.itemSize.height + self.minimumInteritemSpacing) + 1;
    NSUInteger columnCount = (canvasSize.width - self.itemSize.width) / (self.itemSize.width + self.minimumLineSpacing) + 1;

    CGFloat pageMarginX = (canvasSize.width - columnCount * self.itemSize.width - (columnCount > 1 ? (columnCount - 1) * self.minimumLineSpacing : 0)) / 2.0f;
    CGFloat pageMarginY = (canvasSize.height - rowCount * self.itemSize.height - (rowCount > 1 ? (rowCount - 1) * self.minimumInteritemSpacing : 0)) / 2.0f;

    NSUInteger page = indexPath.row / (rowCount * columnCount);
    NSUInteger remainder = indexPath.row - page * (rowCount * columnCount);
    NSUInteger row = remainder / columnCount;
    NSUInteger column = remainder - row * columnCount;

    CGRect cellFrame = CGRectZero;
    cellFrame.origin.x = pageMarginX + column * (self.itemSize.width + self.minimumLineSpacing);
    cellFrame.origin.y = pageMarginY + row * (self.itemSize.height + self.minimumInteritemSpacing);
    cellFrame.size.width = self.itemSize.width;
    cellFrame.size.height = self.itemSize.height;

    if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal)
    {
        cellFrame.origin.x += page * canvasSize.width;
    }

    return cellFrame;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes * attr = [super layoutAttributesForItemAtIndexPath:indexPath];
    attr.frame = [self frameForItemAtIndexPath:indexPath];
    return attr;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray * originAttrs = [super layoutAttributesForElementsInRect:rect];
    NSMutableArray * attrs = [NSMutableArray array];

    [originAttrs enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes * attr, NSUInteger idx, BOOL *stop) {
        NSIndexPath * idxPath = attr.indexPath;
        CGRect itemFrame = [self frameForItemAtIndexPath:idxPath];
        if (CGRectIntersectsRect(itemFrame, rect))
        {
            attr = [self layoutAttributesForItemAtIndexPath:idxPath];
            [attrs addObject:attr];
        }
    }];

    return attrs;
}

注意，上面的代码片段只支持单节和水平滚动方向.但是扩展起来并不难.

Notice, above code snippet only supports single section and horizontal scroll direction. But it is not hard to expand.

此外，如果您没有数百万个单元格.缓存那些 UICollectionViewLayoutAttributes 可能是个好主意.

Also, if you don't have millions of cells. Caching those UICollectionViewLayoutAttributes may be a good idea.

这篇关于水平分页滚动视图中缺少 UICollectionView 对齐逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！