Difference between CGSize and CGRect

Question

What is the difference between CGSize and CGRect?

As a beginner reading the CGGeometry Reference it wasn't immediately obvious, especially because there were references to size being a vector. I was kind of surprised that I couldn't find this basic question on StackOverflow, so I decided to research it more and post my answer below.

Outherod

Answer 1

CGSize

CGSize is a width and a height. It is not technically considered a rectangle (which is one reason I confused it with CGRect in the beginning), but rather just a size. However, for the purpose of illustration, I will represent it as a rectangle below:

This combination of width and heigh is known as a struct, which is short for structure, and originally comes from the C language (but I will be using the Swift rather than Objective C syntax here). A structure is just a group of logically related variables. Here we can see the CGSize structure:

struct CGSize {
  var width: CGFloat
  var height: CGFloat
}

where CGFloat is either a float (32 bit) or a double (64 bit). (See What's the difference between using CGFloat and float?)

You can make a CGSize by doing the following:

var size = CGSize(width: 50, height: 30)

CGRect

CGRect is a rectangle. What is not immediately obvious from the name, though, is that in addition to a width and a height, it also has has an origin.

CGsize, by comparison, does not have an origin.

CGRect is also a structure. If fact, it's a structure of structures: a CGPoint (the origin) and CGSize (the width and height). Here it is:

struct CGRect {
  var origin: CGPoint
  var size: CGSize
}

where CGPoint is

struct CGPoint {
  var x: CGFloat
  var y: CGFloat
}

You can make a CGRect by doing the following:

var rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: 50, height: 30))

Negative width and height

The width and height values can be negative. We can see what this looks like with CGRect. Notice how the origin appears on different corners:

Vectors

The documentation for CGSize says

A CGSize structure is sometimes used to represent a distance vector, rather than a physical size. As a vector, its values can be negative. To normalize a CGRect structure so that its size is represented by positive values, call the CGRectStandardize function.

Vectors in math have a magnitude (or length) and a direction. Although CGSize doesn't have an origin, you can see from the following diagram how the width and height along with their associated positive or negative values give both the length and direction.

Further Reading

• CGGeometry Reference
• Structures in Swift
• Enums and Structs in Swift
• Big Nerd Ranch - Rectangles, Part 1
• CGRect, CGSize and CGPoint
• C Structures
• Difference between frame.size.width and frame.width

Outherod

Great Explanation! – Waddell

Answer 2

Short version: Their names are confusing, because they both can be used to represent rectangles.

CGSize has width and height

CGRect has x, y, width and height

You can think of CGRect as a CGSize with coordinates.

CGRect is commonly used to specify a UIView frame, which (top, left) coordinates are relative to the (top, left) coordinates of the parent view.

Tish