CODEWITHSUNDEEP
iosautolayout
shawhu
shawhu

Reputation: 1237

How to set a constraint using percentage?

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.enter image description here

Upvotes: 24

Views: 19739

Answers (6)

kishan sutariya
kishan sutariya

Reputation: 1

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

Upvotes: 0

robmathers
robmathers

Reputation: 3668

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.

Upvotes: 2

L.Xing
L.Xing

Reputation: 226

I demonstrate this below - you just have to change the value of multiplier. enter image description hereenter image description here

enter image description here

Upvotes: 19

József Vesza
József Vesza

Reputation: 4795

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:

enter image description here

So the equation will be:

view.height = 0.3 * superView.height + 0

Upvotes: 12

ChikabuZ
ChikabuZ

Reputation: 10195

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

Upvotes: 2

Nicolas Buquet
Nicolas Buquet

Reputation: 3955

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

Upvotes: 0

Related Questions