CAGradientLayer and scrollViewTexturedBackgroundCo

Question

I'm trying to use CAGradientLayer to fade foreground controls against the background textured view. So in a nutshell, I have a view with the bg color as scrollViewTexturedBackgroundColor. I have a view on top of that, whose contents I'd like to fade at the border into the background view's color.

CAGradientLayer* gradient = [CAGradientLayer layer];
gradient.frame = self->scrollableCanvas.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor scrollViewTexturedBackgroundColor] CGColor], (id)[[UIColor scrollViewTexturedBackgroundColor] CGColor], nil];
[gradient setStartPoint:CGPointMake(0.90, 1)];
[gradient setEndPoint:CGPointMake(1, 1)];    
[[self->scrollableCanvas layer] addSublayer:gradient];
[[self->scrollableCanvas layer] setMasksToBounds:YES];

Unfortunately, CAGradientLayer doesn't seem to support UIColors as pattern images.

any ideas how I can achieve a simple border fade effect for the subview?

thanks

Answer 1

I made a category on UILabel that adds gradient at the end of the label using Max's answer.

If you need, here it is:

#import "UILabel+GradientEnding.h"

@implementation UILabel (GradientEnding)

- (void)addGradientEnding
{
    //draw gradient on top
    UIView *gradientAlphaView = [[UIView alloc] initWithFrame:CGRectMake(self.frame.size.width - 80.0, 0, 80.0, self.frame.size.height)];
    UIColor *startColor = RGBA(0xf7f7f7, 0);
    UIColor *endColor = RGBA(0xf7f7f7, 1);
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = gradientAlphaView.bounds;
    gradient.colors = [NSArray arrayWithObjects:(id)[startColor CGColor], (id)[endColor CGColor], nil];
    gradient.startPoint = CGPointMake(0, 0.5);
    gradient.endPoint = CGPointMake(1.0, 0.5);
    [gradientAlphaView.layer insertSublayer:gradient atIndex:0];
    [self addSubview:gradientAlphaView];
}

@end

But you should use your own colors. And use this define:

#define RGBA(rgbValue, opacity) [UIColor \
colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 \
green:((float)((rgbValue & 0xFF00) >> 8))/255.0 \
blue:((float)(rgbValue & 0xFF))/255.0 alpha:opacity]

Answer 2

You can use a little trick:

//create normal UIImageView
UIImageView* iv = [[[UIImageView alloc] initWithImage: [UIImage imageNamed :@"bg_png.png"]] autorelease];
[superview addSubview: iv];

//draw gradient on top
UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)] autorelease];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite: 1.0 alpha: 0.0] CGColor], (id)[[UIColor colorWithWhite: 1.0 alpha: 1.0] CGColor], nil];
[view.layer insertSublayer:gradient atIndex:0];
[superview addSubview: view];