如何通过自动布局设置集合视图的单元格大小

Question

嗨,我正试图通过改变细胞大小auto layout.

我想用3乘3显示单元格.

第一个Cell的边距= 0

最后一个单元格的边距= 0

并且所有小区的空间都是1pt.像一个instagram.

我应该设置为Cell的尺寸吗？我希望通过Autolayout设置约束.

我也尝试使用代码设置单元格的大小.

这是我的代码:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSizeMake(123, 123);
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 1;
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 1;
}

但是......我认为它并不完全可以计算出细胞的大小.

如何根据屏幕尺寸设置单元格的大小？

我必须在单元格之间设置1pt的空间.

无论如何只能使用故事板设置？

如果没有,我如何设置代码？

谢谢.

Answer 1

我不相信您只能使用Storyboard来设置大小,因为您无法将约束设置为重复项目,例如在运行时即时创建的集合视图单元格.

您可以根据给定的信息轻松计算大小.在collectionView(_:layout:sizeForItemAt:)您可以访问的界限collectionView来计算你的期望的大小:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // Compute the dimension of a cell for an NxN layout with space S between
    // cells.  Take the collection view's width, subtract (N-1)*S points for
    // the spaces between the cells, and then divide by N to find the final
    // dimension for the cell's width and height.

    let cellsAcross: CGFloat = 3
    let spaceBetweenCells: CGFloat = 1
    let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross
    return CGSize(width: dim, height: dim)
}

这适用于所有尺寸的iPhone和iPad.

Answer 2

vacawama的答案很棒,但我遇到了2个问题.我希望自动使用我在故事板中定义的间距.

其次,我无法调用此函数,没有人提到如何？为了调用collectionView的sizeForItemAt,您需要扩展UICollectionViewDelegateFlowLayout而不是扩展UICollectionViewDelegate.我希望这能节省一些时间.

extension MyViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cellsAcross: CGFloat = 3
        var widthRemainingForCellContent = collectionView.bounds.width
        if let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout {
            let borderSize: CGFloat = flowLayout.sectionInset.left + flowLayout.sectionInset.right
            widthRemainingForCellContent -= borderSize + ((cellsAcross - 1) * flowLayout.minimumInteritemSpacing)
        }
        let cellWidth = widthRemainingForCellContent / cellsAcross
        return CGSize(width: cellWidth, height: cellWidth)
    }

}

Answer 3

我使用CollectionView的委托方法进行设置.这将为您提供2xN设置,但您可以轻松地将其设置为3xN.这是一个截图,你可以在GitHub上参考我的项目......

https://github.com/WadeSellers/GoInstaPro