カスタムピン注釈ビューの作成方法

Question

地図があります。フードトラックのリストが表示されています。annotationが選択されたときに、下に示すようなカスタムコールアウトを実装したいと思います。現在、タイトルとサブタイトルで実装された標準アノテーションコールアウトを使用しています。

私はいくつかの読書をしており、カスタム.xibファイルが必要だと思っていますが、私は最近iOS向けに開発を開始したので、これについて実際には分かりません。このカスタムポップアップを作成するにはどうしたらいいですか？クリックしたときにナビゲーションアクションを実行するにはどうすればよいですか？

ありがとうございます！

Answer 1

ビューをポップアップ表示していますが、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

独自のビューがfalseにcanShowCalloutプロパティを設定し表示するためにMKMapViewDelegateのviewForAnnotationメソッドを使用してもMKAnnotationViewのimage porpertyを設定する必要があり、ピン画像を変更することが第一。

今

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; 
} 

注：このポップアップのタップイベントを処理したい場合はは今、あなたがUITapGestureRecognizerを使用することができます。