Trying to make tags using collection view

Im trying to make this collectionView but programmatically:

https://github.com/shamiul110107/TagView-in-swift

TagView screenshot

This is my custom cell and View controller:

  import UIKit

 class TagCollectionViewCell: UICollectionViewCell {


override init(frame: CGRect) {
    super.init(frame: frame)
    
    self.backgroundColor = .black
// self.layer.cornerCurve = 8.0 NOT WORKING
    sportLabel.clipsToBounds = true
    sportLabel.textAlignment = .center
    
    contentView.addSubview(sportLabel)
    contentView.addSubview(deleteButton)
    
    
    NSLayoutConstraint.activate([
        sportLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
        sportLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        sportLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        
        deleteButton.topAnchor.constraint(equalTo: contentView.topAnchor),
        deleteButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        deleteButton.leadingAnchor.constraint(equalTo: sportLabel.trailingAnchor),
        deleteButton.widthAnchor.constraint(equalToConstant: 30)
        
    ])
}


lazy var sportLabel: UILabel = {
    let label = UILabel()
    label.backgroundColor = .lightGray
    label.textColor = .white
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

lazy var deleteButton : UIButton = {
    let button = UIButton()
    button.setImage(UIImage(systemName: "trash.circle.fill")?.withTintColor(UIColor.red), for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = .red
    return button
}()

required init?(coder: NSCoder) {
    fatalError()
}

 }

ViewController:

 import UIKit

class ViewController: UIViewController {

let arr = ["Ada","Belgrade","San Francisco"]

lazy var collectionView :UICollectionView = {
     let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 40, left: 0, bottom: 10, right: 10)
    layout.minimumLineSpacing = 1
    layout.minimumInteritemSpacing = 1
    let cv = UICollectionView(frame: .zero,collectionViewLayout: layout)
    
    cv.collectionViewLayout = layout
     cv.delegate = self
    cv.dataSource = self
    cv.register(TagCollectionViewCell.self, forCellWithReuseIdentifier: "trainingCell")
    cv.backgroundColor = .blue
    cv.translatesAutoresizingMaskIntoConstraints = false
     return cv
   
}()
override func viewDidLoad() {
    super.viewDidLoad()
    

    view.addSubview(collectionView)
    
    NSLayoutConstraint.activate([

        collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor,constant: 0),
        collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,constant: 10),
        collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor,constant: -10),
        collectionView.heightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.heightAnchor,multiplier: 1/3)
    
    ])
    
}


 }
  extension ViewController:  UICollectionViewDataSource, UICollectionViewDelegate,UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, numberOfSections section: Int) -> Int {
        return 1
    }

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return arr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "trainingCell", for: indexPath) as! TagCollectionViewCell
    cell.sportLabel.text = arr[indexPath.row]
    
    return cell
}


}

All I was able to make is this:

MyTagView

I don't know why cells overlapping and why Im not able to add corner radius.

Edit: When minimumInteritemSpacing = 50

minimumInteritemSpacing Changed to 50

My solution I don't know is it best solution but it works somehow :

To get rounded cells add to TagCollectionViewCell override init this:

   contentView.layer.cornerRadius = 4.0
    contentView.layer.masksToBounds = true
    sportLabel.clipsToBounds = true
    
    
    deleteButton.clipsToBounds = true

My solution for cell size was this. I have to mention that UIFont.systemFont(ofSize: 23) was best in my case:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    return  CGSize(width: arr[indexPath.row].size(withAttributes: [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 23)]).width + 40, height: 40)
    }

I had to add + 40 to width because I have button inside cell also that has fixed width = 30 so + 40 fits best.

With all modifications above it looks like this

from Recent Questions - Stack Overflow https://ift.tt/3tH5uFy
https://ift.tt/eA8V8J