How does the layout of iOS screen geometry work?

Question

I am using Xcode 8.2, Swift 3.

I am trying to programmatically create a UIViewController with some textual (and in the future, some graphic) content on the screen. Normally, this would be quite easy to do with the Storyboard but since this ViewController is programmatically created, I have to work like this.

Here is my code so far:

let detailViewController = UIViewController()
detailViewController.view.backgroundColor = UIColor.white

let screenSize = UIScreen.main.bounds
let screenWidth = screenSize.width
let screenHeight = screenSize.height

let titleLabel = UILabel(frame: CGRect(x: 20, y: 20, width: screenWidth, height: 20))
titleLabel.center = CGPoint(x: screenWidth / 2, y: 100)
titleLabel.backgroundColor = UIColor.red
titleLabel.textAlignment = .center
titleLabel.text = "Scan Results"
titleLabel.font = UIFont.boldSystemFont(ofSize: 14)

let myField: UITextView = UITextView (frame: CGRect(x: 50, y: 50, width: screenWidth, height: 300))
myField.center = CGPoint(x: screenWidth / 2, y: 250)
myField.backgroundColor = UIColor.green

myField.text = <really long string here>

detailViewController.view.addSubview(titleLabel)
detailViewController.view.addSubview(myField)

And this is what I see:

This raises a lot of questions for me as I am trying to understand how this layout works but can't seem to find any help that makes sense to me.

My screenWidth and screenHeight is 375 and 667 respectively. I am using an iPhone 7. I've positioned my titleLabel in the center but at y: 100. But where the label ended up clearly doesn't look like 1/6 of the way down given that the height of the screen is 667.

So how exactly does textual positioning work? I know that the top left is the origin but that's about it.

Also, I start my text field at x: 50, y: 50 with a width of screenWidth. So why is the text overflowing off the side of the page instead of wrapping around?

Much thanks for any help.

change the colour of the background of your label so you can see what is going on better. if the label is taking up the entire empty space, then this is somewhat the correct behaviour, text is always in the vertical center of the label, and it is probably set to be a single line only — Fonix, Feb 15 '17 at 03:03
oh wait, why is myField a `UITextField`? do you mean to use a `UITextView`? — Fonix, Feb 15 '17 at 03:05
If you want an easy practical solution then the fact that you are initializing it programmatically doesn't mean that you can't initialize it programmatically from a storyboard or a xib , unless you are writing the next "Xamarin Studio" or "React native" or inventing a new file format to replace the storyboard and the xib I don't see a really good reason why not to use a storyboard or a xib file to create a ViewController and make your life easier and your app adaptive with almost no effort. — Oleg Sherman, Feb 15 '17 at 05:41

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

You have to add constraints programmatically, for example:

NSLayoutConstraint(item: myField, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: detailViewController, attribute: NSLayoutAttribute.leadingMargin, multiplier: 1.0, constant: 20.0).isActive = true

myField.widthAnchor.constraint(equalToConstant: 200).isActive = true
myField.heightAnchor.constraint(equalToConstant: 100).isActive = true

Check this answer for more information: https://stackoverflow.com/a/36263784/4077559. I think this is what you are looking for

score 1 · Accepted Answer · answered Feb 15 '17 at 03:36

1

I think if you are setting the frame of the different views (via the constructor or otherwise), dont set the .center as well, it will affect its x and y positions hence why their positioning is off

answered Feb 15 '17 at 03:36

Fonix

11,447
3
45
74

How does the layout of iOS screen geometry work?

2 Answers2