5

I want the Vertical Spacing Constraint Constant value between two of my subviews to be a percentage of the screen height. This way the design looks about the same on all devices.

How do I do that in storyboard? Any well known tricks?

enter image description here

Perhaps there is some trick to achieve this with content hugging priority, compression resistance, or a second constraint of a lesser priority?

etayluz
  • 15,920
  • 23
  • 106
  • 151

4 Answers4

2

The solution I had in mind is to introduce a third subview to sit in between my two subviews - and set an aspect height constraint on that third subview with the superview. The two subviews would have a space constraint with the third subview with a constant of zero.

However - I don't like having a storyboard cluttered with make-belief invisible subviews.

etayluz
  • 15,920
  • 23
  • 106
  • 151
  • 2
    That's the correct way to do it. You can also add a `UILayoutGuide` instead of the third subview if you want to avoid the invisible subview but you would have to add it in code. – dan Aug 10 '16 at 18:15
  • 1
    If that's really the correct answer - I can't say that i have much respect for Apple's Autolayout – etayluz Aug 10 '16 at 18:57
  • Autolayout in storyboard is only capable of doing so much. Sometimes you need code. There's nothing wrong with code. – Hayden Holligan Aug 10 '16 at 20:22
  • Autolayout and storyboard came along in the first place so that we wouldn't have to write code - if they can't do their job then they suck. Period. Long live the day of resizing masks and CGRectMake ! – etayluz Aug 10 '16 at 20:43
2

create an IBOutlet of your vertical space constraints.then check what is the device using screen size then assign value to your constraint's constant. EX:

if(screenSize.height == 480)
{
  self.verticalspaceConstraints.constant = 100 ;//this is an example
}

//like this add your other conditions

I have created a small video tutorial to get the basic idea try this small video tutorial

hope this will help to you.

caldera.sac
  • 4,918
  • 7
  • 37
  • 69
  • How do I do that in storyboard? No code solution please. No offense - but it's also an ugly solution. Thank you – etayluz Aug 10 '16 at 17:56
  • just `drag` and create an `outlet` to your `constraint` in your .h file. then change its value according to your conditions – caldera.sac Aug 10 '16 at 17:58
0

I have 2 solutions but am using the first one.

1) Put a UIView with the desired gap height between the two elements and give the gap view as proportional height to the main view of controller. This way it will increase according to device but this idea may feels complex. Because to design a complex screen you will have to put lots of gap view and it will be messy.

2) Mark the constraint in design time to be dynamic by assigning some character to the identifier property of the constraint. Create a category class of NSLayoutConstraint and in the class inherit its function and check if the identifier is started with that character and modify the value like multiplying with device scaling.

Mahesh Agrawal
  • 3,348
  • 20
  • 34
0

To have a adapting vertical spacing between two views, you can :

  • Use UIStackview and define spacing dynamically
  • Use Vertical Spacing Constraint between the two and change priority to 250. You need to have top constraint on the first and bottom on the second. Change prority value
  • Use Equal Height relation between each subviews and superview. You set "proportional height" with like 0.4 on each, which let you 20% margin between. To do so, CTRL + clic on subviews then draw line to superview.

Create height constraint relation

Then adjust "multiplier" making sure that the first element is the subview.

Change multiplier value

Medhi
  • 2,656
  • 23
  • 16