This article is a repost of an answer I wrote on Stack Overflow.
Short description
- frame = a view’s location and size using the parent view’s coordinate system (important for placing the view in the parent)
- bounds = a view’s location and size using its own coordinate system (important for placing the view’s content or subviews within itself)
Details
To help me remember frame, I think of a picture frame on a wall. The picture frame is like the border of a view. I can hang the picture anywhere I want on the wall. In the same way, I can put a view anywhere I want inside a parent view (also called a superview). The parent view is like the wall. The origin of the coordinate system in iOS is the top left. We can put our view at the origin of the superview by setting the view frame’s x-y coordinates to (0, 0), which is like hanging our picture in the very top left corner of the wall. To move it right, increase x, to move it down increase y.
To help me remember bounds, I think of a basketball court where sometimes the basketball gets knocked out of bounds. You are dribbling the ball all over the basketball court, but you don’t really care where the court itself is. It could be in a gym, or outside at a high school, or in front of your house. It doesn’t matter. You just want to play basketball. In the same way, the coordinate system for a view’s bounds only cares about the view itself. It doesn’t know anything about where the view is located in the parent view. The bounds’ origin (point (0, 0) by default) is the top left corner of the view. Any subviews that this view has are laid out in relation to this point. It is like taking the basketball to the front left corner of the court.
Now the confusion comes when you try to compare frame and bounds. It actually isn’t as bad as it seems at first, though. Let’s use some pictures to help us understand.
Frame vs Bounds
In the first picture on the left we have a view that is located at the top left of its parent view. The yellow rectangle represents the view’s frame. On the right we see the view again but this time the parent view is not shown. That’s because the bounds don’t know about the parent view. The green rectangle represents the view’s bounds. The red dot in both images represents the origin of the frame or bounds.
Frame
origin = (0, 0)
width = 80…