swift 设置图像时,UIImageview未缩放到其帧

nhhxz33t  于 2023-09-30  发布在  Swift
关注(0)|答案(1)|浏览(115)

这里我附上了我工作的截图。我面临一个问题,图像视图没有缩放到帧。我已经在自定义视图中创建了一个自定义视图,我已经添加了ImageView并对其父视图(这里是ContainerView)设置了约束
图像内容模式为scaleAspectFit

let imageView = makeImageView()
addSubview(imageView)

imageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
imageView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
imageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

当我将自定义视图初始化到视图控制器中时,会显示上面的截图。在viewcontroller中,我只是将图像添加到stackview中。
你能告诉我应该添加什么吗?

yizd12fk

yizd12fk1#

您需要将图像视图的内容模式设置为.contentMode = .scaleToFill
然后,当您设置其.image时,使用以下内容设置比例高度锚点:

multiplier: img.size.height / img.size.width)

下面是一个自定义类的例子-为了清晰起见,我在图像视图的4个边上插入了8个点:

class ProportionalImageView: UIView {
    
    public var image: UIImage? {
        didSet {
            imgView.image = image
            if let img = image {
                proConstraint.isActive = false
                proConstraint = imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
                proConstraint.isActive = true
            }
        }
    }
    
    private var proConstraint: NSLayoutConstraint!
    
    private let imgView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {

        imgView.contentMode = .scaleToFill
        imgView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(imgView)
    
        proConstraint = imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: 1.0)
        
        NSLayoutConstraint.activate([
            imgView.topAnchor.constraint(equalTo: topAnchor, constant: 8.0),
            imgView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
            imgView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
            imgView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),
            proConstraint,
        ])
        
        backgroundColor = .systemBlue
    }
    
}

以及一个视图控制器示例。垂直堆栈视图,包含自定义视图的“顶部标签”和“底部标签”。还加载3个图像-300 x300、300 x200和200 x300。点击任意位置可循环到下一个图像:

class ProImageTestVC: UIViewController {
    
    let proImageView = ProportionalImageView()
    
    var images: [UIImage] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ["i300x300", "i200x300", "i300x200"].forEach { sName in
            guard let img = UIImage(named: sName) else {
                fatalError("Could not load image: \(sName)")
            }
            images.append(img)
        }
        
        let stackView = UIStackView()
        stackView.axis = .vertical
    
        let v1 = UILabel()
        v1.text = "Top Label"
        v1.textAlignment = .center
        v1.backgroundColor = .green
        
        let v2 = UILabel()
        v2.text = "Bottom Label"
        v2.textAlignment = .center
        v2.backgroundColor = .green
        
        stackView.addArrangedSubview(v1)
        stackView.addArrangedSubview(proImageView)
        stackView.addArrangedSubview(v2)

        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            stackView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 60.0),
            stackView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -60.0),
        ])
        
        nextImage()
    }

    func nextImage() {
        let img = images.removeFirst()
        images.append(img)
        proImageView.image = img
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        nextImage()
    }
    
}

使用这三个图像:

运行时看起来是这样的:

相关问题