Question

I’m trying to emulate the color tint effect from the UITabBarItem.

When I draw a linear gradient at an angle, I get visible aliasing in the middle part of the gradient where the two colors meet at the same location. Left is UITabBarItem, right is my gradient with visible aliasing (stepping):

Here is the snippet of relevant code:

UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
CGContextRef c = UIGraphicsGetCurrentContext();

CGContextSaveGState(c);
CGContextScaleCTM(c, 1.0, -1.0);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();  
CGFloat components[16] = {1,1,1,1, 
                          109.0/255.0,175.0/255.0,246.0/255.0,1, 
                          31.0/255.0,133.0/255.0,242.0/255.0,1, 
                          143.0/255.0,194.0/255.0,248.0/255.0,1};
CGFloat locations[4] = {0.0, 0.62, 0.62, 1};
CGGradientRef colorGradient = 
      CGGradientCreateWithColorComponents(colorSpace, components, 
                                          locations, (size_t)4);
CGContextDrawLinearGradient(c, colorGradient, CGPointZero,
                            CGPointMake(size.width*1.0/3.9, -size.height),0);
CGGradientRelease(colorGradient);
CGColorSpaceRelease(colorSpace);
CGContextRestoreGState(c);

UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return resultImage;

What do I need to change, to get a smooth angled gradient like in UITabBarItem?

Answer 1

As a current workaround, I draw the gradient at double resolution into an image and then draw the image with original dimensions. The image scaling that occurs, takes care of the aliasing. At the pixel level the result is not as smooth as in the UITabBarItem, but that probably uses an image created in Photoshop or something similar.