Search code examples
iosxcodeuiimageviewslicecatalog

How can I use Xcode's xcassets slicing feature to correctly display an image in a UIImageView?


I would like to use the slicing feature (available to deployments using iOS 7 or greater) to slice the following image:

enter image description here

Currently, I have made a new image set in xcassets, and I have added two versions of this image. One which is 281x36 pixels, and another which is twice the size. I then used the slicing tool to slice both of the images as follows:

enter image description here

I created a UIImageView and set the image to "testimage". I used the "ScaleToFill" mode, and the image scaled correctly in the preview:

enter image description here

Next, I ran the code to see how it would look with the iphone 6 simulator, and I am not getting the expected result:

enter image description here

It seems as though the slicing feature is not being used when actually run on the device itself. I have played around for a while and I've made sure the deployment target is > 7.0 (It's set to 8.4 for now). I checked the simulator as well, just to make sure it was simulating with 8.4, which it is.

Does anyone know what I'm doing wrong here?

Thank You in advance!


Solution

  • Ok, so after quite a bit of confusion I believe I found the solution to my problem:

    I was importing and slicing JPG files, and I was getting the unexpected behavior I explained above. I decided to try converting the same images to PNG files first, and then try slicing. Everything worked correctly!

    I'm not sure why the JPG files are not slicing correctly, perhaps it's a bug? Or maybe I am just missing something.. Either way, if anyone else has this issue, I suggest a simple solution is to convert your files to PNGs before importing into the image sets.