ios - 显示标签的水平滚动 UICollectionView(自定义流布局)

Question

我一直在尝试创建一个 Collection View ，它在两行中水平显示标签。然后用户可以水平滚动以查看更多标签。与 Bandcamp 应用程序中的过滤器完全一样 https://itunes.apple.com/us/app/bandcamp/id706408639?mt=8

我找到了一个非常好的教程，介绍如何通过自定义 UICollectionViewFlowLayout 来做类似的事情。 https://codentrick.com/create-a-tag-flow-layout-with-uicollectionview/

但是，本教程适用于垂直 Collection View ，根据需要创建行。我需要的是让标签正确流动，并将布局限制为两行。

这是教程中 UICollectionViewFlowLayout 的片段

class FlowLayout: UICollectionViewFlowLayout {


  override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let attributesForElementsInRect = super.layoutAttributesForElementsInRect(rect)
    var newAttributesForElementsInRect = [UICollectionViewLayoutAttributes]()

    var leftMargin: CGFloat = 0.0;

    for attributes in attributesForElementsInRect! {
        if (attributes.frame.origin.x == self.sectionInset.left) {
            leftMargin = self.sectionInset.left
        } else {
            var newLeftAlignedFrame = attributes.frame
            newLeftAlignedFrame.origin.x = leftMargin
            attributes.frame = newLeftAlignedFrame
        }
        leftMargin += attributes.frame.size.width + 8
        newAttributesForElementsInRect.append(attributes)
    }

    return newAttributesForElementsInRect
  }
}

谢谢!

Answer 1

因此，我终于设法为我的问题编写了一个解决方案:在 prepareLayout 上，我将 X/Y 位置以及内容的宽度重新分配给单元格，然后更新 LayoutAttributes 上的属性。诀窍是有一个包含两行信息的变量，并相应地更改每个单元格。这是遇到类似问题的人的代码

import UIKit

class FlowLayout: UICollectionViewFlowLayout {

// SET SCROLL TO HORIZONTAL
override init(){
    super.init()
    scrollDirection = .Horizontal
}

required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)!
    self.scrollDirection = .Horizontal
}

// SET VARIABLES: Content height/width and layout attributes
private var contentWidth: CGFloat  = 0.0
private var contentHeight: CGFloat  = 50.0
private var cache = [UICollectionViewLayoutAttributes]()


override func prepareLayout() {
    super.prepareLayout()

    // RUNS ONLY ONCE
    if cache.isEmpty {
        var row = 0
        let numberOfRows = 2
        var rowWidth = [CGFloat](count: numberOfRows, repeatedValue: 0)
        var xOffset = [CGFloat](count: numberOfRows, repeatedValue: 0)

        for item in 0 ..< collectionView!.numberOfItemsInSection(0) {
            let indexPath = NSIndexPath(forItem: item, inSection: 0)
            let tag = super.layoutAttributesForItemAtIndexPath(indexPath)
            let attributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)

            attributes.frame = tag!.frame
            attributes.frame.origin.x = xOffset[row]
            cache.append(attributes)

            rowWidth[row] = rowWidth[row] + tag!.frame.size.width + 8
            xOffset[row] = xOffset[row] + tag!.frame.size.width + 8
            row = row >= (numberOfRows - 1) ? 0 : 1
        }
        contentWidth = rowWidth.maxElement()!
    }
}

// SETS DYNAMIC WIDTH BASED ON TAGS
override func collectionViewContentSize() -> CGSize {
    return CGSize(width: contentWidth, height: contentHeight)
}

// UPDATES CELL ATTRIBUTES
override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var layoutAttributes = [UICollectionViewLayoutAttributes]()
    for attributes  in cache {
        if CGRectIntersectsRect(attributes.frame, rect ) {
            layoutAttributes.append(attributes)
        }
    }
    return layoutAttributes
}

override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
    return true
}


}