在矩形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];

- RonoKim

---

问题不够清晰，请添加更多信息。 - casillas

基本上我想让我的 UIView 在底部有一个三角形的尖端。 - RonoKim

这是一个可能有帮助的链接：https://dev59.com/010a5IYBdhLWcg3wJl2o - kps2501

使用MKMapView注释：https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/LocationAwarenessPG/AnnotatingMaps/AnnotatingMaps.html - koen

为了将来的参考，请尝试使用https://www.paintcodeapp.com，这是一个生成绘制自定义视图代码的绝佳工具。 - Zuzana Paulis

Answer 1

你可以尝试使用 UIImageView，然后确保在导入时启用切片功能，这样如果你更改视图，图像将会正确缩放。

显然，你可能遇到了 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

使用贝塞尔路径的参考：参考链接

- Danilo Gomes

Answer 2

Objective c 代码

UIView *balloonView  =  [[UIView alloc] initWithFrame:CGRectMake(10,  85, 200, 250)];
balloonView.backgroundColor = [UIColor clearColor];

UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(0, 0)];
[trianglePath addLineToPoint:CGPointMake(200.0f,0.0f)];
[trianglePath addLineToPoint:CGPointMake(200.0f,200.0f)];

//Draw Line
[trianglePath addLineToPoint:CGPointMake(120.0f,200.0f)];
[trianglePath addLineToPoint:CGPointMake(100.0f,250.0f)];
[trianglePath addLineToPoint:CGPointMake(80.0f,200.0f)];

[trianglePath addLineToPoint:CGPointMake(0.0f,200.0f)];

CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer];
triangleMaskLayer.fillColor = [UIColor blueColor].CGColor;
[triangleMaskLayer setPath:trianglePath.CGPath];

[balloonView.layer addSublayer:triangleMaskLayer];

[self.view addSubview:balloonView];

- RonoKim