Search code examples
xcodeswiftuitableviewuiimageviewnslayoutconstraint

UIImageView in table cell is not staying within frame original frame?


So this is what is happening:

enter image description here

I've added a red background color to the image view so you can see how much it's going over.

I've tried tableView(:willDisplayHeaderView:), I've tried checking off Subviews, I've tried AspectFit, AspectFill, & ScaletoFill But the UIImageView's keep going beyond their original boundaries and I don't understand why.

Here's some code from my UITableViewController:

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("scheduleCell", forIndexPath: indexPath) as! ScheduleTableViewCell
    let eventList = schedule?.schedule[dayOfWeek[indexPath.section]]!
    let event = eventList![indexPath.row]
    cell.labelEvent.text = event.act.rawValue
    cell.labelTime.text = "\(event.getTime(event.start)) - \(event.getTime(event.end))"

    return cell
}

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    let tableViewCell = cell as! ScheduleTableViewCell
    let eventList = schedule?.schedule[dayOfWeek[indexPath.section]]!
    let event = eventList![indexPath.row]
    tableViewCell.imageView?.image = UIImage(named: "\(schedule!.potato.mode)-\(event.act.rawValue)")
    tableViewCell.imageView?.backgroundColor = UIColor.redColor()
    tableViewCell.imageView?.contentMode = .ScaleAspectFit

}

And this is my custom cell class:

class ScheduleTableViewCell: UITableViewCell {

@IBOutlet weak var imageEvent: UIImageView!
@IBOutlet weak var labelEvent: UILabel!
@IBOutlet weak var labelTime: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

}

enter image description here


Solution

  • First, setting the imageView's clipsToBounds property to true will prevent the image from spilling over the bounds of the imageView.

    Second, the image is clearly bigger than the imageView, so I think the imageView is not spilling over, the image inside it is spilling over. So, you will either need to resize the image or use Scale*Fill modes to show the full image or crop it as appropriate.

    HTH.