0

So I have a view and a label inside my main view. The view is centered both horizontally and vertically. Currently the label is set to be 60 pixels from the top of the screen. However on the iPhone 4S it looks pretty bad. The label is way too close to the view.

I tried to set it so only on the iPhone 4S it would be 30 pixels from the top but I guess I was adjusting the size class instead of just that one device.

So my questions are this. First is there a good way to adjust my layout for specific devices? Second is there a way to center that label half way between the top of the screen and the top of the view?

Also just for reference this is all in vertical orientation.

Dima
  • 23,484
  • 6
  • 56
  • 83
Charlie Fish
  • 18,491
  • 19
  • 86
  • 179

1 Answers1

1

You generally want to avoid adding layout constraints for specific devices. Size classes and orientations are better because they are more flexible. If however you really need to do that (and in some cases it may be unavoidable if you have a really specific layout), then you can use UIDevice and a few other mechanisms to do so (including simply getting the size of the screen and comparing it against the known height, which in this case is 480 points. Simply use this code in an if statement when you are setting up your constraints and change them accordingly. You do need to set up your constraints in code for this to work.

As for your second question, there are a few ways to center a view this way, the most common one that comes to mind is using a UILayoutGuide (or if you support < iOS 9, an invisible spacer view). You can do this in interface builder or in code pretty simply. Something like this should do it:

// Assuming you have a view called topView, a root view which are already configured and a myLabel view, this code only covers the vertical aspect of the layout

let guide1 = UILayoutGuide()
view.addLayoutGuide(guide1)
let guide2 = UILayoutGuide()
view.addLayoutGuide(guide2)

// space above the label
guide1.topAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
// space below the label
guide2.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
// make the spaces equal
guide1.heightAnchor.constraint(equalTo: guide2.heightAnchor).isActive = true

myLabel.topAnchor.constraint(equalTo: guide1.bottomAnchor).isActive = true
myLabel.bottomAnchor.constraint(equalTo: guide2.topAnchor).isActive = true
Dima
  • 23,484
  • 6
  • 56
  • 83
  • Yeah I'd prefer if possible to keep my entire interface work in the storyboard file. The less I have to do in code in regards to the interface the better. Is that possible or not? – Charlie Fish Oct 14 '16 at 00:50
  • It looks like interface builder does not support `UILayoutGuide` yet but that's fine. You can just go the old route and add invisible views instead. So just add 2 invisible views to your storyboard, and anchor them the way I indicated in the code above. One below your label, one above, and make their heights equal. [Here is an answer](http://stackoverflow.com/questions/13075415/evenly-space-multiple-views-within-a-container-view) that goes into this in detail. – Dima Oct 14 '16 at 00:55