ios: 带有 Aspect Fill 的 UIImageView 不符合约束条件

Question

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

1 - 视图控制器的主要默认视图 2 - 包含图像视图和 2 个等宽按钮的视图 3 - 具有纵横比填充的图像视图（需要根据 iPhone 大小占用尽可能多的 space）

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

在某些屏幕尺寸下，纵横比填充的图像视图与堆栈视图重叠。 Aspect Fit 留下很多白色 space.

Image View 需要根据大小缩放所有 iPhones！（那个好像是Aspect Fill解决的，不是aspect fit）如何解决ImageView缩放时保持Image + 2个按钮垂直居中（Rectangle 2垂直和水平居中）的问题？

编辑： 我也试过 "Clip to Bound"，但它会在侧面剪裁图像。我想知道完整的设置，每个视图应该做什么，或者每个视图应该如何组织才能达到效果？

Answer 1

也许您的约束设置正确。尝试为图像视图设置 "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))

这是结果：

ios: 带有 Aspect Fill 的 UIImageView 不符合约束条件

ios: UIImageView with Aspect Fill not fitting the constraint

iphone

interface-builder

ios

uistoryboard

swift