How to set a constraint using percentage? - ios

Question

Just a very direct question, but we had spent many hours trying to find a working solution but faild.
In Xcode, storyboard, how to set a constraint so one view can be located 30% of total window height from the top of the superview? And we need it to be that way for ALL supported iOS devices of all orientations.
Please see my illustration attached.

Answer 1

I demonstrate this below - you just have to change the value of multiplier.

Answer 2

Update
Sorry, I have misunderstood your problem.
You'll need to add the constraints from code like so (the xConstraint is totally arbitrary, but you must need to define x, y positions, width and height, for an unambiguous layout):
#IBOutlet weak var imageView: UIImageView!
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let yConstraint = NSLayoutConstraint(item: imageView, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: view.bounds.height / 3)
let xConstraint = NSLayoutConstraint(item: imageView, attribute: .Leading, relatedBy: .Equal, toItem: view, attribute: .Leading, multiplier: 1, constant: 30)
NSLayoutConstraint.activateConstraints([yConstraint, xConstraint])
}
This way, the equation will be:
imageView.top = 1 * view.top + (view.width / 3)
Original answer
Auto Layout uses the following equation for constraints:
aView.property = Multiplier * bView.property + Constant
Based on this, you can simply add an equal width/height constraint, then add a multiplier:
So the equation will be:
view.height = 0.3 * superView.height + 0

Answer 3

You should calculate it.
1. Calculate how many percents are from top to center ImageView
2. Set Vertical center to ImageView
3. Configure multiplier in Vertical center constraint and set multiplier from 1
For example: multiplier 0.5 will be 25% from top to center ImageView. So your multiplier will be ~0.6
By the way, there is another way how to do it:
1. Create transparent view from top to your imageView
2. Set height equal to your subview
3. Set multiplier to 0.3 to this height constraint
4. Set bottom space from your imageView to this transparent view equal to zero

Answer 4

In the Equal Heights Constraint properties pane, you set the multiplier to "1:3" (i.e. 30% in division notation).

Answer 5

To avoid having to recalculate a constant each time after layoutSubviews, use UILayoutGuide.
Create a layout guide equal to 30% of the view's height, and then use that to align the top of the child view. No manual layout calculations necessary.
// Create a layout guide aligned with the top edge of the parent, with a height equal to 30% of the parent
let verticalGuide = UILayoutGuide()
parent.addLayoutGuide(verticalGuide)
verticalGuide.topAnchor.constraint(equalTo: parent.topAnchor).isActive = true
verticalGuide.heightAnchor.constraint(equalTo: parent.heightAnchor, multiplier: 0.3).isActive = true
// Align the top of the child to the bottom of the guide
child.topAnchor.constraint(equalTo: verticalGuide.bottomAnchor).isActive = true
UILayoutGuide can be laid out with constraints like any view, but doesn't appear in the view hierarchy.

Answer 6

Here is Simple Solution if you want to give Constraint according to Screen.
To Set Height Percentage
To Set Width Percentage
import UIKit
extension NSLayoutConstraint{
/// Set Constant as per screen Width Percentage
#IBInspectable var widthPercentage:CGFloat {
set {
self.constant = (UIScreen.main.bounds.size.width * newValue)/100
}
get {
return self.constant
}
}
/// Set Constant as per screen Height Percentage
#IBInspectable var heightPercentage:CGFloat {
set {
self.constant = (UIScreen.main.bounds.size.height * newValue)/100
}
get {
return self.constant
}
}
}