Why I need to scroll up and down first before the collection view cell updated? - ios

Question

I am trying to make a category list using CollectionView, as we can see there is a brown circle that actually an UIView (Designable Background View).
I want to update that background colour from brown to random colour. but the random colour only show up after I scroll up and scroll down the CollectionView, like the .gif file in here : http://g.recordit.co/BxRf26Uw2t.gif
before scroll down the colour will be still in brown like this
after scroll up and down, the colour will be updated, but some of the item still in the brown colour like this :
here is the code of my ViewController
import UIKit
import ChameleonFramework
class FacilitiesVC: UIViewController {
#IBOutlet weak var collectionVIew: UICollectionView!
struct StoryBoard {
// Collection View
static let indoorFacilitiesCategoryCellIdentifier = "indoorFacilitiesCell"
static let numberOfColumnsPerRow : CGFloat = 3.0
static let inset: CGFloat = 10.0
static let spacing: CGFloat = 8.0
static let lineSpacing: CGFloat = 8.0
//segue Identifiers
}
var indoorFacilitiesCategoryData = [FacilitiesCategory]()
var outdoorFacilitiesCategoryData = [FacilitiesCategory]()
override func viewDidLoad() {
super.viewDidLoad()
getIndoorOutdoorFacilitiesData()
}
}
extension FacilitiesVC {
func getIndoorOutdoorFacilitiesData() {
let facilitiesData = FacilitiesCategoryLibrary.fetchFacilitiesCategory()
// distinguishing between indoor and outdoor data
for facData in facilitiesData {
if facData.type == "Indoor Facility" {
indoorFacilitiesCategoryData.append(facData)
} else {
outdoorFacilitiesCategoryData.append(facData)
}
}
}
}
extension FacilitiesVC : UICollectionViewDataSource {
// MARK: - UICollectionViewDataSource
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return indoorFacilitiesCategoryData.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: StoryBoard.indoorFacilitiesCategoryCellIdentifier, for: indexPath) as! IndoorFacilitiesCell
cell.indoorFacilitiesCategoryData = indoorFacilitiesCategoryData[indexPath.item]
cell.designableBackgroundView.backgroundColor = RandomFlatColor()
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = 1
return cell
}
}
and here is the code of CollectionViewCell
import UIKit
import ChameleonFramework
class IndoorFacilitiesCell: UICollectionViewCell {
#IBOutlet weak var designableBackgroundView: DesignableUIView!
#IBOutlet weak var iconImageView: UIImageView!
#IBOutlet weak var icontitleLabel: UILabel!
var indoorFacilitiesCategoryData : FacilitiesCategory? {
didSet {
updateUI()
}
}
}
extension IndoorFacilitiesCell {
func updateUI() {
guard let indoorData = indoorFacilitiesCategoryData else {return}
iconImageView.image = UIImage(named: indoorData.logo)
icontitleLabel.text = indoorData.categoryName
}
}
what went wrong in here? what should I do to fix that?