带有偏移 UIImage 的 UIKit UIImageView

Question

我目前正在将 UIImageView 添加到 Table 单元格，当单元格中填充了数据时，我将 UIImage（如果存在）添加到 UIImageView，但是，UIImage 是像这样偏移：

我正在使用 AutoLayout 来设置单元格，如下所示：

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);
    }
    
}

我还使用 Alamoimagefire 设置图像以正确缩放它，因为我无法通过将图像添加到 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

任何帮助我理解会导致这种情况的帮助。

Answer 1

首先，您不需要缩放图像 - 在图像视图上使用 .contentMode = .scaleAspectFit 应该可以正常工作。

不过，您遇到的问题是您将图像设置在错误的图像视图上...

cell.imageView?.image = scaledImage

应该是：

cell.itemImageView.image = scaledImage

但是，同样，不需要先缩放它。

带有偏移 UIImage 的 UIKit UIImageView

UIKit UIImageView with Offset UIImage

uikit

ios

swift