ios:带有Aspect的UIImageView填充不符合约束

Question

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

1 - View Controller 2的主要默认视图 - 包含图像视图和2个相等宽度按钮的视图3 - 使用Aspect Fill的图像视图(需要根据iPhone大小占用尽可能多的空间)

我得到的一切除了1个约束.包含2个按钮的ImageView和View之间的约束.(使用按钮的堆栈视图)

在某些屏幕尺寸中,带有Aspect填充的图像视图与堆栈视图重叠.Aspect Fit留下了大量的空白空间.

Image View需要根据尺寸扩展所有iPhone!(这似乎是通过Aspect Fill解决的,而不是方面适合)如何解决ImageView缩放时保持Image + 2按钮垂直居中(矩形2垂直和水平居中)的问题？

编辑:我也尝试过"Clip to Bound",但它会剪切两侧的图像.我想知道完整的设置,每个视图应该做什么或者如何组织每个视图以获得效果？

Answer 1

也许你的约束设置正确.尝试为imageview设置"Clip To Bounds"标志.

除此之外,您可以向imageview添加宽高比约束,该约束与其包含的图像的宽高比相匹配.

UPDATE

这是您以编程方式设置约束的方法(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))

这就是结果: