Masking on a UIScrollView

Question

how could you overlay a mask image on top of a UIScrollView?

For example, I have an image with black on the left and right, fading to white in the center. I would like to use this so that the elements in my scroll view gradually fade on the sides and the center is completely opaque.

In addition, the background of the view onto which the scroll is placed is an image (not a solid color) that is dynamic and can change.

Any ideas?

Answer 1

Your question turned out to be the best source I could find on the main problem, so I decided to post my solution here.

If you add a mask directly to the scroll view, you will end applying the mask to the content itself for any reason - i. e. Transparency does not change when scrolling. As suggested by other posts, I put a gradient in the view (or rather, containing) the scroll view. As a result, scrollContainer is a UIViewObject whose only subordinate object is the scroll view in question.

This mask is configured to scroll left and right. You can change it from top to bottom by manipulating the properties of the start and end points of the gradient.

One downside is that it will also copy the scroll bar indicator. Since my script is not needed, this is acceptable, but your mileage may vary.

CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = scrollView.bounds; gradient.colors = [NSArray arrayWithObjects: (id)[[UIColor colorWithWhite:0 alpha:0] CGColor], (id)[[UIColor colorWithWhite:0 alpha:1] CGColor], (id)[[UIColor colorWithWhite:0 alpha:1] CGColor], (id)[[UIColor colorWithWhite:0 alpha:0] CGColor], nil]; gradient.locations=[NSArray arrayWithObjects: [NSNumber numberWithFloat:0], [NSNumber numberWithFloat:.1], [NSNumber numberWithFloat:.9], [NSNumber numberWithFloat:1], nil]; gradient.startPoint=CGPointMake(0, .5); gradient.endPoint=CGPointMake(1, .5); [scrollContainer.layer setMask:gradient]; 

Answer 2

If you have a solid background color behind the scrollview, you will get better performance by simply overlaying the image on top of the scroll, rather than trying to mask inside it.

Answer 3

Try something in this direction:

 // I assume you are in a UIViewController and self.view is set to some kind of view UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 420)]; scrollView.backgroundColor = [UIColor redColor]; [self.view addSubview: scrollView]; [scrollView release]; // add img with gradient UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"my-gradient.png"]; imgView.frame = CGRectMake(0, 0, 160, 420); [self.view addSubview: imgView]; [imgView release]; 

This will give you a gradient that starts on the left and goes to the center of the entire height, assuming that "my-gradient.png" is an image that actually contains a gradient.

Answer 4

These manipulations are large consumers of resources. A better approach would be (if your case allows) to put a mask image on top of your UIScrollView. This image background will be transparent (e.g. png32) and the image should be alpha gradient.

Answer 5

Use insertView: yourView atIndex: 0