Ios 如何在UICollectionView中居中对齐项目?

Ios 如何在UICollectionView中居中对齐项目?,ios,uicollectionview,Ios,Uicollectionview,我有一个CollectionView,它显示了许多启用了水平滚动和分页功能的图像。第一页和最后一页显示完美,但其余页面显示不正确,它们显示的是相邻页面的部分图像,因为它们没有正确对齐(附屏幕截图)。如何使所有页面看起来相同,即图像正确居中对齐,以便相邻页面不会偷看 请注意第2页中从左侧偷看的图像,由于该图像的实际图像是从左侧剪裁的。如何修复此问题,使所有页面看起来都像第1页。正如您在评论中所回答的,可以找到答案。这是您要求的快速解决方案 Swift 1.2 override func col

我有一个CollectionView,它显示了许多启用了水平滚动和分页功能的图像。第一页和最后一页显示完美,但其余页面显示不正确,它们显示的是相邻页面的部分图像,因为它们没有正确对齐(附屏幕截图)。如何使所有页面看起来相同,即图像正确居中对齐,以便相邻页面不会偷看


请注意第2页中从左侧偷看的图像,由于该图像的实际图像是从左侧剪裁的。如何修复此问题,使所有页面看起来都像第1页。

正如您在评论中所回答的,可以找到答案。这是您要求的快速解决方案

Swift 1.2

override func collectionViewContentSize() -> CGSize {
    // Only support single section for now.
    // Only support Horizontal scroll
    let count = collectionView!.dataSource!.collectionView(collectionView!, numberOfItemsInSection: 0)

    let canvasSize = collectionView!.frame.size
    var contentSize = canvasSize

    if (scrollDirection == .Horizontal) {
        let rowCount = (canvasSize.height - itemSize.height) / (itemSize.height + minimumInteritemSpacing) + 1
        let columnCount = (canvasSize.width - itemSize.width) / (itemSize.width + minimumLineSpacing) + 1;
        let page = ceil(CGFloat(count) / (CGFloat)(rowCount * columnCount));
        contentSize.width = page * canvasSize.width;
    }

    return contentSize;
}

func frameForItemAtIndexPath(indexPath: NSIndexPath!) -> CGRect {
    let canvasSize = collectionView!.frame.size

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

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

    let page = CGFloat(indexPath.row) / (rowCount * columnCount)
    let remainder = CGFloat(indexPath.row) - page * (rowCount * columnCount)
    let row = remainder / columnCount
    let column = remainder - row * columnCount

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

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

    return cellFrame;
}

override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {
    var attributes = super.layoutAttributesForItemAtIndexPath(indexPath)
    attributes.frame = frameForItemAtIndexPath(indexPath)
    return attributes
}

override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
    let superAttrs = super.layoutAttributesForElementsInRect(rect)
    if let originAttrs = superAttrs as? [UICollectionViewLayoutAttributes] {
        var attrs = [UICollectionViewLayoutAttributes]()

        for (index, var attr) in enumerate(originAttrs) {
            let indexPath = attr.indexPath
            let itemFrame = frameForItemAtIndexPath(indexPath)
            if CGRectIntersectsRect(itemFrame, rect) {
                attr = layoutAttributesForItemAtIndexPath(indexPath)
                attrs.append(attr)
            }
        }

        return attrs
    }

    return superAttrs;
}
Swift 2.0

override func collectionViewContentSize() -> CGSize {
    // Only support single section for now.
    // Only support Horizontal scroll
    let count = collectionView!.dataSource!.collectionView(collectionView!, numberOfItemsInSection: 0)

    let canvasSize = collectionView!.frame.size
    var contentSize = canvasSize

    if (scrollDirection == .Horizontal) {
        let rowCount = (canvasSize.height - itemSize.height) / (itemSize.height + minimumInteritemSpacing) + 1
        let columnCount = (canvasSize.width - itemSize.width) / (itemSize.width + minimumLineSpacing) + 1;
        let page = ceil(CGFloat(count) / (CGFloat)(rowCount * columnCount));
        contentSize.width = page * canvasSize.width;
    }

    return contentSize;
}

func frameForItemAtIndexPath(indexPath: NSIndexPath!) -> CGRect {
    let canvasSize = collectionView!.frame.size

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

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

    let page = CGFloat(indexPath.row) / (rowCount * columnCount)
    let remainder = CGFloat(indexPath.row) - page * (rowCount * columnCount)
    let row = remainder / columnCount
    let column = remainder - row * columnCount

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

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

    return cellFrame;
}

override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
    let attributes = super.layoutAttributesForItemAtIndexPath(indexPath)
    attributes!.frame = frameForItemAtIndexPath(indexPath)
    return attributes
}

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let superAttrs = super.layoutAttributesForElementsInRect(rect)
    if let originAttrs = superAttrs as [UICollectionViewLayoutAttributes]! {
        var attrs = [UICollectionViewLayoutAttributes]()

        for (_, var attr) in originAttrs.enumerate() {
            let indexPath = attr.indexPath
            let itemFrame = frameForItemAtIndexPath(indexPath)
            if CGRectIntersectsRect(itemFrame, rect) {
                attr = layoutAttributesForItemAtIndexPath(indexPath)!
                attrs.append(attr)
            }
        }

        return attrs
    }

    return superAttrs;
}

尝试在CollectionView中启用分页我已经提到分页已启用。正如我所看到的,屏幕上只有3个单元格可以容纳一行,但是即使在第一个屏幕截图上,最后一张图像也有点被裁剪。不是吗?如果你想分页,你应该确保每一页的宽度相等。如果你有宽度为500的集合视图,并且你想要有5个页面,那么你的内容大小宽度应该等于2500,否则它看起来会很奇怪,有时可能会裁剪页面。这在你的屏幕截图上并不完美。我已经在photoshop登记了。在那里查看:。您可以在右侧看到10个透明像素。应该是这样的。这意味着您的图像被裁剪。您使用的是Swift 1.2还是Swift 2.0?我在swift中找到了一个有效的解决方案:,请您指导如何在单元格之间添加间距,因为缺少的只是单元格间距。这些单元格彼此粘着,没有任何空间。集合视图流布局有一个称为MinimumItemSpacing的变量。它定义了同一行中项目之间要使用的最小间距。我已更新了答案并添加了Swift 2.0解决方案。请告诉我在哪里指定最小最小材质间距。我正在学习Swift,对collectionview不太熟悉