title: UICollectionView displays wrong number of items when current cell is not visible?
body: <p>I have an issue regarding the items displayed in my <code>UICollectionView</code> that I am not sure how to explain, but I will as detailed as I can in the hopes that someone can help with this.</p>
  
  <p>Currently, I have a <code>UITableViewCell</code> that contains a <code>UICollectionView</code>. Each <code>UICollectionCell</code> contains an image, retrieved from it's <code>indexPath</code>.</p>
  
  <p>The following sample code is my implementation of the <code>UITableViewCell</code> containing the <code>UICollectionView</code>:</p>
  
  <pre><code>extension MainViewController: UITableViewDelegate
  {
      func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&gt; UITableViewCell
      {
          var cell: UITableViewCell = UITableViewCell()
  
          ....
  
          if indexPath.section == 4
          {
              if let customCell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as? CustomTableViewCell
              {
                  if images_ARRAY.isEmpty == false
                  {
                      customCell.images_ARRAY = images_ARRAY
                      customCell.awakeFromNib()
                  }
  
                  return imagesCell
              }
          }
  
          return cell
      }
  }
  
  class CustomTableViewCell: UITableViewCell
  {
      @IBOutlet var imagesCollectionView: UICollectionView!
  
      var images_ARRAY = [UIImage]()
  
      var images = [INSPhotoViewable]()
  
      override func awakeFromNib()
      {
          super.awakeFromNib()
          // Initialization code
  
          print("awakeFromNib")
  
          // Through through each image of the record
          for image in images_ARRAY
          {
              images.append(INSPhoto(image: image, thumbnailImage: SomeClass.resized(originalImage: image, withPercentage: 0.3) ) )
          }
  
          imagesCollectionView.dataSource = self
          imagesCollectionView.delegate = self
      }
  
      ....
  
      override func prepareForReuse()
      {
          super.prepareForReuse()
  
          print("prepareForReuse")
  
          images.removeAll()
      }
  }
  
  extension CustomTableViewCell: UICollectionViewDataSource
  {
      func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int
      {
          return images.count
      }
  
      func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell
      {
          let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! ExampleCollectionViewCell
  
          print("indexPath.row = \(indexPath.item)")
  
          cell.populateWithPhoto(images[indexPath.item])
  
          return cell
      }
  }
  </code></pre>
  
  <p>I am using a <code>UIImagePickerController</code> in my <code>MainViewController</code> to select an image, set it in the <code>UICollectionViewCell</code>, and display it in the <code>UITableViewCell</code> like so:</p>
  
  <pre><code>extension MainViewController: UIImagePickerControllerDelegate
  {
      func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any])
      {
          if let selectedImage = info[UIImagePickerControllerOriginalImage] as? UIImage
          {
              // Store and display the image
              if let cell = mainVCTableView.cellForRow(at: IndexPath(row: 0, section: 4) ) as? CustomTableViewCell
              {
                  cell.images_ARRAY.append(selectedImage)
  
                  // Remove any existing images before adding all images again
                  cell.images.removeAll()
  
                  cell.awakeFromNib()
  
                  cell.imagesCollectionView.reloadData()
  
                  images_ARRAY = cell.images_ARRAY
  
                  if ( (images_ARRAY.count - 1) % 4) == 0 &amp;&amp;
                          images_ARRAY.count != 1
                  {
                      self.mainVCTableView.reloadRows(at: [ IndexPath(row: 0, section: 4) ], with: UITableViewRowAnimation.none)
                  }
              }
          }
  
          picker.dismiss(animated: true, completion: nil)
      }
  
      func imagePickerControllerDidCancel(_ picker: UIImagePickerController)
      {
          picker.dismiss(animated: true, completion: nil)
      }
  }
  </code></pre>
  
  <p>Every time the user selects an image, all the images in <code>images</code> array is deleted and re-added in from <code>images_ARRAY</code> before the <code>imagesCollectionView</code> is reloaded. When 4 images are added, the <code>UITableViewCell</code> looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/dfH3R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dfH3R.png" alt="enter image description here"></a></p>
  
  <p>When the 5th image is added, the <code>UITableViewCell</code> dynamically changes its height, hence the <code>self.mainVCTableView.reloadRows</code> code, and the row is reloaded whenever the 9th, 13th, 17th, etc.. image is added to expand the height of the <code>UITableViewCell</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/h5loQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h5loQ.png" alt="enter image description here"></a></p>
  
  <p>The <strong>problem</strong> that I am having is when the 9th image is added, the cell is not visible on screen so when <code>self.mainVCTableView.reloadRows</code> is called, which ultimately calls <code>cellForItemAt</code> in my <code>CustomTableViewCell</code>, the <code>indexPath.item</code> is <strong>initially</strong> being reported as <strong>4</strong>, then starts at 0, 1, 2, etc..</p>
  
  <p>The following 2 screenshots is when the <strong>8th</strong> (left) and <strong>9th</strong> (right) image is added to the <code>UICollectionView</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/YNSYG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YNSYG.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/8Oyjl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Oyjl.png" alt="enter image description here"></a></p>
  
  <p>As you can see on the right, the 6th, 7th, and 8th image has disappeared and I have an empty row space where the 9th image should be.</p>
  
  <p>A scroll down the table view shows:</p>
  
  <p><a href="https://i.stack.imgur.com/K5cdI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K5cdI.png" alt="enter image description here"></a></p>
  
  <p>A print out of the <code>indexPath.item</code> when the <strong>9th</strong> image was added shows the following:</p>
  
  <pre><code>indexPath.row = 4
  indexPath.row = 0
  indexPath.row = 1
  indexPath.row = 2
  indexPath.row = 3
  indexPath.row = 4
  indexPath.row = 5
  indexPath.row = 6
  indexPath.row = 7
  </code></pre>
  
  <p>However, once I add the <strong>10th</strong> image, when the <code>imagesCollectionView</code> is reloaded, all the images re-appear again: </p>
  
  <p><a href="https://i.stack.imgur.com/LxW40.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LxW40.png" alt="enter image description here"></a></p>
  
  <p>A print out after the <strong>10th</strong> image has been added shows:</p>
  
  <pre><code>indexPath.row = 0
  indexPath.row = 1
  indexPath.row = 2
  indexPath.row = 3
  indexPath.row = 4
  indexPath.row = 5
  indexPath.row = 6
  indexPath.row = 7
  indexPath.row = 8
  indexPath.row = 9
  </code></pre>
  
  <p>I don't quite understand what is happening? I apologize for the long post but wanted to be specific with my problem and show illustrations so someone can have a better understanding to help me.</p>
  
  <p>Thank you!</p>