ios - 在矩形 UIView 的底部添加三角形提示

Question

我需要在我的 UIView 的中间添加一个提示。 我想要实现的是以编程方式实现的自定义谷歌地图标记，如下图所示。

到目前为止，我的代码只是绘制一个没有三角形尖端的矩形 uiview。

编辑

我希望我的 UIView 在底部有一个三角形的尖端

UIView *infoView  =  [[UIView alloc] initWithFrame:CGRectMake(10, 85, screenWidth *0.25, 75)];
infoView.backgroundColor = [UIColor blueColor];
CGRect currentFrame = infoView.frame;


float strokeWidth = 3.0;
float HEIGHTOFPOPUPTRIANGLE = 75;
float WIDTHOFPOPUPTRIANGLE = screenWidth*0.25;
float borderRadius = 4;

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

// Draw and fill the bubble
CGContextBeginPath(context);
CGContextMoveToPoint(context, borderRadius + strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f - WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f) + 0.5f, strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) - strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, strokeWidth + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

[infoView drawRect:currentFrame];

[self.view addSubview:infoView];

Answer 1

您可以尝试 UIImageView，然后确保在导入时启用切片，这样如果您更改 View ，图像将正确缩放。

显然你可能遇到了 UIView.clipsToBounds = true 的问题

如果你想使用绘图方式，你可以试试这个。我在 Playground 上用 swift 编码...

import UIKit

var balloon = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 250))
balloon.backgroundColor = UIColor.clear


let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 200, y: 0))
path.addLine(to: CGPoint(x: 200, y: 200))

// Draw arrow
path.addLine(to: CGPoint(x: 120, y: 200))
path.addLine(to: CGPoint(x: 100, y: 250))
path.addLine(to: CGPoint(x: 80, y: 200))

path.addLine(to: CGPoint(x: 0, y: 200))
path.close()

let shape = CAShapeLayer()
//shape.backgroundColor = UIColor.blue.cgColor
shape.fillColor = UIColor.blue.cgColor
shape.path = path.cgPath
balloon.layer.addSublayer(shape)

balloon

贝塞尔路径使用引用: Ref