iphone - How to create a top fade effect using UIScrollView? -

i've got uiscrollview in app , have seen in other apps when user scrolls, top section fades out on scroll rather dissapearing out.

i love effect , want achieve it. ideas how can done?

edit: i've put code on github, see here.

---

see my answer similar question.

my solution subclass uiscrollview, , create mask layer in layoutsubviews method.

#import "fadingscrollview.h" #import <quartzcore/quartzcore.h>  static float const fadepercentage = 0.2;  @implementation fadingscrollview  // ...  - (void)layoutsubviews {     [super layoutsubviews];      nsobject * transparent = (nsobject *) [[uicolor colorwithwhite:0 alpha:0] cgcolor];     nsobject * opaque = (nsobject *) [[uicolor colorwithwhite:0 alpha:1] cgcolor];      calayer * masklayer = [calayer layer];     masklayer.frame = self.bounds;      cagradientlayer * gradientlayer = [cagradientlayer layer];     gradientlayer.frame = cgrectmake(self.bounds.origin.x, 0,                                      self.bounds.size.width, self.bounds.size.height);      gradientlayer.colors = [nsarray arraywithobjects: transparent, opaque,                             opaque, transparent, nil];      // set percentage of scrollview fades @ top & bottom     gradientlayer.locations = [nsarray arraywithobjects:                                [nsnumber numberwithfloat:0],                                [nsnumber numberwithfloat:fadepercentage],                                [nsnumber numberwithfloat:1.0 - fadepercentage],                                [nsnumber numberwithfloat:1], nil];      [masklayer addsublayer:gradientlayer];     self.layer.mask = masklayer; }  @end 

the code above fades top , bottom of uiscrollview background colour transparent, can changed fade top (or fade colour want).

change line fade top only:

// fade top of scrollview gradientlayer.locations = [nsarray arraywithobjects:                            [nsnumber numberwithfloat:0],                            [nsnumber numberwithfloat:fadepercentage],                            [nsnumber numberwithfloat:1],                            [nsnumber numberwithfloat:1], nil]; 

---

edit 2:

or fade top changing these 2 lines:

// fade top of scrollview     gradientlayer.colors = [nsarray arraywithobjects: transparent, opaque, nil];      gradientlayer.locations = [nsarray arraywithobjects: [nsnumber numberwithfloat:0],                                                          [nsnumber numberwithfloat:fadepercentage], nil]; 

or, fade bottom only:

// fade bottom of scrollview     gradientlayer.colors = [nsarray arraywithobjects: opaque, transparent, nil];      gradientlayer.locations = [nsarray arraywithobjects: [nsnumber numberwithfloat:1.0 - fadepercentage],                                                          [nsnumber numberwithfloat:1], nil];