CODEWITHSUNDEEP
iosautolayout
Charlie Fish
Charlie Fish

Reputation: 20566

iOS Layout Xcode 8

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.

Upvotes: 0

Views: 66

Answers (1)

Dima
Dima

Reputation: 23634

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

Upvotes: 1

Related Questions