UICollectionViewCell is reordered or disappear on scroll - ios

Question

I have a problem with UICollectionView. I created a collection with FlowLayout and I'm trying to resize only second item to make it width to 2xcellWidth. It's ok when View is appear, but after that, when I'm scrolling and back to top, my cell are disappear, reorder or change it width. It's totally weird behave.
So to be clear: I created collection view, scroll to bottom and when I back to top, I see my cells are in some weird place like this:
before:
after:
class MapEventsViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource, UICollectionViewDelegate {
var collectionView: UICollectionView!
let screenWidth = UIScreen.main.bounds.width
let options = [Options(id: "", value: "28-03-2017 10:54:01"),
Options(id: "", value: "Berlin Strasse 6A 00-000, Berlin", isDoubled: true),
Options(id: "Status", value: "-"),
Options(id: "Prędkość", value: "40km/h"),
Options(id: "Licznik", value: "250000km"),
Options(id: "Napięcie", value: "15V")]
override func viewDidLoad() {
super.viewDidLoad()
view.frame.size.height = 170
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 1, left: 0, bottom: 0, right: 1)
layout.minimumLineSpacing = 1
layout.minimumInteritemSpacing = 0
layout.scrollDirection = .vertical
collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(MapEventCell.self, forCellWithReuseIdentifier: "Cell")
collectionView.backgroundColor = UIColor.white
collectionView.isScrollEnabled = true
collectionView.alwaysBounceVertical = true
collectionView.autoresizingMask = UIViewAutoresizing.flexibleWidth
collectionView.backgroundColor = UIColor.init(white: 0.90, alpha: 1.0)
collectionView.showsVerticalScrollIndicator = true
self.view.addSubview(collectionView)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return options.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MapEventCell
cell.awakeFromNib()
cell.id.font = UIFont.systemFont(ofSize: 12)
cell.value.font = UIFont.boldSystemFont(ofSize: 14)
cell.backgroundColor = UIColor.white
if indexPath.row == 0{
cell.value.font = UIFont.systemFont(ofSize: 10)
cell.value.frame.origin.y -= 6
}
if indexPath.row == 1{
cell.value.font = UIFont.systemFont(ofSize: 10)
cell.value.frame.origin.y -= 6
}
return cell
}
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
let thisCell = cell as! MapEventCell
thisCell.id.text = options[indexPath.item].id
thisCell.value.text = options[indexPath.item].value
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// print("sizeForItemAt")
let cellWidth = UIScreen.main.bounds.width / 3 - 1
if options[indexPath.item].isDoubled{
return CGSize(width: cellWidth * 2 + 1, height: 40)
}
return CGSize(width: cellWidth, height: 40)
}
}
class MapEventCell: UICollectionViewCell{
var id: UILabel = UILabel()
var value: UILabel = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func awakeFromNib() {
print("addViews")
id.frame = CGRect(x: 0, y: 0, width: contentView.frame.width, height: 16)
id.textAlignment = .center
value.frame = CGRect(x: 0, y: 16, width: contentView.frame.width, height: 20)
value.textAlignment = .center
// id.font = UIFont.systemFont(ofSize: 12)
id.textColor = UIColor.lightGray
// value.font = UIFont.boldSystemFont(ofSize: 14)
contentView.addSubview(id)
contentView.addSubview(value)
}
override func prepareForReuse() {
id.removeFromSuperview()
value.removeFromSuperview()
}
}
UPDATE
I've solved this problem by calculating frame of each element in cell at CellForItemAt indexPath. So now it looks like this (and worked):
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MapEventCell
cell.awakeFromNib()
cell.backgroundColor = UIColor.white
if indexPath.section == 0{
cell.value.frame = CGRect(x: 0, y: 0, width: (screenWidth / 3), height: 30)
if options[indexPath.item].isDoubled {
cell.value.frame = CGRect(x: 0, y: 0, width: (screenWidth / 3) * 2 - 2, height: 30)
cell.value.textAlignment = .center
}
cell.id.isHidden = true
cell.value.font = UIFont.systemFont(ofSize: 10)
}else{
//cell.frame = CGRect(x: 0, y: 0, width: (screenWidth / 3) - 1, height: 40)
cell.id.isHidden = false
cell.id.font = UIFont.systemFont(ofSize: 10)
cell.value.font = UIFont.boldSystemFont(ofSize: 12)
}
return cell
}
But now I'm not sure is it good solving. I know that every time cells are reusing, so my question is, are there better solutions for this problem?