在顶部创建带三角形的UIView

Question

在我的应用程序中，我目前正在使用以下图片，但是，我希望使用UIView以编程方式创建它，以便我可以对其进行更多控制。

我尝试了以下但未能达到预期效果：https://stackoverflow.com/a/4444039/2654425

使用像我这样的.pngs或者以编程方式创建所说的视图也是更优化（性能明智而不是时间）？

Answer 1

我在UITableViewCell s中的聊天式气泡做了类似的事情。

这是我用来实现效果的代码。您可以轻松地根据您的需求调整UIBezierPath：

- (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];

}