How to get an UITableView working with CAShapeLayer mask?

Question

I would like to mask an UITableView in a shape of an triangle. My first approach was to setup a CAShapeLayer and add it as a mask directly on the table view. But then, I got the triangle shape scrolling together with the table view.

My next approach was to put the table view in an UIView as a superview with exactly the same position and size. In the code snippet below, self.triangleView is the superview.

- (void)viewDidLoad
{
    [super viewDidLoad];

    CAShapeLayer *mask = [[[CAShapeLayer alloc] init] autorelease];
    mask.frame = _tableView.bounds;
    mask.fillColor = [[UIColor blackColor] CGColor];

    CGFloat width = self.triangleView.frame.size.width;
    CGFloat height = self.triangleView.frame.size.height;

    CGMutablePathRef path = CGPathCreateMutable();

    // draw the triangle
    CGPathMoveToPoint(path, NULL, 0, height);
    CGPathAddLineToPoint(path, NULL, width, 0);
    CGPathAddLineToPoint(path, NULL, width, height);
    CGPathCloseSubpath(path);

    mask.path = path;
    CGPathRelease(path);

    self.triangleView.layer.mask = mask;
}

This works so far, cause I now have an table view shaped like a triangle. But I now have the problem, that I can't scroll the table view. The superview doesn't route the touches to the table view inside. Any ideas?

Answer 1

The solution was to use one more UIView in the hierarchy to then mask the the top of them. Sounds strange, but works for me.

Answer 2

TableView subclasses UIScrollView. And UITableViewDelegate conforms to UIScrollViewDelegate, so you can override scrollViewDidScroll and move your mask layer according to UIScrollView contentOffset