How make width cell equal string length?

Question

I have a tags cloud make with UICollectionView. How make each cell width equal string length?

In collection view i have

1)HEADER (collectionHeader = collectionView for tags)

2)CONTENT ( collection view for content)

HEADER = collection view have class TagCell

listing of this class in footer.

----- LISTING COLLECTION VIEW CLASS TagCell -----

 class TagCell: UICollectionViewCell, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate, UICollectionViewDataSource {

var resultController:ResultController?

var tagsName = [String]()
var tagsIndex = [String]()



lazy var mainCollectionView : UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    let mc = UICollectionView(frame: .zero, collectionViewLayout: layout)
    mc.translatesAutoresizingMaskIntoConstraints = false
    mc.delegate = self
    mc.dataSource = self
    return mc
}()


override init(frame : CGRect) {
    super.init(frame: frame)
    setupView()
    mainCollectionView.register(Tags.self, forCellWithReuseIdentifier: "cell")
}

func setupView(){
    addSubview(mainCollectionView)
    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":mainCollectionView]))
    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":mainCollectionView]))
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return tagsIndex.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! Tags
    cell.backgroundColor = UIColor.red
    cell.headerLabel.text = tagsName[indexPath.item]
    cell.layer.cornerRadius = 5
    return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 70, height: 30)

    required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
  }

e.g. after trying @NickCatib answer I got following results

---- LISTING TAG CLASS (class for cell)

     class Tags : UICollectionViewCell {

override init(frame : CGRect) {
    super.init(frame: frame)
    setupView()
}

var headerLabel:UILabel = {
    let label = UILabel()
    label.text = ""
    label.font = UIFont.systemFont(ofSize: 12)
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

func setupView(){
    addSubview(headerLabel)
    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-2-[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":headerLabel]))
    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":headerLabel]))
}


required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

}

Miknash · Accepted Answer · 2016-12-25T18:22:06.357

1

For this issue I created extension:

extension String
{   
    func widthWithConstrainedHeight(_ height: CGFloat, font: UIFont) -> CGFloat {
        let constraintRect = CGSize(width: CGFloat.greatestFiniteMagnitude, height: height)

        let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSFontAttributeName: font], context: nil)

        return boundingBox.width
    }
}

You can use it like so:

let font = UIFont.systemFont(ofSize: 12)
let size = string.widthWithConstrainedHeight(17, font: font)
return NSSize(width: size + 10, height: 17)

In your particular case:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let string = tagsName[indexPath.item]
    let font = UIFont.systemFont(ofSize: 12)
    let size = string.widthWithConstrainedHeight(30, font: font)
    return NSSize(width: size + 10, height: 30)
}

Note: Be sure to use your font and size as well. Have constraints set on your cell for leading and trailing.

Also, I added 10 for the space on the left and right so it does have some margins.

edited Dec 25 '16 at 18:22

answered Dec 25 '16 at 18:09

Miknash

7,888
3
34
46

@maxim rad What is the issue, can you post screenshot? – Miknash Dec 25 '16 at 19:42
@how i can add in comment screenshot – maxim rad Dec 25 '16 at 19:42
just add it to question: e.g. after trying @NickCatib answer I got following results – Miknash Dec 25 '16 at 19:43
@maxim rad: You are missing leading and trailing constraints for label in cell - add them as written after Note: – Miknash Dec 25 '16 at 19:45
Also have you set your font as well instead of system one provided in answer – Miknash Dec 25 '16 at 19:49
H:|[v0]| and V:|[v0]| - my label constraints – maxim rad Dec 25 '16 at 19:49
Can you post your adding constraints as well - code? – Miknash Dec 25 '16 at 19:53
after add label.fotnt = UIFont.systemFont(ofSize: 12) in label for cell work right. THANKSSSSSS!!! – maxim rad Dec 25 '16 at 19:54
No problem - you should not change your label font but the example I provided: instead of 'let font = UIFont.systemFont(ofSize: 12)' set your font – Miknash Dec 25 '16 at 19:55
but can you help me. How make margins between tags – maxim rad Dec 25 '16 at 19:55
you might want to look at this: http://stackoverflow.com/questions/17229350/cell-spacing-in-uicollectionview If you are using storyboard, there is min spacing property on collection view. Set it there and observe results :) don't forget to accpet answer then :) – Miknash Dec 25 '16 at 19:58
I added listing class for tag. And i don't use storyboard. THNK you – maxim rad Dec 25 '16 at 20:02
No problem, happy programming :) – Miknash Dec 25 '16 at 20:02

How make width cell equal string length?

1 Answers1