CODEWITHSUNDEEP
iosobjective-cxcodeconstraintsuistoryboard
Panayiotis Irakleous
Panayiotis Irakleous

Reputation: 2696

iOS - Wrong size on iPhone 6 simulator

I have inserted a UILabel in the UIStoryBoard centered horizontally. But when I run it on iPhone 6 it's not in the center. Why that happening and how I can prevent for facing the same problems on the future?

screenshot1

screenshot2

On other simulators like iPhone 5 that is working just fine.

Upvotes: 0

Views: 537

Answers (3)

Renfei Song
Renfei Song

Reputation: 2960

There are different resolutions for iOS devices, especially after the release of iPhone 6 and iPhone 6 Plus. Because the storyboard is just a general representation of your application's interface, the size of canvas does not actually resemble any one particular screen size. In fact, you may notice that the default canvas is kind of like a "square."

As a result, you cannot expect your views to look exactly the same on simulators or actual devices as in your canvas by simply put all of them in your canvas. To layout, you need to use the constraints, which are a set of rules that explicity tell the system how you want to position your views. In fact, starting from iOS 8, Apple encourages developers to utilize auto layout and size classes to develop apps that fit on screens of any size, even iPhones and iPads at the same time.

In your case, in order to put the label in the center of the screen using constraints, just Control-drag your label to its super view in storyboard:

enter image description here

In the popover, choose both Center Horizontally in Container and Center Vertically in Container. You can hold Shift to select multiple constraints at one time. Then, in the Size Inspector, make sure that the constants of your constraints are 0.

enter image description here

Please check out Apple's guide about using AutoLayout, as it's the primary layout mechanism you will be using when developing iOS apps (or OS X applications) in the future.

Upvotes: 1

Amir Khan
Amir Khan

Reputation: 1318

-Select View Controller in Storyboard.
-Mark check on "Use Auto Layout option" in File Inspector in utility area.
-Select the label and add constraints for that label by clicking pin button bottom of the editor area.

Hope it will works for you.Thank you.

Upvotes: 0

Bista
Bista

Reputation: 7893

First of all select label and use Pin tool to add top, width, height contraint:

Pin

Then, use Align property to align it horizontally :

Align

P.S - Learning auto layout is a very tedious thing, but once you get familiar to it, you'll find easy to create views for multiple devices. Look for tutorials and videos. Practice-Practice!

Upvotes: 1

Related Questions