The contentInset property bring some perplexity to developers new to scroll view. This article visualizes the effect of contentInset under different circumstances to help understand the concept.

Imagine a scroll view as a photo frame and its content view (maybe not an UIView object but just the range of content) a photo. If the photo is bigger than the frame, we can only see part of the photo at a moment.

Say we have a scroll view of 100 point both in width and height. Now let’s go see effect of contentInset under different circumstances one by one.

Circumstance 1:

scrollView.contentSize = CGSizeMake(100, 100)
scrollView.contentInset = UIEdgeInsets(top: 10, left: 20, bottom: 30, right: 40)

image

Positive component (top, left, bottom or right) of contentInset generates a specified range stretching from the edge of content view. The positive component of contentInset is marked white and can be dragged into scroll view.

Circumstance 2:

scrollView.contentSize = CGSizeMake(160, 140)

image

If we don’t specify contentInset, the default value is UIEdgeInsetsZero.

Circumstance 3:

scrollView.contentSize = CGSizeMake(160, 140)
scrollView.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

image

Circumstance 4:

scrollView.contentSize = CGSizeMake(100, 100)
scrollView.contentInset = UIEdgeInsets(top: -10, left: -20, bottom: -30, right: -40)

image

Negative component (top, left, bottom or right) of contentInset generates a specified range shrink from the edge of content view. The negative component of contentInset is marked gray and cannot be dragged into scroll view, indicating that some part of content view will be sheltered.

Circumstance 5:

scrollView.contentSize = CGSizeMake(150, 150)
scrollView.contentInset = UIEdgeInsets(top: -10, left: -10, bottom: -10, right: -10)

image

Circumstance 6:

scrollView.contentSize = CGSizeMake(150, 150)
scrollView.contentInset = UIEdgeInsets(top: 10, left: -10, bottom: -10, right: 10)

image

In summary, we can seperate the process of setting contentInset into two parts:

First, decorate the content view with something like a band:

image

If a component of contentInset is positive, then the relative side is legal, that is to say it can be dragged into scroll view. If a component of contentInset is negative, then the relative side is illegal, in other words, it cannot be dragged into scroll view.

Second, the top left corner of the rectangle inside the band overlaps the origin of scroll view .