Multiple UICollectionView in a UITableView are intertwined in scrolling - ios

Question

I am totally new to iOS development, so my problem might be a noob question but I have no clue how to make my UICollectionViews scroll separately from each other. When I scroll my top UICollectionView, scroll down, my other UICollectionView is also scrolled without touching it.
The UICollectionView is configured to scroll horizontally. What I want to achieve is something like Netflix has done. With the user being able to scroll horizontally, while the list of items is shown horizontally. So far everything works, except the scrolling of one list makes the other scrolls too when they are redrawn (I guess, since I can only see it happen on lists that are not yet shown on the device.)
I hope I have described my problem properly, might you be missing some information to help me solve this I am of course happy to provide.
So my UITableController looks like this:
class MoviesViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var containerView: UIView!
#IBOutlet weak var tableView: UITableView!
let categories = ["In theaters", "Popular", "Upcoming", "Top rated"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
containerView.backgroundColor = UIColor.init(hex: "232637")
tableView.backgroundColor = UIColor.init(hex: "232637")
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSections(in tableView: UITableView) -> Int {
return categories.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
tableView.rowHeight = 332;
let cell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath) as! TableViewCell
return cell
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 42;
}
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return categories[section]
}
func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int){
view.tintColor = UIColor.init(hex: "232637")
let header = view as! UITableViewHeaderFooterView
header.textLabel?.textColor = UIColor.init(hex: "ff5959")
}
}
my UITableViewCell looks like this:
class TableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var collectionView: UICollectionView!
let imageNames = //Some filler data
let gameNames = //Some filler data
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
collectionView.backgroundColor = UIColor.init(hex: "232637")
collectionView.contentInset = UIEdgeInsets(top: 0,left: 0,bottom: 32,right: 0)
}
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 imageNames.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath) as! MovieCell
//cell.imageView.imageFromURL(urlString: imageNames[indexPath.row])
let image = UIImageView(image: UIImage(named: "img-logo"))
image.contentMode = .scaleAspectFit
image.frame = cell.containerView.bounds
image.layer.cornerRadius = 10;
image.clipsToBounds = true;
image.imageFromURL(urlString: imageNames[indexPath.row])
cell.containerView.addSubview(image)
cell.containerView.backgroundColor = UIColor.init(hex: "232637")
return cell
}
}
And my UICollectionViewCell looks like this:
class MovieCell: UICollectionViewCell {
#IBOutlet weak var containerView: UIView!
}
My Views look like this:

Answer 1

It sounds like you are failing to take into account the fact that cells (table view cells as well as collection view cells) are reused. Thus, if a table view contains a collection view and you scroll that collection view and then you scroll the table view, the table view cell is reused in a new row and the previously scrolled collection view inside it remains scrolled to where you put it previously. If that's not what you want, it's up to you to reset the scroll position of the collection view when you discover that the cell is being reused.
What gave me a clue that you might be not be understanding cell reuse is this line:
cell.containerView.addSubview(image)
That's wrong, because you're doing it even if the cell is reused, meaning that some of your cells will end up with dozens of image views overlaying one another, slowing things down and eventually perhaps causing you to run out of memory. That's not the problem you asked about, but it is a sign that you are not aware of the implications of cell reuse.