CODEWITHSUNDEEP
iosuiview
DevC
DevC

Reputation: 7022

Create UIView with triangle on top

In my app im currently using the following image, however, going forward I would like to create it programatically using a UIView so I can have more control over it.enter image description here

I have tried the following but could not achieve the desired result: https://stackoverflow.com/a/4444039/2654425

Also is it more optimal (performance wise not time wise) to use .pngs like I am doing or programmatically create said views?

Upvotes: 0

Views: 687

Answers (1)

mbm29414
mbm29414

Reputation: 11598

I did a similar thing with chat-style bubbles in UITableViewCells.

Here's the code I used to achieve the effect. You could easily adapt UIBezierPath to your needs:

- (void)drawBubbleForRect:(CGRect)rect {

    CGRect bubbleRect       = // Get your rect somehow, or just use rect

    // The size of the "blip" in the side of the chat bubble (which points up for this bubble)
    CGFloat blipWidth       = 11.0f;
    CGFloat blipHeight      = 7.0f;
    CGFloat blipLeft        = CGRectGetMinX(bubbleRect) + blipWidth;
    CGFloat blipMiddle      = blipLeft + (blipWidth / 2.0f);
    CGFloat blipRight       = blipLeft + blipWidth;
    CGFloat blipBottom      = CGRectGetMinY(bubbleRect);
    CGFloat blipTop         = blipBottom - blipHeight;
    CGFloat cornerRadius    = 3.0f;

    UIBezierPath *path      = [UIBezierPath bezierPath];
    [path moveToPoint:      CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius,   blipBottom)];
    [path addLineToPoint:   CGPointMake(blipLeft,                                   blipBottom)];
    [path addLineToPoint:   CGPointMake(blipMiddle,                                 blipTop)];
    [path addLineToPoint:   CGPointMake(blipRight,                                  blipBottom)];
    [path addLineToPoint:   CGPointMake(CGRectGetMaxX(bubbleRect) - cornerRadius,   blipBottom)];
    [path addArcWithCenter: CGPointMake(CGRectGetMaxX(bubbleRect) - cornerRadius,   blipBottom + cornerRadius)                  radius:cornerRadius startAngle:(3 * M_PI / 2)   endAngle:0              clockwise:YES];
    [path addLineToPoint:   CGPointMake(CGRectGetMaxX(bubbleRect),                  CGRectGetMaxY(bubbleRect) - cornerRadius)];
    [path addArcWithCenter: CGPointMake(CGRectGetMaxX(bubbleRect) - cornerRadius,   CGRectGetMaxY(bubbleRect) - cornerRadius)   radius:cornerRadius startAngle:0                endAngle:(M_PI / 2)     clockwise:YES];
    [path addLineToPoint:   CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius,   CGRectGetMaxY(bubbleRect))];
    [path addArcWithCenter: CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius,   CGRectGetMaxY(bubbleRect) - cornerRadius)   radius:cornerRadius startAngle:(M_PI / 2)       endAngle:M_PI           clockwise:YES];
    [path addLineToPoint:   CGPointMake(CGRectGetMinX(bubbleRect),                  CGRectGetMinY(bubbleRect) + cornerRadius)];
    [path addArcWithCenter: CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius,   CGRectGetMinY(bubbleRect) + cornerRadius)   radius:cornerRadius startAngle:M_PI             endAngle:(3 * M_PI / 2) clockwise:YES];

    [someColor setFill];
    [path fill];

}

Upvotes: 1

Related Questions