XCode images.assets asset catalog slicing been ignored and images still distored

Question

I'm having trouble with using slicing in the Xcode image catalog. I have the image in an asset catalog, with the image named 'SquareReactionButtonCrisp' in that catalog. In my xib, I reference this name to set it as the background. And yet as I resize this button in the xib and rebuild, the image is stretched rather than it expanding from the slice lines. Any ideas? Screenshots attached. Thanks, Sam

Answer 1

Asset catalog was introduced with Xcode 5 but to use the image slicing features of the asset catalog your deployment target must be set to iOS7. If your target is set to iOS 6 this may be the cause of your problem. See similar post where person answered their own question. How do you use an asset catalog image's slicing information programmatically?

Answer 2

My solution compatible with iOS 6/7 is using User Defined Runtime Attributes in Xib files. So that we don't have to write inelegant lines everywhere in the source code to replace the image set in xib with stretchable image with cap insets for the button.

Step 1: In Xib, select the button and set the User Defined Runtime Attributes in the Identity Inspector panel. You can define an attribute for setting the cap insets. For example, an attribute called "capEnabled" with just a simple boolean value to indicate we want to use default cap insets for the button. (I intended to attach screenshots but I was told I need at least 10 reputation to post image... :-( )

Step 2: Create a category on UIButton and add a property "capEnabled" and implement the getter and setter methods.

@interface UIButton (NBAHelper)
@property (nonatomic, assign) BOOL capEnabled;
@end

@implementation UIButton (NBAHelper)

-(BOOL)capEnabled{
    UIImage *buttonBackgroundImage = [self backgroundImageForState:UIControlStateNormal];
    CGFloat capLeft = buttonBackgroundImage ? buttonBackgroundImage.capInsets.left : 0;
    return capLeft>0;
}

-(void)setCapEnabled:(BOOL)capEnabled{
    if (capEnabled) {
        UIImage *buttonBackgroundImage = [self backgroundImageForState:UIControlStateNormal];
        if (buttonBackgroundImage) {
            [self setBackgroundImage:[buttonBackgroundImage stretchableImageWithLeftCapWidth:5 topCapHeight:5] forState:UIControlStateNormal];
        }
    }
}
@end

Step3: Import the header file of the category everywhere you want to use the new feature for the UIButton you created or simply import it into the .pch file.

Hope my solution is helpful to you.