Horizontaler Bildlauf UICollectionView zeigt Tags an (benutzerdefiniertes Layout)

Question

Ich habe versucht, eine Sammlungsansicht zu erstellen, die Tags horizontal in zwei Zeilen darstellt. Der Benutzer kann dann horizontal scrollen, um weitere Tags anzuzeigen. Genau wie die Filter in der Bandcamp App https://itunes.apple.com/us/app/bandcamp/id706408639?mt=8

Ich fand ein sehr gutes Tutorial, wie Sie etwas Ähnliches tun, indem Sie UICollectionViewFlowLayout anpassen. https://codentrick.com/create-a-tag-flow-layout-with-uicollectionview/

Dieses Lernprogramm ist jedoch für eine vertikale Sammlungsansicht gedacht, bei der Zeilen nach Bedarf erstellt werden. Was ich brauche ist, dass die Tags richtig fließen und das Layout auf zwei Zeilen beschränkt wird. Diese

ist das Snippet des UICollectionViewFlowLayout aus dem Tutorial

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 
    } 
} 

Thx!

Answer 1

Modified Code nach rechts

class FlowLayout: UICollectionViewFlowLayout { 

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

     var rightMargin: CGFloat = rect.width; 

     for attribute in attributesForElementsInRect! { 
      attribute.frame.origin.x = rightMargin - attribute.frame.width - 8 

      if attribute.frame.origin.x <= self.sectionInset.left { 
       rightMargin = rect.width - self.sectionInset.right 
       attribute.frame.origin.x = rightMargin - attribute.frame.width 
      } 
      rightMargin = rightMargin - attribute.frame.size.width - 8 
      newAttributesForElementsInRect.append(attribute) 
     } 

     return newAttributesForElementsInRect 
    } 
} 

Answer 2

So ausgerichtet werden, habe ich es endlich geschafft, eine Lösung für mein Problem zu codieren: auf prepareLayout, ich neu zuweisen X/Y-Position auf meine Zellen sowie Breite meiner Inhalt, dann aktualisiere ich die Attribute auf LayoutAttributes. Der Trick besteht darin, eine Variable zu haben, die Informationen für beide Zeilen enthält, und jede Zelle entsprechend zu ändern. Hier ist der Code für diejenigen, die in ähnlichen Problem laufen

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 
} 


}