Question

I’m having a problem with the following code.

I want to use one UIImageView on more than 1 button, it seems logical to me to only define the UIImageView once and use it as many times as necessary.

If I try to attach the imgView1 to two different buttons only one of them is displayed.

I can get round this by using the commented out imgView2.

But it seems silly that I have to do this. Why can’t I just have one UIImageView and then add it to as many views as I require?

// This will not allow me to use imgView1 more than once and only one of the imgViews/buttons is displayed.
UIImage *image          = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"some_image" ofType:@"png"]];
    UIImageView *imgView1   = [[UIImageView alloc] initWithImage:image];
    //UIImageView *imgView2 = [[UIImageView alloc] initWithImage:image];

    CGRect frame = CGRectMake(10, 10, 70, 72);

    UIButton *h=[UIButton buttonWithType:UIButtonTypeCustom];
    [h setFrame:frame];
    [h insertSubview:imgView1 atIndex:1];

    frame = CGRectMake(100, 10, 70, 72);

    UIButton *h2=[UIButton buttonWithType:UIButtonTypeCustom];
    [h2 setFrame:frame];
    [h2 insertSubview:imgView1 atIndex:1];

    [self.view addSubview:h];
    [self.view addSubview:h2];

    [imgView1 release];
    //[imgView2 release];

Edit:

Context

I’ve added some Context to my question

I am trying to create an image with a gradient background layer that sits behind the actual image, and is a follow-up question to this one (URL: Making a Transparent image button with bgcolor)

Whilst I can simply use setImage, it will not put the gradient background layer into the background.

For example:

int fullFrameX  = 25;
int extFrameX   = fullFrameX + 3;

CGRect fullFrame;
CGRect frame;

fullFrame = CGRectMake(fullFrameX, 10, 70,72);  
frame = CGRectMake(extFrameX, 13, 63,65);

UIButton *h=[UIButton buttonWithType:UIButtonTypeCustom];
[h setFrame:fullFrame];
[[h layer] setMasksToBounds:YES];
//[h setBackgroundImage:image forState:UIControlStateNormal];
[h setImage:image forState:UIControlStateNormal];
[h setShowsTouchWhenHighlighted:YES];
[h setClipsToBounds:YES];


CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
[gradientLayer setBounds:frame];
[gradientLayer setPosition:CGPointMake([h bounds].size.width/2, [h bounds].size.height/2)];
[gradientLayer setColors:[NSArray arrayWithObjects:
                          (id)[[UIColor colorWithRed:255 green:0 blue:255 alpha:0]CGColor],(id)[[UIColor blackColor] CGColor], nil]];
[[h layer] insertSublayer:gradientLayer atIndex:1];

//[h insertSubview:imgView atIndex:1];

[h setTag:0];
[h addTarget:self action:@selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:h];
//[imgView release];

[gradientLayer release];

This is a canabalised version of my original code (from previous question), what its doing is its putting the image at the same level as my gradient background.

In my previous question I alluded to the answer of using UIImageViews to do most of the heavy lifting, except the problem I’m facing is that I have to create multiple UIImageViews
when I really just need to create it once.

The idea is to have 4 buttons, each with a colored background from which the user can click to choose their color scheme.

Its a bit hard to explain, but I’ll try and break it down into a list.

1. An image (avatar) is the top layer
2. A gradient background is in the background and is forced into a frame
3. The whole object is clickable
4. I should only have to init 1 UIImageView for every time I want to use it but am forced to create multiple copies of the same UIImageView.

I hope this clarifies the context of my problem.

Answer 1

http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage

The above URL helped me resolve the problem now.

-(UIImage *)createGradientImage:(NSString *)name withTopColor:(CGColorRef)topColor withBottomColor:(CGColorRef)bottomColor
{
    UIImage *image      = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:name ofType:@"png"]];
    // load the image   
    // begin a new image context, to draw our colored image onto
    UIGraphicsBeginImageContext(image.size);

    // get a reference to that context we created
    CGContextRef context = UIGraphicsGetCurrentContext();

    // set the fill color
    //UIColor *color = [UIColor redColor];
    //[color setFill];

    // translate/flip the graphics context (for transforming from CG* coords to UI* coords
    CGContextTranslateCTM(context, 0, image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // set the blend mode to color burn, and the original image
    //CGContextSetBlendMode(context, kCGBlendModeColorBurn);
    //CGContextSetBlendMode(context, kCGBlendModeColor);
    CGRect rect         = CGRectMake(0, 0, image.size.width, image.size.height);
    CGRect rectInternal = CGRectMake(3, 3, image.size.width-6, image.size.height-6);
    //CGContextFillRect(context, rectInternal);

    //CGColorRef topColor       = [[UIColor colorWithRed:0.0 green:5.0 blue:0.0 alpha:1.0]CGColor];
    //CGColorRef bottomColor    = [[UIColor blackColor]CGColor];

    NSArray *colors = [NSArray arrayWithObjects: (id)topColor, (id)bottomColor, nil];
    CGFloat locations[] = {0, 1};


    CGGradientRef gradient =
    CGGradientCreateWithColors(CGColorGetColorSpace(topColor),
                               (CFArrayRef)colors, locations);

    // the start/end points
    CGPoint top = CGPointMake(CGRectGetMidX(rectInternal), rectInternal.origin.y);
    CGPoint bottom = CGPointMake(CGRectGetMidX(rectInternal), CGRectGetMaxY(rectInternal));

    // draw
    CGContextDrawLinearGradient(context, gradient, top, bottom, 0);

    CGGradientRelease(gradient);


    //For fillcolors
    //CGContextFillRect(context, rect);

    CGContextDrawImage(context, rect, image.CGImage);

    // set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
    //CGContextClipToMask(context, rect, image.CGImage);
    //CGContextAddRect(context, rect);

    //CGContextDrawPath(context,kCGPathFill);

    // generate a new UIImage from the graphics context we drew onto
    UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();


    //return the gradient image
    return coloredImg;
}

Thread closed.