C4 stepper custom images

Question

I'm trying to use my own images on a C4Stepper. I'm setting it up like this

@implementation C4WorkSpace{
    C4Stepper *theStepper;
    C4Image *stepperBackground;
    C4Image *stepperPlus;
}

-(void)setup {
    //load backgroundimage
    stepperBackground=[C4Image imageNamed:@"icon_zoom.png"];
    stepperBackground.width=100;

    //load incrementImage
    stepperPlus=[C4Image imageNamed:@"icon_zoom_plus.png"];
    stepperPlus.width=stepperBackground.width/2;

    //setup stepper
    theStepper=[C4Stepper stepper];
    [theStepper setBackgroundImage:stepperBackground forState:NORMAL];
    [theStepper setIncrementImage:stepperPlus forState:NORMAL];

    theStepper.center=self.canvas.center;
    [self.canvas addSubview:theStepper];  
}

The 2 icons look like this: Strangely, what appears on the canvas looks something like this: ! Are there any special requirements for the zoomStepperImages? A certain size or something?

Answer 1

There are special requirements.

• The background image used is "stretchable", so you have to design a button image that can be stretched if needed. If you have a look at any of the button images (incl. in the Media.xcassets folder) you'll see that they are generic. For example, the selected button background image looks like:

• Similarly, the increment / decrement images are themselves independent of the background images. The incrementNormal image included in the same folder looks like:

• You can see how the default values of the C4Stepper class are initialized in C4AppDelegate.m:

...

[C4Stepper defaultStyle].style = basicStyle;
[C4Stepper defaultStyle].tintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"lightGrayPattern"]];
[[C4Stepper defaultStyle] setDecrementImage:[C4Image imageNamed:@"decrementDisabled"] forState:DISABLED];
[[C4Stepper defaultStyle] setDecrementImage:[C4Image imageNamed:@"decrementNormal"] forState:NORMAL];
[[C4Stepper defaultStyle] setIncrementImage:[C4Image imageNamed:@"incrementDisabled"] forState:DISABLED];
[[C4Stepper defaultStyle] setIncrementImage:[C4Image imageNamed:@"incrementNormal"] forState:NORMAL];

• So, what you want to do is create an image for your background (mine is stretchable because the stuff in the middle are straight lines that can be stretched horizontally without looking stretched. You also want to create independent + - images for increment / decrement sides of the button.

Just as a note, when I was creating the C4Button class, I had to play around with the various images I was creating to get them to "look" right... In the end, I had to do a lot of tweaking and experimenting to learn how they were rendered. The difficulty I had in figuring this out was that the rendering mechanism of UIButton itself was a bit strange and I had to learn how to fit things into the button so that they rendered properly.