Peter
Peter

Reputation: 1878

UIView bottom egde pattern

I would like to add a shark tooth/triangle/pointy pattern to the bottom edge of my UIView. Something like this:

enter image description here

Now is this possible with just code? And how?

Upvotes: 0

Views: 62

Answers (1)

DonMag
DonMag

Reputation: 77638

This should get you on your way:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIBezierPath *pth = [UIBezierPath bezierPath];

    CGFloat w = 240.0;
    CGFloat h = 200.0;

    CGPoint p = CGPointZero;

    // start at top-left
    [pth moveToPoint:p];

    // line to top-right
    p.x = w;
    [pth addLineToPoint:p];

    // line to bottom-right
    p.y = h;
    [pth addLineToPoint:p];

    // line to 40 left, 40 up
    p.x -= 40;
    p.y -= 40;
    [pth addLineToPoint:p];

    // line to 40 left, 40 down (back to bottom)
    p.x -= 40;
    p.y += 40;
    [pth addLineToPoint:p];

    // line to 40 left, 40 up
    p.x -= 40;
    p.y -= 40;
    [pth addLineToPoint:p];

    // line to 40 left, 40 down (back to bottom)
    p.x -= 40;
    p.y += 40;
    [pth addLineToPoint:p];

    // line to 40 left, 40 up
    p.x -= 40;
    p.y -= 40;
    [pth addLineToPoint:p];

    // line to 40 left, 40 down (back to bottom)
    p.x -= 40;
    p.y += 40;
    [pth addLineToPoint:p];

    // line to starting point - top-left
    [pth closePath];

    // 240 x 200 rectangle at 40,40
    CGRect r = CGRectMake(40, 40, w, h);

    // create a UIView
    UIView *v = [[UIView alloc] initWithFrame:r];
    v.backgroundColor = [UIColor redColor];

    // create a CAShapeLayer
    CAShapeLayer *maskShape = [CAShapeLayer layer];

    // add the path to the CAShapeLayer
    maskShape.path = pth.CGPath;

    // set the view's layer mask to the CAShapeLayer
    v.layer.mask = maskShape;

    // add the masked subview to the view
    [self.view addSubview:v];

}

Upvotes: 3

Related Questions