Sunday, 27 May 2018

Spacing is not correct in CollectionView when cell having dynamic width?

I want to achieve a TokenView (Chip view) style view. For this I am using a collection view inside a UITableViewCell, CollectionView is having custom cell.Inside custom cell there is UILabel. Now the width of a cell is depended on content of UILabel.

Below is code for custom UITableViewCell Cell

import UIKit

class LanguageTableViewCell: UITableViewCell,UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout{

        var arr:[String] = ["English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate","English","Intermediate"]
    @IBOutlet weak var collectionView: UICollectionView!

    override func awakeFromNib() {
        super.awakeFromNib()
        collectionView.dataSource = self
        collectionView.delegate = self
        let layout = UICollectionViewFlowLayout()
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0
        layout.scrollDirection = .vertical
        self.collectionView.collectionViewLayout = layout
        // Initialization code
    }


    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: "LanguageCollectionViewCell", for: indexPath) as! LanguageCollectionViewCell
        cell.setValue(lang: arr[indexPath.row],indexPath:indexPath)
        return cell
    }



    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let string = arr[indexPath.row]
        let width = (string.count * 10)
        return CGSize(width:width, height: 30)
    }

}

class for UICollectionViewCell

typealias Parameters = [String:Any]
import UIKit


class LanguageCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var languageLabel: UILabel!

    override func layoutSubviews() {
        super.layoutSubviews()

    }

    func setValue(lang:String ,indexPath:IndexPath) {

        if indexPath.row % 2 == 0 {
            languageLabel.backgroundColor = UIColor.gray

        }else {
            languageLabel.backgroundColor = UIColor.yellow

        }
            self.languageLabel.text = lang
    }
}

enter image description here



from Spacing is not correct in CollectionView when cell having dynamic width?

No comments:

Post a Comment