UIKit UIImageView with Offset UIImage

Question

I'm currently adding a UIImageView to a Table Cell, and when the cell is populated with data, I'm adding a UIImage (if it exists) to the UIImageView, however, the UIImage is offset like this:

I'm using AutoLayout to setup the Cell, as follows:

import Foundation
import UIKit

class CatalogItemTableCell: UITableViewCell {
    
    let itemImageView: UIImageView = {
        let imgView = UIImageView()
        
        imgView.translatesAutoresizingMaskIntoConstraints = false
        imgView.contentMode = .scaleAspectFit
        imgView.clipsToBounds = true
        imgView.layer.borderColor = UIColor(named: "FontColor")?.cgColor
        imgView.layer.borderWidth = 1.0
        imgView.layer.cornerRadius = 4.0
        imgView.layer.masksToBounds = true
        
        return imgView
    }()
    
    let nameLabel: UILabel = {
        let label = UILabel()
        label.lineBreakMode = .byTruncatingTail
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.boldSystemFont(ofSize: 18)
        return label
    }()
    
    let skuLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.systemFont(ofSize: 10)
        return label
    }()
    
    let qtyOnHand: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let priceLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let containerView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier);
        
        containerView.addSubview(itemImageView)
        containerView.addSubview(nameLabel)
        containerView.addSubview(skuLabel)
        containerView.addSubview(descriptionLabel)
        containerView.addSubview(qtyOnHand)
        containerView.addSubview(priceLabel)
        self.contentView.addSubview(containerView)
        
        NSLayoutConstraint.activate(
        [
            containerView.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 10.0),
            containerView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 10.0),
            containerView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -10.0),
            containerView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -10.0),
        ]);
        
        NSLayoutConstraint.activate(
        [
            itemImageView.topAnchor.constraint(equalTo: containerView.topAnchor),
            itemImageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            itemImageView.trailingAnchor.constraint(equalTo: nameLabel.leadingAnchor, constant: -10),
            itemImageView.widthAnchor.constraint(equalToConstant: 80),
            itemImageView.heightAnchor.constraint(equalToConstant: 80)
        ]);
        
        NSLayoutConstraint.activate([
            nameLabel.topAnchor.constraint(equalTo: containerView.topAnchor),
            nameLabel.leadingAnchor.constraint(equalTo: itemImageView.trailingAnchor, constant: 10.0),
            nameLabel.bottomAnchor.constraint(equalTo: skuLabel.topAnchor, constant: -10)
        ]);
        
        NSLayoutConstraint.activate([
            skuLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 10.0),
            skuLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),
            skuLabel.bottomAnchor.constraint(equalTo: descriptionLabel.topAnchor, constant: -10)
        ]);
        
        NSLayoutConstraint.activate([
            descriptionLabel.topAnchor.constraint(equalTo: skuLabel.bottomAnchor, constant: -10.0),
            descriptionLabel.leadingAnchor.constraint(equalTo: skuLabel.leadingAnchor),
            descriptionLabel.bottomAnchor.constraint(equalTo: qtyOnHand.topAnchor, constant: -10)
        ]);
        
        
        NSLayoutConstraint.activate([
            qtyOnHand.topAnchor.constraint(equalTo: descriptionLabel.bottomAnchor, constant: 10.0),
            qtyOnHand.leadingAnchor.constraint(equalTo: descriptionLabel.leadingAnchor),
            qtyOnHand.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
        ]);
        
        NSLayoutConstraint.activate([
            priceLabel.topAnchor.constraint(equalTo: containerView.topAnchor),
            priceLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
        ]);
        
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder);
    }
    
}

I'm also setting up the image using Alamoimagefire to scale it correctly, as I couldn't get scaling to work right by just adding the image to the UIImageView

let image = UIImage(contentsOfFile: fileUrl.path)
                    
let size = CGSize(width: 80, height: 80)
                    
let scaledImage = image!.af.imageAspectScaled(toFit: size)
                    
cell.imageView?.image = scaledImage

Any help appreciated to help me understand what would cause this.

DonMag DonMag · Accepted Answer · 2021-06-09T13:13:45

First, you shouldn't need to scale the image - using .contentMode = .scaleAspectFit on your image view should work properly.

The problem you are hitting, though, is you're setting the image on the wrong image view...

cell.imageView?.image = scaledImage

should be:

cell.itemImageView.image = scaledImage

but, again, no need to scale it first.

UIKit UIImageView with Offset UIImage

1 Answers