0

My collection view cells are being modified when scrolling all the way to the bottom and then back up.

In my viewDidLoad I have a Parse query which fetches all the values from the database and then calls reloadData from the main thread.

On the initial load the viewable cells are correctly displayed.

But when I scroll down the cells that were not visible are loaded and 1/3 of them are displayed incorrectly.

Then when I scroll back up to the initial viewable cells the first one is not displayed properly.

By not displayed properly I mean in my database is a field for alignment. This can hold center, left, or right Strings.

This value is how my image and buttons should be aligned in the cell.

Here is my cellForRow function.

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
    let cell: FeedThumbnail = collectionView.dequeueReusableCellWithReuseIdentifier("feed_cell", forIndexPath: indexPath) as! FeedThumbnail

    //handle cell alignment
    if(align[indexPath.row] == "left"){
        //leave alignment as is for buttons
        if(cell.picture.frame.origin.x == 0){
            cell.picture.frame.offsetInPlace(dx: -75, dy: 0)
        }
    }

    else if(align[indexPath.row] == "center"){
        cell.holder_view.frame.offsetInPlace(dx: 105 - cell.holder_view.frame.origin.x, dy: 0)
        //leave image as is
    }

    else if(align[indexPath.row] == "right"){
        cell.holder_view.frame.offsetInPlace(dx: 220 - cell.holder_view.frame.origin.x, dy: 0)
        cell.picture.frame.offsetInPlace(dx: 100 - cell.picture.frame.origin.x, dy: 0)
    }

    return cell
}

Here is the class for my collection view cell

 import UIKit

class FeedThumbnail: UICollectionViewCell {

 @IBOutlet weak var picture: UIImageView!
 @IBOutlet weak var comment_btn: UIButton!
 @IBOutlet weak var heart_btn: UIButton!
 @IBOutlet weak var rescip_btn: UIButton!
 @IBOutlet weak var og_btn: UIButton!
 @IBOutlet weak var name_lbl: UIButton!
 @IBOutlet weak var holder_view: UIView!
}
9
  • Can you post your FeedThumbnail class?
    – RPK
    Aug 12, 2016 at 2:09
  • The buttons are all inside of the holder_view
    – Basic
    Aug 12, 2016 at 2:11
  • My guess is that your cell reuse is not working properly. Try overriding prepareForReuse in your FeedThumbnail class and reset all of your frames back to default.
    – RPK
    Aug 12, 2016 at 2:15
  • What exactly do you mean by reset all frames back to default ?
    – Basic
    Aug 12, 2016 at 2:21
  • Basically set them back to what they were when the cell first loads before you modify the frames. Since the cells get reused randomly, a cell that was center may be reused as a cell that is right. When it does this, it's frame is in the center position so your calculations may be off if you are expecting it to be in a different position.
    – RPK
    Aug 12, 2016 at 2:29

2 Answers 2

1

Like Lumialxk and RPK said. I needed to refresh the cell origin.x before modifying it.

I guess I didn't understand that cells would be reused in the way that they were.

The solution was to override prepareForReuse and set the frame.origin.x back to the original value before modifying it.

import UIKit

class FeedThumbnail: UICollectionViewCell {

@IBOutlet weak var picture: UIImageView!
@IBOutlet weak var comment_btn: UIButton!
@IBOutlet weak var heart_btn: UIButton!
@IBOutlet weak var rescip_btn: UIButton!
@IBOutlet weak var og_btn: UIButton!
@IBOutlet weak var name_lbl: UIButton!
@IBOutlet weak var holder_view: UIView!


override func prepareForReuse() {
    picture.frame.origin.x = 0
    holder_view.frame.origin.x = 0
    super.prepareForReuse()
}

}

0

You got a condition in cellFor..., like this:

if(cell.picture.frame.origin.x == 0){...

If a cell was reused, it's "left" but not satisfied your condition so it'll keep its looks that was the same as that before reused. You should do something with this. Here is sample code:

if(cell.picture.frame.origin.x == 0){
    ...
} else {
    // make it a left cell
}
2
  • I'm not exactly following :/. So basically I should switch my code around to do the adjustment in the else statement instead of the if statement? Wouldn't that modify the content alignment every time the cell comes into view?
    – Basic
    Aug 12, 2016 at 2:25
  • @TomGreco Sorry for my bad expression. When you got a reused cell, it maybe left,right or center. You should refresh it otherwise you'll get a cell with original looks. Do you understand?
    – Lumialxk
    Aug 12, 2016 at 2:32

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.