I am creating a collectionView that can have multiple sections with a self-sizing cell.
it works nicely on the initial layout. but after reload, I encounter three problem
- Scrolling become choppy
- cell size changed and cell overlap with each other
- content offset changed after reload data
here is ViewController code
class ViewController: UIViewController {
@IBOutlet var collectionView: UICollectionView!
var isLayout = false
let dataSource: [Model] = [
Model(title: "The domains wikipedia.com and wikipedia.org were registered on January 12, 2001[21] and January 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia mailing list.[17] Wikipedia's policy of [24] was codified in its first few months. Otherwise, there were relatively few rules initially and Wikipedia operated independently of Nupedia.[17] Originally, Bomis intended to make Wikipedia a business for profit.[25]"),
Model(title: "Otherwise, there were relatively few rules initially and Wikipedia operated independently of Nupedia.[17] Originally, Bomis intended to make Wikipedia a business for profit.[25]"),
Model(title: "of Nupedia.[17] Originally, Bomis intended to make Wikipedia a business for profit.[25]"),
Model(title: "The domains wikipedia.com and wikipedia.org were registered on January 12, 2001[21] and January 13,"),
Model(title: "The domains wikipedia.com and wikipedia.org were registered on January 12, 2001[21] and January 13,"),
Model(title: "Otherwise, there were relatively few rules initially and Wikipedia operated independently of Nupedia.[17] Originally, Bomis intended to make Wikipedia a business for profit.[25]"),
Model(title: "as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia mailing list.[17] "),
Model(title: " 2001,[13] as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia mailing list.[17] Wikipedia's policy of [24] was codified in its first few months. Otherwise, there were relatively few rules initially and Wikipedia operated independently"),
Model(title: "2001[21] and January 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia mailing list.[17] Wikipedia's policy of [24] was codified in "),
Model(title: "y 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia mailing list.[17] Wikipedia's policy of [24] was codified in its first few months. Otherwise, there were relatively few rules initially and Wikipedia operated indepe"),
Model(title: "of Nupedia.[17] Originally, Bomis intended to make Wikipedia a business for profit.[25]"),
Model(title: "domains wikipedia.com and wikipedia.org were registered on January 12, 2001[21] and January 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a singl"),
Model(title: "s first few months. Otherwise, there were relatively few rules initially and Wikipedia operated independently "),
Model(title: "s first few months. Otherwise,"),
Model(title: "i as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the "),
Model(title: "January 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a singl"),
Model(title: "Eespectively, and Wikipedia was launched on January 15, 2001,[13] as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia m"),
Model(title: "domains wikipedia.com and wikipedia.org were registered on January 12, 2001[21] and January 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a singl"),
Model(title: "anguage edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia m"),
Model(title: "anguage edition at www.wiki"),
Model(title: "domains"),
Model(title: "domains wikipedia.com and wikipedia.org were registered on January 12, 2001[21] and January 13, 2001[22] respectively, and Wikipedia was launched on January 15, 2001,[13] as a singl"),
Model(title: "Eespectively, and Wikipedia was launched on January 15, 2001,[13] as a single English-language edition at www.wikipedia.com,[23] and announced by Sanger on the Nupedia m"),
Model(title: "domains")
]
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if !isLayout {
if let collectionViewLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
collectionViewLayout.estimatedItemSize = CGSize(width: collectionView.frame.width/2, height: 100)
collectionViewLayout.invalidateLayout()
}
isLayout = true
}
}
@IBAction func reloadData(sender: UIButton) {
collectionView.reloadData()
}
}
// MARK: - Collection view delegate and data source methods
extension ViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return dataSource.count
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 6
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier:"cell", for: indexPath) as! TestCollectionViewCell
cell.titleLabel.text = dataSource[indexPath.item].title
cell.layer.borderWidth = 1
cell.layer.borderColor = UIColor.lightGray.cgColor
if indexPath.section % 2 == 0 {
cell.maxWidth = collectionView.bounds.width/2
} else {
cell.maxWidth = collectionView.bounds.width
}
return cell
}
}
below is the collectionView cell code
import UIKit
class TestCollectionViewCell: UICollectionViewCell {
@IBOutlet var titleLabel: 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
}
}
override func awakeFromNib() {
super.awakeFromNib()
contentView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
contentView.leftAnchor.constraint(equalTo: leftAnchor),
contentView.rightAnchor.constraint(equalTo: rightAnchor),
contentView.topAnchor.constraint(equalTo: topAnchor),
contentView.bottomAnchor.constraint(equalTo: bottomAnchor)
])
}
}
CollectionView cell contains only one label
- label(leading,trailing,top,bottom) equal to collectionview cell(leading,trailing,top,bottom)
- label width equal to 50 with 900 priority
Here is the demo source code https://drive.google.com/file/d/1C_LhIsTPRSW19UKMQPJiroAZ8KO4gciW/view
