How do I create a UIView subclass with a transparent gradient background?

Question

I want to create a custom UIView that has a transparent gradient background in order to make text more visible over the view behind this custom view.

Here's an example image:

Picture the orange box is a UIView under my transparent gradient view. I'd then put text on top of the transparent gradient view and because of how it's darker, text would be more visible, but you can still see some of the orange box from behind it.

I'm having trouble figuring out how to accomplish this with UIView.

In my custom UIView's drawRect I have:

- (void)drawRect:(CGRect)rect
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    NSArray *gradientColors = @[(id)[UIColor colorWithWhite:0.0 alpha:0.0].CGColor,
                                (id)[UIColor colorWithWhite:0.0 alpha:0.55].CGColor,
                                (id)[UIColor colorWithWhite:0.0 alpha:0.7]];

    CGFloat gradientLocations[] = {0, 0.77, 1};
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) gradientColors, gradientLocations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGGradientRelease(gradient);
}

But it doesn't seem to support transparency, as when I add that UIView to self.view it's completely opaque black.

This is how I would do it in CSS:

background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.55) 23%, rgba(0,0,0,0.70) 100%);

But again, I have no idea how to do it for a custom UIView subclass.

Answer 1

I wouldn't bother with CoreGraphics so I would use CAGradientLayer.

1. Override +layerClass in your subclass.

   + (Class)layerClass {
       return [CAGradientLayer class];
   }
   

2. Redefine layer property in interface to use this class.

   @property(nonatomic, readonly, retain) CAGradientLayer *layer;
   

3. Set the colors and other attributes.

   self.layer.colors = gradientColors;
   self.layer.locations = gradientLocations; // But this time as `NSArray`
   self.layer.startPoint = startPoint; // From 0 to 1
   self.layer.endPoint = endPoint; // From 0 to 1
   

Answer 2

You can create a translucent image in photoshop like this & put it on your OrangeView. As this image is too dark, you can control its transparency by altering its alpha value. The arrangements would be in such a way that both your textView & transImage would be subView of your orangeView. The text view would be placed on top of transImage.

No need to write any code.

Let me know if any more info needed..:)