The Coordinate System: iOS and Swift

The view coordinate system is really important

Image for post
Image for post
Photo by Tim Marshall on Unsplash

Prerequisites:

The View coordinate system

The Units and structs used

CGFloat: A floating point number used for graphics
CGPoint: A C struct containing two CGFloats
CGRect: A C struct with an origin and a size (both of which are representated as a CGSize). Can be initialised with CGRect(origin:, size:) or CGRect(x: 0, y: , width: , height: ) . The origin is represented as a CGPoint.
CGSize: A C struct with a width and height.

The origin

The origin of any particular view is in the upper-left hand corner

Image for post
Image for post
The origin for a view

Moving from the origin

Moving along the x axis (that is, horizontally) increases the x value.
Moving along the y axis (that is, vertically) increases the y value.

Image for post
Image for post
Image for post
Image for post

The units

The units as expressed so far (oh yes, so far the origin has been expressed as (0,0) so that’s not helpful. Anyway, I’m sure you will read on). In the beginning of iOS a standard resolution display has a 1:1 pixel density which leads us to the @1 or 1x resolution for images.

Image for post
Image for post

The frame of a view

The frame of an instance of a UIView has actually been used in the above code in order to create the instance. The frame property returns a CGRect, but this is in terms of the superview.

Creating a view

To create a UIView the is a square in beginning at the corner of the screen, meaning of course the top-right hand corner of the view controller. There are 4 coordinate points of interest:

Image for post
Image for post
Image for post
Image for post
Click for Gist

The center of a view

An instance of a UIView can be positioned using the center property CGPoint. In this example, the center point being 200, 200

Image for post
Image for post
Image for post
Image for post
Click for Gist

The bounds of a view

On the face of it, the bounds of a UIView is much like the frame of the same. However, although it also returns a CGRect this is in terms of the instance of the view itself. That means all of the measurements are within the view’s own coordinate space.

The difference between bounds and frame

It is not just a technical difference, bounds and frame. That means although they often return the same values they can and return different values depending on the exact state of the views at a particular time.

Creating a view

The bounds for this view are identical to the bounds.

Image for post
Image for post
Image for post
Image for post
Click for Gist

The center of a view

This view is moved with the center point to 200, 200.

Image for post
Image for post
Image for post
Image for post
Click for Gist

CGAffineTransform frame and bounds

To bring into stark contrast the different between frame and bounds, we can compare the values when we perform a CGAffineTransform on a UIView.

Image for post
Image for post
Click for Gist
Image for post
Image for post

Conclusion

Frame and bounds measure different things in Apple’s SDK. Knowing the difference between the two and how they can be used to create great apps and great user interfaces.

Extend your knowledge

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store