Image Slicing (Repeatable image) with Xcode Asset Catalog


Image slicing option in xcode asset catalog allows you to define resiziable area an image so it can be repeated to fit the object’s height & width.

The same can be achieved with resizableImageWithCapInsets:UIEdgeInsetsMake but I always messup the arguments and usually we have to try a random number by measure the edges with image editor (eg., preview)

[[UIImage imageNamed:@"image.png"] 
            resizableImageWithCapInsets:UIEdgeInsetsMake(bottom, top, left, right)];

output

Why

Deleted code is debugged code

What is the Catch?

You can still manually fine tune the inset arguments in code if required. (Right click on an image Show in Finder edit resizing object in Contents.json refer the screenshot)

There are three ways you could resize the image to fit your need.

For the first two options, it let you select non-repeatable left edge, resizable middle area, and repeatable right edge.

Horizontal slicing is best option if you have the asset that fit the height of your button/host view. If your host view (button in our case) match the width of the asset then you can do the same with vertical slicing.
If you want to truly want to repeat the image to fit dynamic size (width x height) then 9-part is the best option.

Slicing

Behind the scene

Step by Step


Post Comment