Stretchable Images Using Interface Builder

Creating stretchable image views with cap insets is a common problem. Many people don’t know that it can easily be achieved in Interface Builder without writing a single line of code.

Let’s say we have an image view and we want to stretch it to fill a larger space.

The solution seems simple — we have to set the Content Mode  to Scale To Fill  and resize the image view.

That’s not what we had in mind. We only wanted the middle part of the image scaled, preserving the scale of its borders. To achieve this we have to set the stretching properties of our image view.

Much better.

How does it work?

Stretching properties are pretty simple:

  • The fraction of the original image left without stretching on the left is specified by X
  • The fraction of the original image that gets stretched in the x-axis is specified by Width
  • The fraction of the original image left without stretching on the right is equal to 1 – X – Width
  • If we use 0  for Width  the stretched area will interpolate between the last pixel of the left part and the first pixel of the right part
  • The y-axis works analogously

Here the unstretched parts are overlayed with blue, while the stretched part is overlayed with orange. It’s important to remember that all values are relative to the size of the original image.

When would we want to use values different than {0.5, 0.5, 0, 0} ?

We may encounter an image that doesn’t have a stretchable middle pixel in some dimension.

Here, the stretched x-axis region is clearly misaligned. To fix that we can move it by increasing or decreasing the X  value. Let’s set it to 0.6.

Excellent.

What about Width  and Height?

Let’s say we need to stretch some area of the image and keep the rest intact. This can be achieved by combining X, Y, Width  and Height. Width  and Height  will specify the relative size of the stretchable part.

Xcode 5 and Xcassets

Xcode 5 introduced asset catalogs (*.xcassets) that make it possible to define image stretching properties at the asset level. For every asset we can set its asset slicing properties, which are very similar to the stretching properties of image views. The biggest difference is that we’re specifying the sizes in points instead of fractions of the original image, which makes it a lot easier to achieve pixel perfection.

Summary

Image stretching properties are a very useful feature of the Interface Builder that allow us to achieve a variety of results with live preview and without writing a single line of code. Slimming down view controllers by replacing view related code with an appropriate setup in IB always seems like a good idea. A live preview of how images will look after applying stretching properties makes it even more preferable to code — especially since in most cases, a simple {0.5, 0.5, 0, 0}  setup should do exactly what we wanted. Since the introduction of xcassets we are also able to setup stretching for assets themselves, which may often prove even more useful.

Understanding Frame
NSURL Cheat Sheet