The table separator looks like a triangle

Question

Is there a way to get the effect of a tableview separator, as shown in the screenshot below, the effect was used in a fast company application and shows two lines in views separated by a triangular separator.

Any pointers to how this effect can be achieved in tabular form would be greatly appreciated. The separator at the bottom of the screen is translucent, and the image associated with the next line shows.

Link to the screenshot here: https://s3-us-west-1.amazonaws.com/jjm.so/17427B2C-3837-4428-B82E-8D1C57BFA706B53CD936-AE93-4F2A-B3DB-7F7018A02CBA.jpg

Answer 1

There you go:

    CGRect frame = imageView.bounds;

    UIBezierPath *path   = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, frame.size.height)];
    [path addLineToPoint:CGPointMake(0, frame.size.height-60)];
    [path addLineToPoint:CGPointMake(frame.size.width/2, frame.size.height-20)];
    [path addLineToPoint:CGPointMake(frame.size.width, frame.size.height-60)];
    [path addLineToPoint:CGPointMake(frame.size.width, frame.size.height)];
    [path closePath];

    CAShapeLayer *mask   = [CAShapeLayer layer];
    mask.path            = path.CGPath;
    mask.strokeColor     = [UIColor clearColor].CGColor;
    mask.fillColor       = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.5].CGColor;
    [imageView.layer addSublayer:mask];

Answer 2

, ImageMasking, , . Image of Layer, . Image.

Answer 3

I think this is custom UIViewinside the cell, which is created by drawing bezierPathto get the shape. UIView has color 0,0,0 and alpha 0,3-0,4 and is a sub cell.contentView. The table view has a separator as "No", and the user view is at the bottom of the cell, which gives the effect that it is used as a custom triangle shape separator.