swift中集合视图的自定义布局？答案

【问题标题】：Custom layout for collection view in swift?swift中集合视图的自定义布局？
【发布时间】：2015-06-12 10:31:25
【问题描述】：

我在 UICollectionView 的一个部分中有 7 个单元格。我已经搜索了几个小时，但我只能找到有关 CollectionFlow 和具有数百个单元格的自定义布局的信息。我想要的只是使用如下图的布局在集合视图中显示具有不同标识符的 7 个单元格：

我怎样才能实现这种布局？

【问题讨论】：

细胞应该在哪里？
在 UICollectionView 中。它们应该像上图那样不对称。
所以每个灰色框都是一个单元格？是否应该有更多，因为您在一个部分中要求 7 个单元格，但图表仅显示 3 个
是的，他们应该是 7 那样。这是前 3 个示例。

标签： ios swift layout uicollectionview cell

【解决方案1】：

这是我的解决方案。

class HistoryLayout: UICollectionViewLayout {

    var delegate : HistoryLayoutDelegate?

    var yOffSet : CGFloat = 0
    var xOffSetLand : CGFloat = 0
    var xOffSetPort : CGFloat = 0

    var portraitElements : [Int] = []

    var portraintItemPositionIndex = PortraintItemPositionIndex.Left

    private var cache = [CGRect]()

    var contentHeight: CGFloat  = 0.0
    var contentWidth: CGFloat {
        let insets = collectionView!.contentInset
        return CGRectGetWidth(collectionView!.bounds) - (insets.left + insets.right)
    }

    override func collectionViewContentSize() -> CGSize {
        return CGSize(width: contentWidth, height: contentHeight)
    }

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        var layoutAttributes = [UICollectionViewLayoutAttributes]()

        for item in 0 ..< collectionView!.numberOfItemsInSection(0) {
            let indexPath = NSIndexPath(forItem: item, inSection: 0)

            let attributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
            attributes.frame = cache[item]
            if CGRectIntersectsRect(attributes.frame, rect) {
                layoutAttributes.append(attributes)
            }
        }

        //send index list of elements with portraint position
        if let _ = delegate {
            delegate?.elementsWithVerticalPosition(self.portraitElements)
        }

        return layoutAttributes
    }

    override func prepareLayout() {

        if cache.isEmpty {
            var gropCount = Int(collectionView!.numberOfItemsInSection(0) / 3)

            if collectionView!.numberOfItemsInSection(0) % 3 != 0 {
                gropCount++
            }

            for index in 1...gropCount {

                self.improGroupByItem(index)

                contentHeight = ((contentWidth / 3) * 2) * CGFloat(index)
            }
        }
    }


    private func improGroupByItem(index : Int){
        if index % 2 == 0 {
            xOffSetLand = contentWidth / 3
            xOffSetPort = 0
            self.portraintItemPositionIndex = .Right
        }else{
            xOffSetLand = 0
            xOffSetPort = (contentWidth / 3) * 2
            self.portraintItemPositionIndex = .Left
        }

        if index > 1 {
          self.yOffSet += (contentWidth / 3) * 2
        }

        addItemToStack(index)
    }

    func addItemToStack(gIndex : Int){
        let columnWidth = self.contentWidth / 3
        var frame : CGRect

        var dublicate = 0

        for index in 1...3 {
            if index % portraintItemPositionIndex.rawValue == 0 {
                let width = columnWidth * 1
                let height = columnWidth * 2
                frame = CGRect(x: self.xOffSetPort, y: yOffSet, width: width, height: height)

                let indexOfPortElement = ((gIndex - 1)*3) + index - 1
                portraitElements.append(indexOfPortElement)
            }else{
                let width = columnWidth * 2
                let height = columnWidth * 1
                frame = CGRect(x: self.xOffSetLand, y: yOffSet + (height * CGFloat(dublicate)), width: width, height: height)
                dublicate++
            }

            cache.append(frame)
        }
    }
}

【讨论】：

【解决方案2】：

按照这个网址一步一步来......

SWIFT：

http://www.raywenderlich.com/78550/beginning-ios-collection-views-swift-part-1

目标 C：

https://github.com/eoghain/RBCollectionViewBalancedColumnLayout

【讨论】：

我已经通过使用 Swift 的第一个教程解决了这个问题。

【解决方案3】：

FlowLayout 可以，但您必须自定义 FlowLayout 属性。

对于不同的单元格大小使用此方法 -

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

【讨论】：

【解决方案4】：

我认为有两个解决方案：

使用库：https://github.com/bryceredd/RFQuiltLayout
使用 FlowLayout：https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/UsingtheFlowLayout/UsingtheFlowLayout.html

我想你有你需要的一切！ ;)

【讨论】：