Change the state of a customized button (button with an image)?

Question

I know how to change the state of the regular button, as well as change the background color of a regular button. However, when I do UIButton:setBackgroundImage (customized button), then I cant change the state anymore. I want, when the user click on it, something visually would happen to let the user know that button is selected, and when the user click again it go back to the regular state. I try to change the background of the button, but it doesnt work. Here is how I create my customized button

UIButton *b = [UIButton buttonWithType:UIButtonTypeRoundedRect];
b.frame = CGRectMake(X, Y, H, W);
UIImage *iv = [UIImage imageWithContentsOfFile:picFilePath];
[b setBackgroundImage:iv forState:UIControlStateNormal];

The images for the buttons are taken by the iPhone camera, therefore cant use different picture for selected state

[button setAlpha:0.8]

That would lighten up the button, is there something that would darken the button?

Answer 1

Why are you having the image cover the button rather than setting the background of the button to the image?

EDIT: What you want to do is make your highlighted and/or selected state button have a different background, like this.

UIImage* highlightImage = [UIImage imageNamed:@"highlightImage.png"];
[b setBackgroundImage:highlightImage forState:UIControlStateSelected];

Then in your event handler

- (void)buttonOnclick
{
   b.selected = !b.selected;
}

Answer 2

You probably need to set a background image for each appropriate state.

Answer 3

UIButton *b = [UIButton buttonWithType:UIButtonRoundedRect];
b.frame = CGRectMake(X,Y,H,W);

// set a different background image for each state
[b setBackgroundImage:myNormalBackgroundImage forState:UIControlStateNormal];
[b setBackgroundImage:mySelectedBackgroundImage forState:UIControlStateSelected];

Answer 4

I do this in my app using setImage rather than setBackgroundImage, and it works fine for me. The code looks like this:

[button setImage:[self eraserImageForSize:radius selected:selected]
        forState:UIControlStateNormal];

...where eraserImageForSize:selected: returns the proper image for the "selected" state (which, in your case, you would simply toggle in the action event).

Answer 5

You need to create a copy of the image in a bitmap context, modify the copy by drawing an overlay or processing it in some way, and then assign the modified image to the button's UIControlStateSelected state.

Here is some sample code that creates the context and draws a 50% black overlay on the image for the selected state of the button, which darkens it:

//assume UIImage* image exists

//get the size of the image
CGFloat pixelsHigh = image.size.height;
CGFloat pixelsWide = image.size.width;

//create a new context the same size as the image
CGContextRef    cx = NULL;
CGColorSpaceRef colorSpace;
void *          bitmapData;
int             bitmapByteCount;
int             bitmapBytesPerRow;

bitmapBytesPerRow   = (pixelsWide * 4);
bitmapByteCount     = (bitmapBytesPerRow * pixelsHigh);

colorSpace = CGColorSpaceCreateDeviceRGB();
bitmapData = malloc( bitmapByteCount );
if (bitmapData == NULL)
{
    fprintf (stderr, "Memory not allocated!");
    return;
}
cx = CGBitmapContextCreate (bitmapData,
                                 pixelsWide,
                                 pixelsHigh,
                                 8,      // bits per component
                                 bitmapBytesPerRow,
                                 colorSpace,
                                 kCGImageAlphaPremultipliedLast);
if (cx == NULL)
{
    free (bitmapData);
    fprintf (stderr, "Context not created!");
    return;
}
CGColorSpaceRelease( colorSpace );
CGRect imageRect = CGRectMake(0, 0, pixelsWide, pixelsHigh);

//draw the existing image in the context
CGContextDrawImage(cx, imageRect, image.CGImage);

//draw a 50% black overlay
CGContextSetRGBFillColor(cx, 0, 0, 0, 0.5);
CGContextFillRect(cx, imageRect);

//create a new image from the context
CGImageRef newImage = CGBitmapContextCreateImage(cx);
UIImage* secondaryImage = [UIImage imageWithCGImage:newImage];
CGImageRelease(newImage);
CGContextRelease(cx);

//assign the images to the button
[button setBackgroundImage:image forState:UIControlStateNormal];
[button setBackgroundImage:secondaryImage forState:UIControlStateSelected];

Answer 6

To darken the button, assuming the background contains the image, you can add a sublayer to the view (button). The sublayer will overlay the background image. You use the layer to provide a "tint" over the background image.

You can create a darkening layer with a black or grey layer that has an alpha of 0.3 or so. You can create a lightening layer with a white layer and an appropriate alpha.

See the CALayer Class Reference to learn how to create a layer, then insert the sublayer into the button's view like this:

[self.layer insertSublayer:darkeningLayer atIndex:0];

I've used this to insert gradient layers over the background of a view.