Specifying a Resizable Area of an Image

Use the Xcode Slicing feature to specify the dimensions of a resizable center area of the image and to optionally specify end caps, which are areas of the image that should not be filled by the resizable area.

To specify a resizable area of an image:
  1. Select an asset catalog to display its contents.

  2. In the set list, select the set containing the image to slice.

  3. In the set viewer, select the image representation to slice, and choose Editor > Show Slicing.

  4. Click the Start Slicing button that is displayed over the center of the image.

  5. Click the appropriate button for the slicing operation you want to perform—horizontal, vertical, or both horizontal and vertical.

    Use the Zoom In and Zoom Out buttons to increase or decrease the magnification of the image.

  6. Drag the inner slicing handle to specify a resizable center area.

    In the horizontal slicing example shown below, the resizable area is the 2-pixel-wide sliver specified between the left slicing handle and the inner slicing handle. At runtime, the resizable area replaces the opaque area of the image.

  7. Drag the outer slicing handles to adjust the size of the end caps.

  8. Use the Attributes Inspector to fine-tune the size of the areas and to specify whether the resizable center area should stretch or tile.

To improve app performance, you can use resizable images for the background of many UI elements, including buttons, tab bars, and popovers. For example, you can create a resizable image that includes four end caps to define the four corners of a button. When the image is resized to fill the button’s background area, the portions defined by the end caps are drawn unchanged.

Slicing is available only for projects with a target destination of iOS 7.