ios - Rectangular CALayer mask with multiple alpha values -

i trying give illusion of navigation bar masking top part of uitableview. top part should have 50% opacity while rest of view should have 100% opacity.

this quite easy cagradientlayer, so:

- (void)addtopopacitymask {     cagradientlayer *gradientlayer = [cagradientlayer layer];     gradientlayer.frame = self.tableview.frame;      id transparent = (id)[uicolor clearcolor].cgcolor;     id opaque = (id)[uicolor blackcolor].cgcolor;     gradientlayer.colors = @[transparent, opaque, opaque];     gradientlayer.locations = @[@0.1, @0.11, @1];     self.tableview.superview.layer.mask = gradientlayer; } 

but can tell, every value in locations property needs unique, there small gradient (which not want). setting locations

@[@0.1, 0.10001, @1]; 

seems unsexy solution, given need translate height of said mask locations.

i thought using cashapelayer , create top part mask, see code below, cuts out rest of table view since mask covers top part.

- (void)addtopopacitymask {     cashapelayer *shapelayer = [cashapelayer layer];     shapelayer.fillrule = kcafillruleevenodd;     shapelayer.fillcolor = [uicolor blackcolor].cgcolor;     shapelayer.opacity = 0.5;     cgrect maskrect = cgrectmake(0, 0, cgrectgetwidth(self.tableview.frame), 76);      cgpathref path = cgpathcreatewithrect(maskrect, null);     shapelayer.path = path;     cgpathrelease(path);      self.tableview.superview.layer.mask = shapelayer; } 

what missing?

the reason want mask instead of adding 50% transparent view on top of table view simple. table view has transparent background well, , want navigation bar stick out when user start scrolling beneath (similar how yahoo weather app works/used work).

edit:

to clarify, default (notice cannot see navbar):

and when start scrolling downwards in table view (the table view's alpha gets cut off, not change background color of view, translucent):

edit again: ok... 1 more try - might work you. played around bit more... seems effect want translucent part of mask needs really low opacity value. anyway, code:

- (void)addtopopacitymask {      cgrect rect = _tableview.frame;     cgrect r = rect;      uigraphicsbeginimagecontext(rect.size);     cgcontextref context = uigraphicsgetcurrentcontext();      // fill "top rect" black @ 5% opacity     r.size.height = 76;      cgcontextsetfillcolorwithcolor(context, [uicolor colorwithwhite:0.0 alpha:0.05].cgcolor);     cgcontextfillrect(context, r);      // fill rest of layer black @ 100% opacity     r.origin.y = 76;     r.size.height = rect.size.height;      cgcontextsetfillcolorwithcolor(context, [uicolor blackcolor].cgcolor);     cgcontextfillrect(context, r);      // grab uiimage context     uiimage *image = uigraphicsgetimagefromcurrentimagecontext();     uigraphicsendimagecontext();      // create layer     calayer *thelayer = [calayer layer];      // set layer content just-created image     thelayer.contents = (__bridge id _nullable)(image.cgimage);      thelayer.frame = rect;      // mask view holding tableview     _tableview.superview.layer.mask = thelayer;  } 

gives me result:

and

---

edit: not sure i'm seeing you're seeing... however, have tried this?

- (void)addtopopacitymask {     cagradientlayer *gradientlayer = [cagradientlayer layer];     gradientlayer.frame = self.tableview.frame;      id transparent = (id)[uicolor clearcolor].cgcolor;     id opaque = (id)[uicolor blackcolor].cgcolor;      // use 4 color slots     gradientlayer.colors = @[transparent, transparent, opaque, opaque];      // , 4 color locations (i don't error when using 2 of same values)     gradientlayer.locations = @[@0.1, @0.11, @0.11, @1];      self.tableview.superview.layer.mask = gradientlayer; } 

---

you can create calayer , give translucent background color... this:

calayer *thelayer = [calayer alloc]; cgrect r = tableview.bounds; r.size.height = 76.0; thelayer.frame = r; thelayer.backgroundcolor = [uicolor colorwithwhite:0.0 alpha:0.5].cgcolor; [tableview.superview.layer addsublayer:thelayer];