CODEWITHSUNDEEP
iphoneobjective-c
Nick
Nick

Reputation: 478

Mask overlay on UIScrollView

how would you go about overlaying a mask image of sorts 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'd like to use this so that the items in my scroll view gradually fade out to the sides and the center item is completely opaque.

Also, the background of the view the scrollview is placed on is an image (not a solid color) which is dynamic and can change.

Any ideas?

Upvotes: 8

Views: 3813

Answers (5)

RonLugge
RonLugge

Reputation: 5184

Your question wound up being the best source I could find on the basic problem, so I decided to post my solution here.

If you add the mask directly to the scroll view, you wind up applying the mask to the content itself for some reason -- i. e. the transparency doesn't shift as you scroll. As per the suggestions of other posts, I put the gradient in a view over (or rather, containing) the scroll view. As a result, scrollContainer is a UIViewObject whose sole subview is the scroll view in question.

This mask is configured for left-to-right scrolling. You could change it to top to bottom by manipulating the start and end point properties of the gradient.

The one down side is that this also clips the scroll position bar indicator of the scroll view. Since my scenario doesn't need one, that's 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];

Upvotes: 4

Ishank
Ishank

Reputation: 2926

Use insertView:yourView atIndex:0

Upvotes: 0

Stefan Ticu
Stefan Ticu

Reputation: 2103

These kind of manipulations are big ressources consumers. The best approach would be (if your case allows it) to put a mask image OVER your UIScrollView. This image's background shoud be transparent (ex. png32) and the image should be an alpha-gradient.

Upvotes: 0

Robin
Robin

Reputation: 8357

Try something along these lines:

// 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 would give you a gradient that begins on the left and goes all the way to the center for the entire height, assuming that "my-gradient.png" is an image that actually contains a gradient.

Upvotes: 0

picciano
picciano

Reputation: 22701

If you have a solid color background behind the scrollview, you'll get better performance by just overlaying an image on top of the scroll view rather than trying to perform a mask within it.

Upvotes: 0

Related Questions