How to make imageviews that proportionally grow with auto layout in iOS?

Question

I am trying to design the interface below in Interface Builder, using the latest XCode and targeting the latest iOS. I am using "inferred" simulation of the device.

So this is what I want, I have three image views that each has a element that is placed on screen like the image below shows. I have been struggeling with auto layout for two days now trying to acheive that the image views grows proportionally when the device changes - from small screens to iPad sized screens. I am not able to get it working. How can I do this? Do I need to wrap it in some stacked view, normal view...what kind of constraints do I need? The distance between the app title and the button should remain like it is on the image causing just the image views to grow proportionally.

AND

If this is possible, should I use one set of images for iPad and one set for iPhone? Or should I just have one image which is very large and have the image view size it based on the image view size?

Answer 1

You can use UIStackView with auto layout.

This way your imageViews will grow/shrink based on the screen size. And you can add more imageViews to the stack more easily.

Here is the code:

class SomeViewController: UIViewController {


// MARK: Properties

let stack = UIStackView()
let imageView1 = UIImageView()
let imageView2 = UIImageView()
let imageView3 = UIImageView()
let button = UIButton()





override func viewDidLoad() {
    super.viewDidLoad()

    stack.axis = .Horizontal // can omit, default is .Horizontal
    stack.alignment = .Center
    stack.distribution = .Fill // can omit, default is .Fill
    stack.spacing = 20 // spacing between image views
    view.addSubview(stack)

    imageView1.backgroundColor = UIColor.greenColor().colorWithAlphaComponent(0.36)
    imageView2.backgroundColor = UIColor.redColor().colorWithAlphaComponent(0.5)
    imageView3.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.1)

    button.setTitle("Boom", forState: .Normal)
    button.backgroundColor = UIColor.blackColor()
    view.addSubview(button)

    stack.addArrangedSubview(imageView1)
    stack.addArrangedSubview(imageView2)
    stack.addArrangedSubview(imageView3)


    // Constraints for stack

    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20).active = true
    stack.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true
    stack.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true

    // Constraints for imageView1

    imageView1.translatesAutoresizingMaskIntoConstraints = false
    imageView1.widthAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 0.8).active = true // to make imageView1 smaller than the red one
    imageView1.heightAnchor.constraintEqualToAnchor(imageView1.widthAnchor, multiplier: 1.5).active = true

    // Constraints for imageView2

    imageView2.translatesAutoresizingMaskIntoConstraints = false
    imageView2.heightAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 1.5).active = true

    // Constraints for imageView3

    imageView3.translatesAutoresizingMaskIntoConstraints = false
    imageView3.widthAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 0.65).active = true  // to make imageView3 smaller than the red one
    imageView3.heightAnchor.constraintEqualToAnchor(imageView3.widthAnchor, multiplier: 1.5).active = true

    // Constraints for button

    button.translatesAutoresizingMaskIntoConstraints = false
    button.topAnchor.constraintEqualToAnchor(stack.bottomAnchor, constant: 50).active = true // spacing from the stack
    button.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true
    button.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true

}}

Answer 2

Adding to the first answer, your best bet is setting up aspect ratios in your storyboard. Ctrl+drag from your image view to the super view like you normally would for adding auto-layout constraints, and select equal widths and/or equal heights (whichever makes more sense for your project).

At this point, your image will want to be the same size as the entire view. You probably don't want that. In the right toolbar, in the size inspector, find that autolayout constraint. You can modify the multiplier to size the image proportionally. If you set it to 0.2, the image's height and/or width will be 20% of the superview's height and/or width. This tutorial (Parts 1 & 2) will help you out.

For your second question, if you add images into the default Assets.xcassets folder, you can add different sized images for different devices. Unfortunately I do not know where a tutorial for this is :(

Answer 3

You can set Aspect Ratio constraint on any view. So you can put your width calculation based on the view width and then use aspect ratio to make them fit on height.