iOS：集合视图自定义标签布局动态Height Swift

Question

I am trying to create tag list view. Unfortunately I don't know How to work with Custom flow layout. But I found to create pretty tag list. But encountered a problem with multi-line label. If we used the text more than the collection view width, then the attribute.frame.height should be multiplied like 40*numberOfLines . Please help to solve this problem.

Custom Flow Layout:

import UIKit

class CollectionViewRow {
    var attributes = [UICollectionViewLayoutAttributes]()
    var spacing: CGFloat = 0



    init(spacing: CGFloat) {
        self.spacing = spacing
    }

    func add(attribute: UICollectionViewLayoutAttributes) {
        attributes.append(attribute)
    }

    var rowWidth: CGFloat {
        return attributes.reduce(0, { result, attribute -> CGFloat in
            return result + attribute.frame.width
        }) + CGFloat(attributes.count - 1) * spacing
    }

    func layout(collectionViewWidth: CGFloat) {
         
        var offset = spacing
        
        for attribute in attributes {
            attribute.frame.origin.x = offset
            offset += attribute.frame.width + spacing
        }
    }
}

class UICollectionViewCenterLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let attributes = super.layoutAttributesForElements(in: rect) else {
            return nil
        }

        var rows = [CollectionViewRow]()
        var currentRowY: CGFloat = -1

        for attribute in attributes {
            if currentRowY != attribute.frame.midY {
                currentRowY = attribute.frame.midY
                rows.append(CollectionViewRow(spacing: 10))
            }
            rows.last?.add(attribute: attribute)
        }

        rows.forEach { $0.layout(collectionViewWidth: collectionView?.frame.width ?? 0) }
        return rows.flatMap { $0.attributes }
    }
}

Usage:

let layout = UICollectionViewCenterLayout()
layout.estimatedItemSize = CGSize(width: 140, height: 40)
collectionView.collectionViewLayout = layout

collectionView.reloadData()

I tried to change height but It not working expected:

func layout(collectionViewWidth: CGFloat) {
     
    var offset = spacing
    
    for attribute in attributes {
        attribute.frame.origin.x = offset
        
        let attributeTotalWidth  = attribute.frame.width + spacing
        
        if attributeTotalWidth > collectionViewWidth{
            
            let multiplier: CGFloat  = attributeTotalWidth/collectionViewWidth
            
            let intVal = CGFloat(Int(multiplier))
            let fullNumber = multiplier-intVal > 0 ? intVal+1 : 
            attribute.frame.size.height = fullNumber * 40
        }
        
        offset += attributeTotalWidth
    }
}

Can you please help me to find out the solution to make variable item height based on the label text content? Thanking you in advance!

Answer 1

@iDeveloper I tried to fix your code.

Here are the things you can do.

1. Simplify your array.

   let titles = ["Apple","Google","Computer", "Terminal", "Gross", "Form lands", "Water lands", "river", "mounts", "trees", "places", "parks", "towns", "cities","Lorem Ipsum is simply dummy text of the printing and typesettingindustry.","Hello","A","B","CAD","John","Nick","Lucas","Amy","Lawrance","Apple","Google","Computer", "Browser","Overflow","Hi","Hello","A","B","CAD","John","Nick","Lucas","Amy","Lawrance", "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",""]

2. You have to add a width constraint to your title label like this.

3. Set content hugging priority for you label

End result

Answer 2

One could make the below code prettier by moving more code into Row, but it fixes the issue of clipped labels (as seen in the result image of the other answer). The code is also a lot simpler and still works with labels that contain multiple lines (label.numberOfLines = 0)

class CustomCollectionViewLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let attributes = super.layoutAttributesForElements(in: rect) else {
            return nil
        }

        let collectionViewWidth = collectionView?.frame.width ?? 0
        var rows = [Row]()
        let spacing: CGFloat = 10
        var offsetY: CGFloat = 0
        var offsetX: CGFloat = spacing

        rows.append(Row())
        
        for attribute in attributes {
            let neededWidth = CGFloat(attribute.frame.width) + spacing
            let neededMaxX = offsetX + neededWidth
            
            if neededMaxX <= collectionViewWidth {
                attribute.frame.origin.x = offsetX
                attribute.frame.origin.y = offsetY
                offsetX = neededMaxX
                rows.last?.add(attribute: attribute)
            } else {
                attribute.frame.origin.x = spacing
                offsetX = attribute.frame.origin.x + neededWidth
                offsetY += attribute.frame.height + spacing
                attribute.frame.origin.y = offsetY
                rows.append(Row())
                rows.last?.add(attribute: attribute)
            }
        }
        return rows.flatMap { $0.attributes }
    }
}

class Row {
    var attributes = [UICollectionViewLayoutAttributes]()
    init() {}
    func add(attribute: UICollectionViewLayoutAttributes) {
        attributes.append(attribute)
    }
}