如何使用自动布局将多个视图与背景图像元素对齐？

Question

Here is the scenario: I have a background image with 3 circles and 3 horizontal lines, above the circles I have 3 views in the shape of rectangles. I want the rectangles to be directly above the circles and roughly as wide as the circles as well as the same height across all iPhones and iPads (from the first horizontal bar to the top margin). I built a sample in Sketch as a visual aid. Any help would be much appreciated! visual aid

The specific issue I'm having with the constraints I've tried is that the top stays pinned to the top margin but the bottom constraint doesn't really scale with the different iPhone sizes. Here is another screen capture. bottom height issue The bottom constraint I'm using is a Vertical Space Constraint with the first item as the bottom of the view with an equal relation to the bottom of the rectangle and it's an equal 283 points. I understand why it won't work, 283 from the bottom just doesn't end up in the same spot on all 3 devices, but I don't understand how to fix it.

Answer 1

So basically when you change the height of the rect you need to consider the height of the whole view. You would want to have a design height of screen, for instance, I choose 600 here. So I'd use the following function to calculate the actual height I want for the current device.

    func actualHeight(height: CGFloat) -> CGFloat {
        return height / 600 * view.bounds.height
    }

So when you want to set the height of the rect to 100 out of 600, I'd use actualHeight(100) instead.

Remember if you've already set the height constraint in the interface builder, it wouldn't work by setting the height of the view directly. One way to do is by cooperating with the constaints. You'd have to create an outlet for the height constraints and change the constant property of the constraint.

I got this image online, but it shows how to create an outlet for the constraint.

So you'd have a IBOutlet :

@IBOutlet weak var heightConstaint: NSLayoutConstraint!

And you'll set the height like this:

heightConstaint.constant = actualHeight(400)

---

If you don't like the height constaint method, you can use transform:

// Scale the height by 1.1.
rect.transform = CGAffineTransformMakeScale(1.0, 1.1)

As long as your height constaint is set correctly in the IB, this will scale it on whatever devices.