How to make distance between two views variable in autolayout

Question

I have a view which is 50 px down from the top layout.

I want the distance to vary based on the device size for example it should become 30 px in 4s while it should become 50px in iphone se while 60 in iPhone 6s.

I tried giving aspect ratio instead of vertical spacing but it not working.

If I just give vertical spacing its 50px in all devices.. Kindly help me out

score 3 · Answer 1 · edited May 23 '17 at 12:09

3

AutoLayout does allow you to have different constraints based on screen, but it's only limited to orientation changes, and iPad vs iPhones. You'll have to do it programmatically.

This link will show you how to get the device, and then once you have that, you need to make an @IBOutlet to your constraint, and then you can change its .constant property to either 40, 50, or 60

public extension UIDevice {

    var modelName: String {
        var systemInfo = utsname()
        uname(&systemInfo)
        let machineMirror = Mirror(reflecting: systemInfo.machine)
        let identifier = machineMirror.children.reduce("") { identifier, element in
            guard let value = element.value as? Int8, value != 0 else { return identifier }
            return identifier + String(UnicodeScalar(UInt8(value)))
        }

        switch identifier {
        case "iPhone4,1":                               return "iPhone 4s"
        case "iPhone8,1":                               return "iPhone 6s"
        case "iPhone8,4":                               return "iPhone SE"
        default:                                        return identifier
        }
    }

}

Now you can use it like so:

@IBOutlet weak var myConstraint: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()
    if UIDevice.current.modelName == "iPhone 4s" {
        myConstraint.constant = 30
    }
    else if UIDevice.current.modelName == "iPhone SE" {
        myConstraint.constant = 50
    }
    else if UIDevice.current.modelName == "iPhone 6s" {
        myConstraint.constant = 60
    }
}

edited May 23 '17 at 12:09

Community

1
1

answered Feb 25 '17 at 15:22

azizj

3,428
2
25
33

so you mean to say if its orientation change it will automatically change some distance but if its same orientation but different device then we have to manually hardcode the constraint ... in the case of orientation change we don't have to manually hardcode the distance.... pardon my ignorance... please explain me – Shiva Feb 27 '17 at 08:50
Don't sweat it dude. So for orientation changes, you can get the storyboard to do that for you, so then it's not programmatic. but if it's same orientation but different devices, you have to programmatically do it like i did above. – azizj Feb 27 '17 at 13:40
OK thanks bro ! one more doubt For example lets say I want a view's width to vary based on the device screen size ... is it possible to make it vary .. not necessarily it has to be of some fixed height ... i just want the views height to change according to screen size ... is possible I can set to min height , max height ... so it understands and changes accordingly – Shiva Feb 27 '17 at 14:58
1

Hi bro ,,, your contribution is appreciated..... once I get enough reputation I will your answer ... Thanks for the support – Shiva Feb 27 '17 at 21:10
:) Thanks man. You can use `self.view.bounds.size.width` and `self.view.bounds.size.height` to get the size of the screen, and then you can change the height/width of your custom view proportional those values. – azizj Feb 28 '17 at 19:44

hasan · Accepted Answer · 2017-02-27T09:10:05.747

1

@Aziz Javed propsed the correct solution depending on what you really want. If you want a specific constant values for each device the only way is to do it by code as Aziz Suggested.

The storyboard constrant does not have an aspect ratio property for (Top,Bottom,Left,Right,Leading,Trailing) constraints.

The work around solution in storyboard is to add a view on top of your view. Add a spacing constraints equal to zero to top and bottom to your view. On the added view that will play the spacing role add a height constraint with the aspect ratio set to screen view.

edited Feb 27 '17 at 09:10

answered Feb 25 '17 at 15:27

hasan

23,815
10
63
101

I don't really need it to be the constant values but I want the distance to vary based on the screen size – Shiva Feb 27 '17 at 08:54
There is no code all done on storyboard. I will add a screenshot. – hasan Feb 27 '17 at 08:55
If you don't mind can you tell me how to set aspect ratio to height of a view .. while adding a constraint instead of height I have choose aspect ratio huh ? or I have to click both height and aspect ratio in pin tool ... plz explain ? – Shiva Feb 27 '17 at 15:16
Select the view and then drag on the board from it to its superview. then, choose equal height then change the multiplier on the left pane to the desired value. Then up vote my answer and accept it as the right answer :) – hasan Feb 27 '17 at 15:57
Sorry I don't have enough reputation to vote both of you guys .... once I get it I will do that – Shiva Feb 27 '17 at 16:25
its setting height right ... not aspect ratio right .. I can see there is separte constraint called aspect ratio .... can you help me understand ? – Shiva Feb 27 '17 at 16:29
for aspect ratio you drag to same view. – hasan Feb 27 '17 at 16:30
you mean to say ... i have to choose height and aspect ratio in the same the view ? – Shiva Feb 27 '17 at 19:29
Bro, to make a view height equal to a percentage of another view. Drag the view to another and choose equal height. – hasan Feb 27 '17 at 20:17
While when you drag a view to itself and choosing aspect ratio. This means that the height is equal to a percentage of its width. Choose whtever suits you :) – hasan Feb 27 '17 at 20:19
Bro Thanks for being patient with me ..I will definitely appreciate once I got enough point for ur kind behavious .. my confusion is lets say ... when we try to pin a view . there is width and height ..if tick aspect ratio what will happen ? basically how can i effectively use aspect ratio generally ? – Shiva Feb 27 '17 at 20:46
Why dont you test them all and check the results? Its good that you learn them all and learn their use. You will be using them all the time. There is no gentel way. they all good cause its only one move it will not do any complications to your view. – hasan Feb 27 '17 at 20:49
Bro,Yeah I will try ... But I am in a kind of hurry to finish a task that'sY . – Shiva Feb 27 '17 at 21:07
lol, you are wasting all the time in the world bro by asking all these question. just use the height equal constraint (percentage of height). will do what you want. – hasan Feb 27 '17 at 21:08
1

Ok bro :) Thanks for your support – Shiva Feb 27 '17 at 21:09

How to make distance between two views variable in autolayout

2 Answers2