CODEWITHSUNDEEP
iosiphoneswiftinterface-builderuistoryboard
mythicalcoder
mythicalcoder

Reputation: 3291

ios: UIImageView with Aspect Fill not fitting the constraint

I have a following design. Using Storyboard I have tried multiple methods, but all efforts in vain.

enter image description here

1 - Main Default View of View Controller 2 - View to contain Image view and 2 equal widths buttons 3 - Image view with Aspect Fill (Need to take up as much space based on iPhone size)

Everything I got right except 1 constraint. Constraint between the ImageView and View containing the 2 buttons. (Using Stack view for buttons)

In certain screens sizes, image view with Aspect fill overlaps the stackview. Aspect Fit leaves lot of white space.

Image View needs to scale for all iPhones based on size ! (That seems to be solved by Aspect Fill, not aspect fit) How to solve this problem of keeping Image + 2 buttons vertically centered (Rectangle 2 to be vertically and horizontally centered) while ImageView scales ?

Edit: I have tried "Clip to Bound" as well, but it clips the image on the sides. I would like to know the full setup, just what should be done with each of views or how each view should be organized to get the effect ?

Upvotes: 3

Views: 5122

Answers (1)

André Slotta
André Slotta

Reputation: 14030

maybe your constraints are set up correctly. try to set the "Clip To Bounds" flag for the imageview.

enter image description here

except of that you could add an aspect ratio constraint to your imageview that matches the aspect ratio of the image it contains.

UPDATE

this is how you would set up the constraints programmatically (in viewDidLoad for example):

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

and this is the result:

enter image description here

Upvotes: 7

Related Questions