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

Question

我有一张地图，我正在填写一份食品卡车列表，当我选择from django.views.generic import ListView class HomePageView(ListView): """Home Page with list of trainings""" template_name = 'club/training_list.html' context_object_name = "trainings" def get_queryset(self): now = datetime.datetime.now() return Trainings.active.by_date(now) 时，我想实现如下所示的自定义标注。目前，我使用标题和副标题实现了标准注释标注。

我已经做了一些阅读，我猜它需要一个自定义的.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方法所需的图片图片并设置MKAnnotationView canShowCallout的属性以显示您自己的视图集{{1 } {}属性到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
}

现在，使用didSelectAnnotationView的{​​{1}}方法显示您自己的观点。

MKMapViewDelegate

现在显示 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) } 的弹出式视图工具adaptivePresentationStyleForPresentationController方法。

UIPopoverPresentationControllerDelegate

注意：现在，如果您要处理此弹出窗口的点击事件，可以使用func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle { return .None; } 。