This implementation is built using a UICollectionView and a custom flowLayout.
- horizontalAlignment = .left
- horizontalAlignment = .right
- horizontalAlignment = .center
- iOS 11.0+
- Swift 5
Add Instructions to your Podfile:
pod 'TagsFlowLayout'Then, run the following command:
$ pod installIn Xcode, use File > Swift Packages > Add Package Dependency and use https://github.com/rastaman111/TagsFlowLayout.
To install with Carthage, simply add the following line to your Podfile:
github "rastaman111/TagsFlowLayout"If you prefer not to use any of dependency managers, you can integrate manually. Put Sources/TagsFlowLayout folder in your Xcode project. Make sure to enable Copy items if needed and Create groups.
To use TagsFlowLayout inside your UIViewController:
import TagsFlowLayout
class ViewController: UICollectionViewController {
   
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let tagsFlowLayout = TagsFlowLayout(alignment: .left ,minimumInteritemSpacing: 10, minimumLineSpacing: 10, sectionInset: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
        collectionView.collectionViewLayout = tagsFlowLayout
        
        // register cell
        collectionView.register(nib: UINib(nibName: "ExampleCell", bundle: nil), forCellWithReuseIdentifier: "ExampleCell")
    }
    
   override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ExampleCell", for: indexPath) as! ExampleCell
        
        cell.maxWidth = collectionView.bounds.width - 30
        return cell
    }
}class TagCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var tagLabel: UILabel!
    
    @IBOutlet private var maxWidthConstraint: NSLayoutConstraint! {
        didSet {
            maxWidthConstraint.isActive = false
        }
    }
    
    var maxWidth: CGFloat? = nil {
        didSet {
            guard let maxWidth = maxWidth else {
                return
            }
            maxWidthConstraint.isActive = true
            maxWidthConstraint.constant = maxWidth
        }
    }
}TagsFlowLayout is available under the MIT license. See the LICENSE file for more info.