So before we get started with learning Auto-Layout and Constraints and all that good stuff, there is something important that we should cover. It won’t take too long but it’ll make understanding Auto-Layout a lot easier, and that is bascially how the canvas works in iOS, macOS tvOS etc.

The Point

There were times when a pixel was used as a size measurement? For example you could say, make this view 200 pixels wide and 50 pixels tall. We didn’t need to worry about pixel density and all that stuff. Well, apple fixed that with the introduction of retina displays on the iPhones and macBooks. In the early days we could just tell the app to display an image 100 times 100 pixels and everything was good. Every device would display the image exactly the same way.

What happened when retina displays came along was that the image was rendered 100×100 pixels on an iPhone 4. On the iPhone 5, it was too, but it appeared only half as big on the screen as it did on the iPhone 4. That’s because the pixel density between the two devices was doubled. so Apple had increased the pixel density. Where 1 Pixel was on the iPhone 4, there suddenly were 4 on the iPhone 5.

In order to make an end to this mess, apple introduced the measurement using „points“ with Core Graphics. For us, this doesn’t change all that much. We just need to keep in the back of our mind that we don’t write the measurements in pixels, like the numbers you type in are not in pixels. They’re in points. So every time I reference a measurement in this module, it is in points, not in pixels. Don’t worry too much about it. It’s pretty much self explaining.

If you want to dive into the details however, there is a great graphic from PaintCode App that explains this in greater detail. You can find it right here.

But that isn’t the only thing that is needed as a prerequisite for this module. There is something far more important. And that is how the canvas of the iOS vs the macOS is structured, because the have some similarities and some differences. Lets first look at the iOS canvas.

iOS canvas

At first, the iOS canvas is a little counterintuitive to people, because it doesn’t reflect the way we learned cartesian-coordinates in school.

This is what it looks like.

Now, the point system on the iPhone is like a coordinate system like we learned in school. We have an X- and a Y-Axis, however the coordinate system is flipped on the X-Axis.

Both start in the top left corner, which therefore is the point (0,0). Ff you count the X-Coordinate up, you move along the X-Axis into the iPhones screen, the right in this case. The same happens with the Y-Axis, so as you increase the number, the coordinate moves down.

macOS canvas

On macOS however, this is a little bit different.

Let’s just assume you look ash the window of a blank application. The point (0,0) is in the bottom left corner, whereas on the iPhone it was in the top left corner.

The X-Axis is still in the same direction, but the Y-Axis is now like on a common coordinate system, pointing upwards.

So if we would set the Y-Coordinate of a point to 20, we would move along the Y-Axis in an upward direction on the mac, while on the iPhone wo would move downwards.

This is all there is when it comes to prerequisites. Nothing more to be said then: keep this in mind for this module. It’ll help you understand certain tasks better.

Now, let’s dive into the topic.

Ask Anything!

Do you have any questions? Ask them! I'll answer via Email as soon as I read it.

Not readable? Change text. captcha txt