How to create a UIView that contains 0 to 1 opacity value (alpha value) from bottom to top?

Question

I want to create a UIView that contains gradually increasing opacity value in it. That is, the UIView's bottom will start with 0.0 as its alpha value and it should end with 1.0 at the top of the UIView. Is it possible to make such view? Or should i separate that view and give them the various alpha value?

Thanks in Advance

Answer 1

For future reference, the term for that sort of effect is a gradient .

You can make a view with a gradient image behind it:

1. Create a UIImageView behind the UIView you want to set a gradient on
2. Set the UIView 's background color to clear.
3. Set the background image of the UIImageView to a gradient PNG you have created.

The gradient PNG can be 1px wide and say 64px high (or higher, depending on how smooth you want the gradient to look). Make it in a paint program ( GIMP is a decent one).

A way to do it purely in code is using CAGradientLayer :

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.view.bounds;
gradient.colors = [NSArray arrayWithObjects:
                   (id)[[UIColor colorWithWhite: 0.0 alpha:0.0] CGColor],
                   (id)[[UIColor colorWithWhite: 0.0 alpha:1.0] CGColor], nil];
gradient.startPoint = CGPointMake(0.5, 0.0); // default; bottom of the view
gradient.endPoint = CGPointMake(0.5, 1.0);   // default; top of the view
[self.view.layer insertSublayer:gradient atIndex:0];