iOS自定义注释:注释引脚下方的视图

Question

我需要用我的自定义注释视图替换默认注释视图.

我需要做以下事情:

1. 自定义注释视图,其中嵌入了图像视图.
2. 它下面的视图,其中包含一个标签.

有关更多说明,请参阅图像:

在上面的图像中,我需要在图像中以圆形形式显示白色空间中的图像视图,接下来我还需要添加一个包含标签的视图,我可以在其上设置任何文本,如我,朋友,等等...

所以,为此,我搜索了关于堆栈溢出的问题,但没有得到我的答案.我不希望它在呼出时,我只是想在渲染地图时将其简单地作为注释.我试图为此制作一个自定义类,但不知道如何处理这个.

任何帮助将受到高度赞赏

Answer 1

您可以创建自己的注释视图:

@import MapKit;

@interface CustomAnnotationView : MKAnnotationView

@end

@interface CustomAnnotationView ()
@property (nonatomic) CGSize textSize;
@property (nonatomic) CGSize textBubbleSize;
@property (nonatomic, weak) UILabel *label;
@property (nonatomic) CGFloat lineWidth;
@property (nonatomic) CGFloat pinRadius;
@property (nonatomic) CGFloat pinHeight;

@property (nonatomic, strong) UIBezierPath *pinPath;
@property (nonatomic, strong) UIBezierPath *textBubblePath;
@end

@implementation CustomAnnotationView

- (instancetype)initWithAnnotation:(id<MKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    if (self) {
        self.lineWidth = 1.0;
        self.pinHeight = 40;
        self.pinRadius = 15;

        UILabel *label = [[UILabel alloc] init];
        label.textAlignment = NSTextAlignmentCenter;
        label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleCallout];
        label.textColor = [UIColor whiteColor];
        [self addSubview:label];
        self.label = label;

        [self adjustLabelWidth:annotation];

        self.opaque = false;
    }
    return self;
}

- (void)setAnnotation:(id<MKAnnotation>)annotation {
    [super setAnnotation:annotation];
    if (annotation) [self adjustLabelWidth:annotation];
}

- (void)adjustLabelWidth:(id<MKAnnotation>)annotation {
    NSString *title = [annotation title];
    NSDictionary *attributes = @{NSFontAttributeName : self.label.font};
    self.textSize = [title sizeWithAttributes:attributes];
    CGFloat delta = self.textSize.height * (1.0 - sinf(M_PI_4)) * 0.55;
    self.textBubbleSize = CGSizeMake(self.textSize.width + delta * 2, self.textSize.height + delta * 2);
    self.label.frame = CGRectMake(0, self.pinHeight, self.textBubbleSize.width, self.textBubbleSize.height);
    self.label.text = title;
    self.frame = CGRectMake(0, 0, self.textBubbleSize.width, self.pinHeight + self.textBubbleSize.height);
    self.centerOffset = CGPointMake(0, self.frame.size.height / 2.0 - self.pinHeight);
}

- (void)drawRect:(CGRect)rect {
    CGFloat radius = self.pinRadius - self.lineWidth / 2.0;
    CGPoint startPoint = CGPointMake(self.textBubbleSize.width / 2.0, self.pinHeight);
    CGPoint center = CGPointMake(self.textBubbleSize.width / 2, self.pinRadius);
    CGPoint nextPoint;

    // pin

    self.pinPath = [UIBezierPath bezierPath];
    [self.pinPath moveToPoint:startPoint];
    nextPoint = CGPointMake(self.textBubbleSize.width / 2 - radius, self.pinRadius);
    [self.pinPath addCurveToPoint:nextPoint
                    controlPoint1:CGPointMake(startPoint.x, startPoint.y - (startPoint.y - nextPoint.y) / 2.0)
                    controlPoint2:CGPointMake(nextPoint.x, nextPoint.y + (startPoint.y - nextPoint.y) / 2.0)];

    [self.pinPath addArcWithCenter:center radius:radius startAngle:M_PI endAngle:0 clockwise:TRUE];
    nextPoint = startPoint;
    startPoint = self.pinPath.currentPoint;
    [self.pinPath addCurveToPoint:nextPoint
                    controlPoint1:CGPointMake(startPoint.x, startPoint.y - (startPoint.y - nextPoint.y) / 2.0)
                    controlPoint2:CGPointMake(nextPoint.x, nextPoint.y + (startPoint.y - nextPoint.y) / 2.0)];
    [[UIColor blackColor] setStroke];
    [[UIColor colorWithRed:0.0 green:0.5 blue:1.0 alpha:0.8] setFill];
    self.pinPath.lineWidth = self.lineWidth;
    [self.pinPath fill];
    [self.pinPath stroke];
    [self.pinPath closePath];

    // bubble around label

    if ([self.annotation.title length] > 0) {
        self.textBubblePath = [UIBezierPath bezierPath];
        CGRect bubbleRect = CGRectInset(CGRectMake(0, self.pinHeight, self.textBubbleSize.width, self.textBubbleSize.height), self.lineWidth / 2, self.lineWidth / 2);
        self.textBubblePath = [UIBezierPath bezierPathWithRoundedRect:bubbleRect
                                                         cornerRadius:bubbleRect.size.height / 2];
        self.textBubblePath.lineWidth = self.lineWidth;
        [self.textBubblePath fill];
        [self.textBubblePath stroke];
    } else {
        self.textBubblePath = nil;
    }

    // center white dot

    self.pinPath = [UIBezierPath bezierPathWithArcCenter:center radius:radius / 3.0 startAngle:0 endAngle:M_PI * 2.0 clockwise:TRUE];
    self.pinPath.lineWidth = self.lineWidth;
    [[UIColor whiteColor] setFill];
    [self.pinPath fill];
}

- (UIView *)hitTest:(CGPoint)point withEvent:(nullable UIEvent *)event {
    if ([self.pinPath containsPoint:point] || [self.textBubblePath containsPoint:point])
        return self;

    return nil;
}

@end

产生的结果如下:

显然,您可以根据自己的内容对其进行自定义,但它说明了基本思想:编写一个MKAnnotationView覆盖initWithAnnotation:reuseIdentifier:并实现自己的子类drawRect.