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 install
In 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.