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?

score 0 · Answer 1 · answered Jul 05 '12 at 11:42

0

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

answered Jul 05 '12 at 11:42

javieralog

1,337
9
10

score 0 · Accepted Answer · answered Jul 18 '12 at 10:04

0

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.

answered Jul 18 '12 at 10:04

iMarcel

1
2

How to get an UITableView working with CAShapeLayer mask?

2 Answers2