CODEWITHSUNDEEP
iosswiftuitableviewconstraints
Anubis
Anubis

Reputation: 1222

Constraints of views in custom UITableViewCell getting reset on cell reuse

I'm running into issues with displaying an ImageView in a custom table cell. I'm trying to do the following: In the cellForRowAtIndexPath I check wether the user ID matches that of the id inside a reservation object. If so, an ImageView (hidden by default) is to be made visible on the right side of the cell. This all works fine until iOS starts reusing the cells. On cells that are being reused, the ImageView always ends up on the left side of the cell, instead of the right side (its normal position). I'm trying to find out why this is happening but I'm not having much luck. I would appreciate some help with this.

EDIT: It seems I am suffering from the same issue as this user: Custom cell imageView shifts to left side when editing tableView

EDIT2: After some more debugging, I found out that whenever the cells get reused, its constraints are changed. When the cell is first created calling constraintsAffectingLayoutForAxis(LayoutConstraintsAxis.Horizontal)
and
constraintsAffectingLayoutForAxis(LayoutConstraintsAxis.Vertical)
shows two empty arrays. These cells are made via the Storyboard so I'm guessing I can't read them using these methods(?)
After the cells gets reused and I call the methods above again it suddenly has a bunch of constraints. These constraints are all wrong however, which I assume are the cause of the imageview getting misplaced.

Here's my log after the cell gets created:

Timelabel holds Optional(2) constraints
Horizontal constraints are: Optional([])
Vertical constraints are: Optional([])
ImageView holds Optional(4) constraints
Horizontal constraints are: Optional([])
Vertical constraints are: Optional([])

And here's what gets printed after I scroll the cell out of view and back into view, causing it to get reused:

Timelabel holds Optional(2) constraints
Horizontal constraints are: Optional([<NSLayoutConstraint:0x15d02a60      H:|-(38)-[UILabel:0x15f68500]   (Names: '|':UITableViewCellContentView:0x15f7de60 )>, <NSContentSizeLayoutConstraint:0x15f4e3f0 H:[UILabel:0x15f68500(103)] Hug:251 CompressionResistance:750>])
Vertical constraints are: Optional([<NSLayoutConstraint:0x15f69600 V:|-(2)-[UILabel:0x15f68500]   (Names: '|':UITableViewCellContentView:0x15f7de60 )>, <NSContentSizeLayoutConstraint:0x15f76d10 V:[UILabel:0x15f68500(21)] Hug:251 CompressionResistance:750>])
ImageView holds Optional(4) constraints
Horizontal constraints are: Optional([<NSLayoutConstraint:0x15d18390 H:[UIImageView:0x15f64260(47)]>, <NSLayoutConstraint:0x15f7c900 H:[UIImageView:0x15f64260]-(29)-|   (Names: '|':UITableViewCellContentView:0x15f7de60 )>, <NSAutoresizingMaskLayoutConstraint:0x15f77b90 h=--& v=--& H:[UITableViewCellContentView:0x15f7de60(280)]>])
Vertical constraints are: Optional([<NSLayoutConstraint:0x15db4570 V:|-(0)-[UIImageView:0x15f64260]   (Names: '|':UITableViewCellContentView:0x15f7de60 )>, <NSLayoutConstraint:0x15f736e0 V:[UIImageView:0x15f64260(48)]>])

My cellForRowAtIndexPath method:

func tableView(tableview: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
    let cellIdentifier = "ReservationCell"

    let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? ReservationCell
    let res: Reservation = reservationArray[indexPath.row]
    let startTime = DateUtils.parseUTCDateTimeStringToTimeString(res.start)
    let endTime = DateUtils.parseUTCDateTimeStringToTimeString(res.end)
    cell!.delegate = self
    let storedUserID = ELabAccount.getUserID()
    let reservationUserID = String(res.reservedForId)
    //Check if reservation belongs to currently logged in user
    if(storedUserID == reservationUserID){
        let buttons = NSMutableArray()
        buttons.sw_addUtilityButtonWithColor(UIColor.lightGrayColor(), title: LocalizedString("edit"))
        buttons.sw_addUtilityButtonWithColor(UIColor.redColor(), title: LocalizedString("delete"))
        cell!.rightUtilityButtons = buttons as [AnyObject]
        cell!.imageView!.hidden = false
        cell!.backgroundColor = UIColor(red:0.42, green:0.64, blue:0.76, alpha:1.0)
    }else{
        cell!.backgroundColor = UIColor(red:1.00, green:0.55, blue:0.25, alpha:1.0)
    }
    cell!.timeLabel.text = startTime + " - " + endTime
    cell!.nameLabel.text = res.reservedForName

    return cell!
}

Upvotes: 2

Views: 1958

Answers (2)

Anubis
Anubis

Reputation: 1222

Well, I managed to find a workaround. What I ended up doing was setting the translateAutoresizingMaskIntoConstraints flag to false on the content view of my custom table cell. This caused the imageView to no longer move around after cell reuse but it did move every subview down so that they were only half visible. Adding some additional constraints using the Storyboard fixed this.

Upvotes: 2

Micha&#235;l Azevedo
Micha&#235;l Azevedo

Reputation: 3894

always ends up on the left side is not very clear, but i guess you face an occurring issue : when you start reusing cell, the image appears where it shouldn't theoretically appears.

It's because the imageview is displayed when the ID matchs, but it's not hidden when the ID doesn't matchs. Thus, by reusing cell where previous ID matched succesfully, the image will be displayed.

Just hide the image view if the match fails : 

if(storedUserID == reservationUserID){
       ....
} else{
    // hides the image view
    cell!.imageView!.hidden = true
    cell!.backgroundColor = UIColor(red:1.00, green:0.55, blue:0.25, alpha:1.0)
}

Upvotes: 0

Related Questions