ios: 具有 Aspect Fill 的 UIImageView 不适合约束

Question

我有以下设计。使用 Storyboard我尝试了多种方法，但所有的努力都是徒劳的。

1 - View Controller 的主要默认 View 2 - 包含 ImageView 和 2 个等宽按钮的 View 3 - 具有纵横比填充的 ImageView (需要根据 iPhone 尺寸占用尽可能多的空间)

除 1 个约束外，我做对的一切。包含 2 个按钮的 ImageView 和 View 之间的约束。 (对按钮使用堆栈 View )

在某些屏幕尺寸下，具有纵横比填充的 ImageView 与堆栈 View 重叠。Aspect Fit 留有大量空白。

Image View 需要根据尺寸为所有 iPhone 缩放! (那个好像是Aspect Fill解决的，不是aspect fit)如何解决 ImageView 缩放时保持 Image + 2 按钮垂直居中(Rectangle 2 垂直和水平居中)的问题？

编辑:我也试过“剪辑到边界”，但它会剪辑侧面的图像。我想知道完整的设置，每个 View 应该做什么，或者每个 View 应该如何组织以获得效果？

Answer 1

也许您的约束设置正确。尝试为 ImageView 设置“Clip To Bounds”标志。

除此之外，您可以向 imageview 添加一个纵横比约束，使其与它包含的图像的纵横比相匹配。

更新

这就是您如何以编程方式设置约束(例如在 viewDidLoad 中):

let containerView: UIView = {
    let cv = UIView()
    cv.translatesAutoresizingMaskIntoConstraints = false
    cv.backgroundColor = UIColor.lightGrayColor()
    return cv
}()
let imageView: UIImageView = {
    let iv = UIImageView()
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.backgroundColor = UIColor.darkGrayColor()
    iv.image = UIImage(named: "Forest") // YOUR IMAGE HERE
    return iv
}()
let leftButton: UIButton = {
    let lb = UIButton(type: .System)
    lb.translatesAutoresizingMaskIntoConstraints = false
    lb.setTitle("Left Button", forState: .Normal)
    return lb
}()
let rightButton: UIButton = {
    let rb = UIButton(type: .System)
    rb.translatesAutoresizingMaskIntoConstraints = false
    rb.setTitle("Right Button", forState: .Normal)
    return rb
}()
let stackView: UIStackView = {
   let sv = UIStackView()
    sv.translatesAutoresizingMaskIntoConstraints = false
    sv.axis = .Horizontal
    sv.distribution = .FillEqually
    return sv
}()

stackView.addArrangedSubview(leftButton)
stackView.addArrangedSubview(rightButton)

view.addSubview(containerView)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-[cv]-|", options: [], metrics: nil, views: ["cv": containerView]))
containerView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true

containerView.addSubview(imageView)
containerView.addSubview(stackView)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-[iv]-|", options: [], metrics: nil, views: ["iv": imageView]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[iv]-[sv]-|", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: ["iv": imageView, "sv": stackView]))

let image = imageView.image!
imageView.addConstraint(NSLayoutConstraint(item: imageView, attribute: .Width, relatedBy: .Equal, toItem: imageView, attribute: .Height, multiplier: image.size.width / image.size.height, constant: 0))

这是结果: