The Coordinate System: iOS and Swift
The view coordinate system is really important
Difficulty: Beginner | Easy | Normal | Challenging
Prerequisites:
- This article has been written in the Playground displaying a UIViewController, although you could do the same in a Single View Application
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
That is, the origin could be represented by a let origin = CGPoint(x: 0, y: 0) (which is actually the origin shown in the diagram above).
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.
If we want a CGPoint 100 points along the x axis we could run the following line let alongX = CGPoint(x: 100, y: 0).
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.
Over time higher resolution displays have been developed, at a scale factor of 2 or 3 (giving us @2 or 2x and @3 or 3x respectively).
The devices and scale factors are available in Apple’s documentation. , although if you want to know the scale factor of your current device use self.view.contentScaleFactor (for self.view, ok?).
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.
This is why it makes sense that we use frame to initialise an instance of a UIView.
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:
And of course the width and the height are 100 respectively.
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
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.
This makes sense — what would happen if you rotate a view?
Let us look at a series of examples.
Creating a view
The bounds for this view are identical to the bounds.
The center of a view
This view is moved with the center point to 200, 200.
However, because we are looking at the bounds of the view, it is identical to the view above in this respect. We can even note the center point is 50,50.
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.
To demonstrate this, the following is an example of a rotation.
The frame is: (79.29, 79.29, 141.42, 141.42)
The bounds are (0.0, 0.0, 100.0, 100.0)
(you can see the final two through the rotatedView.frame and rotatedView.bounds properties at the end of the code snippet, visible in Playgrounds but printable in the console too!)
The center is still considered to be (150,150)
The moral of the story? It can be tricky to manage the frame and bounds for transformed view.
Never, ever assume that frame and bounds are always the same. Please!
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.
Who wouldn’t want that?
Not only that, it is common in interviews to be asked the difference between frame and bounds — so it is something you should really know before approaching any interview.
I hope this article has been of help to you, and I hope you are enjoying your coding journey.
Any questions? Get in touch with me on Twitter
Extend your knowledge
- Read Apple’s documentation on the drawing and printing guide
