如何创建自定义引脚注释视图

Question

我有一个地图，我用食品卡车列表填充，我想在选择annotation时，我想实现如下所示的自定义标注。 目前，我使用标题和副标题实现了标准注释标注。

我读过一些书，我猜它需要一个自定义的 .xib 文件，但我对此一无所知，因为我最近才开始为 iOS 开发。 我将如何创建此自定义弹出窗口，以及如何使其在单击时执行导航操作？

谢谢！

Answer 1

似乎您需要一个自定义弹出视图，但是您不知道如何创建一个。

这里是创建类似于您发布的图片的弹出视图的示例。

这是ViewController.m代码：

#import "ViewController.h"
#import "AnnotationView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor grayColor];

AnnotationView* popUp = [[AnnotationView alloc] initWithFrame:CGRectMake(50, 100, 200, 80)];
[self.view addSubview:popUp];
}

@end

AnnotationView.m：

#import "AnnotationView.h"

@interface AnnotationView ()

@property float bottomHeight;
@property float topHeight;
@property float cornerRadius;
@property float triangleWidth;

@property UIImageView* pictureView;
@property UILabel* lbTitle;
@property UILabel* lbInfo;

@end

@implementation AnnotationView

-(id)initWithFrame:(CGRect)frame{
_bottomHeight = 20;
_topHeight = frame.size.height-_bottomHeight;
_cornerRadius = 5;
_triangleWidth = 30;

self = [super initWithFrame:frame];
self.backgroundColor = [UIColor clearColor];

self.layer.cornerRadius = _cornerRadius;
self.layer.masksToBounds = YES;

_pictureView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, _topHeight, _topHeight)];
_pictureView.image = [UIImage imageNamed:@"test.png"];
_pictureView.layer.cornerRadius = _cornerRadius;
_pictureView.layer.masksToBounds = YES;
[self addSubview:_pictureView];

float insidePadding = 10;
float lbWidth = (frame.size.width-_topHeight-2*insidePadding);

_lbTitle = [[UILabel alloc] initWithFrame:CGRectMake(_topHeight+insidePadding, 0, lbWidth, _topHeight/2)];
_lbTitle.text = @"I'm title.";
[self addSubview:_lbTitle];

_lbInfo = [[UILabel alloc] initWithFrame:CGRectMake(_topHeight+insidePadding, _topHeight/2, lbWidth, _topHeight/2)];
_lbInfo.numberOfLines = 2;
_lbInfo.font = [UIFont systemFontOfSize:10];
_lbInfo.text = @"I'm content........I'm content........";
[self addSubview:_lbInfo];

return self;
}

-(void)drawRect:(CGRect)rect{

CGContextRef con = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(con, [UIColor whiteColor].CGColor);
UIBezierPath* roundRect = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, rect.size.width, _topHeight) cornerRadius:_cornerRadius];
CGContextAddPath(con, roundRect.CGPath);
CGContextFillPath(con);

CGContextMoveToPoint(con, (rect.size.width-_triangleWidth)/2, _topHeight);
CGContextAddLineToPoint(con,(rect.size.width+_triangleWidth)/2, _topHeight);
CGContextAddLineToPoint(con,rect.size.width/2, rect.size.height);
CGContextClosePath(con);
CGContextFillPath(con);
}

@end

希望它能对您有所帮助。 任何其他问题都留在这里。

Answer 2

首先改变你需要使用图钉图像viewForAnnotation的方法MKMapViewDelegate并设置image的porperty MKAnnotationView也展现自己的看法设置canShowCallout属性为false 。

func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {
    if (annotation.isKindOfClass(MKPointAnnotation.classForCoder())) {
        var annotationView = mapView.dequeueReusableAnnotationViewWithIdentifier("AnnotationView")
        if annotationView == nil {
            annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "AnnotationView")
        }
        else {
            annotationView!.annotation = annotation
        }
        annotationView!.image = UIImage(named: "Marker")
        annotationView!.canShowCallout = false
        return annotationView
    }
    return nil
}

现在使用MKMapViewDelegate didSelectAnnotationView方法显示您自己的视图。

    func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {
    mapView.deselectAnnotation(view.annotation, animated: true)

    let viewController = self.storyboard?.instantiateViewControllerWithIdentifier("AnnotationInfoViewController") as! AnnotationInfoViewController

    //If you want to show view from XIB file you can create viewController instance like this
    //let viewController = UIViewController()
    //let myView = NSBundle.mainBundle().loadNibNamed("AnnotationInfoView", owner: self, options: nil)[0] as! AnnotationInfoView
    //viewController.view = myView

    //Pass the information that you want to show
    viewController.data = passdata

    //Set the viewController for popoverPresentationController 
    viewController.modalPresentationStyle = .Popover
    viewController.preferredContentSize = CGSize(width: viewController.view.frame.size.width, height: 80)
    viewController.popoverPresentationController!.delegate = self;
    viewController.popoverPresentationController!.permittedArrowDirections = [.Up , .Down]
    viewController.popoverPresentationController!.sourceView = view.superview!
    viewController.popoverPresentationController!.sourceRect = view.frame
    self.presentViewController(viewController, animated: true, completion: nil)
}

现在显示一个弹出视图，实现UIPopoverPresentationControllerDelegate adaptivePresentationStyleForPresentationController方法。

func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
    return .None;
}

注意：现在，如果要处理此弹出窗口的tap事件，则可以使用UITapGestureRecognizer 。

Answer 3

我所做的是创建一个UIViewController来显示注释的细节。 然后选择注释时，我将UIViewController显示为一个Popover 。

func mapView(_: MKMapView, didSelect view: MKAnnotationView) {
    view.setSelected(true, animated: true)
    if let annotation = view.annotation as? BranchAnnotation {
        showDetails(from: view, with: annotation.branch)
    }
}

private func showDetails(from view: UIView, with branch: Branch) {
    let annotationDetailsPopover = AnnotationDetaisPopover(branch: branch)
    let popOver = annotationDetailsPopover.popoverPresentationController
    popOver?.sourceView = view
    popOver?.delegate = self
    present(annotationDetailsPopover, animated: true, completion: nil)
}

这样做的好处是，除了对 UI 布局有很大的控制权外，弹出框会根据选中的注释在屏幕上的位置进行相应的显示（如果选中的注释在屏幕的边缘，则弹出框会被调整从那里显示。您可以从屏幕截图中看到）

https://i.stack.imgur.com/QUNB6.jpg

https://i.stack.imgur.com/FCRiv.jpg