用button自定义MKAnnotation标注泡泡

我正在开发应用程序，其中用户通过GPS进行本地化，然后询问他是否位于特定位置。 为了证实这一点，标注泡沫马上提交给他，问他，如果他在特定的地方。

由于有很多类似的问题，我可以做自定义标注泡泡： 自定义标注泡泡

我的问题：button不是“可点击”我的猜测：因为这个自定义标注高于标准的标注泡泡，我不得不把它放在负面的“框架”，因此button不能被点击。 这是我的didSelectAnnotationView方法 

 - (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view { if(![view.annotation isKindOfClass:[MKUserLocation class]]) { CalloutView *calloutView = (CalloutView *)[[[NSBundle mainBundle] loadNibNamed:@"callOutView" owner:self options:nil] objectAtIndex:0]; CGRect calloutViewFrame = calloutView.frame; calloutViewFrame.origin = CGPointMake(-calloutViewFrame.size.width/2 + 15, -calloutViewFrame.size.height); calloutView.frame = calloutViewFrame; [calloutView.calloutLabel setText:[(MyLocation*)[view annotation] title]]; [calloutView.btnYes addTarget:self action:@selector(checkin) forControlEvents:UIControlEventTouchUpInside]; calloutView.userInteractionEnabled = YES; view.userInteractionEnabled = YES; [view addSubview:calloutView]; } }

CalloutView只是简单的类，有2个属性（显示地名和button名称的标签）和xib。

我一直在做这个定制的宣传泡沫几天。 我尝试使用“asynchronous解决scheme”的解决scheme，但我无法添加任何其他types的button，然后泄露button。

我的下一个尝试是find比asynchronous解决scheme更容易的东西，并将其修改为我的用法。 多数民众赞成我是如何findtochi的自定义标注 。

Tochi的自定义标注

基于他的工作，我能够自定义他的泡泡和更改我的自定义button的信息button。 然而，我的问题仍然是一样的。 为了将我的自定义标注视图放在引脚上，我必须给它一个负面的框架，所以我的button只能在最底部的5个像素点“可点击”。 看来，我不得不深入到ios默认的标注泡泡，子类化，并在那里改变标注的框架。 但是我现在真的没有希望了。

如果你们能以正确的方式给我看，或者给我build议，我会很高兴的。

有几种方法来定制标注：

  1. 最简单的方法是使用现有的右侧和左侧标注附件，并将button放入其中一个。 例如： 

     - (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation { static NSString *identifier = @"MyAnnotationView"; if ([annotation isKindOfClass:[MKUserLocation class]]) { return nil; } MKPinAnnotationView *view = (id)[mapView dequeueReusableAnnotationViewWithIdentifier:identifier]; if (view) { view.annotation = annotation; } else { view = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier]; view.canShowCallout = true; view.animatesDrop = true; view.rightCalloutAccessoryView = [self yesButton]; } return view; } - (UIButton *)yesButton { UIImage *image = [self yesButtonImage]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, image.size.width, image.size.height); // don't use auto layout [button setImage:image forState:UIControlStateNormal]; [button addTarget:self action:@selector(didTapButton:) forControlEvents:UIControlEventPrimaryActionTriggered]; return button; } - (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control { NSLog(@"%s", __PRETTY_FUNCTION__); }

    这产生：

    在这里输入图像描述

  2. 如果你真的不喜欢右边的button，那么你可以关掉配件，iOS 9提供了指定detailCalloutAccessoryView的机会，它可以用你想要的任何视图replace标注的字幕： 

     - (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation { static NSString *identifier = @"MyAnnotationView"; if ([annotation isKindOfClass:[MKUserLocation class]]) { return nil; } MKPinAnnotationView *view = (id)[mapView dequeueReusableAnnotationViewWithIdentifier:identifier]; if (view) { view.annotation = annotation; } else { view = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier]; view.canShowCallout = true; view.animatesDrop = true; } view.detailCalloutAccessoryView = [self detailViewForAnnotation:annotation]; return view; } - (UIView *)detailViewForAnnotation:(PlacemarkAnnotation *)annotation { UIView *view = [[UIView alloc] init]; view.translatesAutoresizingMaskIntoConstraints = false; UILabel *label = [[UILabel alloc] init]; label.text = annotation.placemark.name; label.font = [UIFont systemFontOfSize:20]; label.translatesAutoresizingMaskIntoConstraints = false; label.numberOfLines = 0; [view addSubview:label]; UIButton *button = [self yesButton]; [view addSubview:button]; NSDictionary *views = NSDictionaryOfVariableBindings(label, button); [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[label]|" options:0 metrics:nil views:views]]; [view addConstraint:[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label]-[button]|" options:0 metrics:nil views:views]]; return view; } - (UIButton *)yesButton { UIImage *image = [self yesButtonImage]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.translatesAutoresizingMaskIntoConstraints = false; // use auto layout in this case [button setImage:image forState:UIControlStateNormal]; [button addTarget:self action:@selector(didTapButton:) forControlEvents:UIControlEventPrimaryActionTriggered]; return button; }

    这产生：

    在这里输入图像描述

  3. 如果您确实想自己制作自定义宣传信息，“ 位置和地图编程指南”将概述所涉及的步骤：

    在iOS应用程序中，当用户点击标注视图的控件（只要控件是UIControl的后代）时，最好使用mapView:annotationView:calloutAccessoryControlTapped: delegate方法进行响应。 在你实现这个方法的时候，你可以发现标注视图标注视图的标识，以便你知道用户点击了哪个标注。 在Mac应用程序中，标注视图的视图控制器可以实现一个操作方法，该方法在用户在标注视图中单击控件时进行响应。

    当您使用自定义视图而不是标准标注时，您需要做额外的工作，以确保您的标注在用户与其交互时显示并隐藏。 以下步骤概述了创build包含button的自定义标注的过程：

    • devise一个表示自定义标注的NSView或UIView子类。 子类可能需要实现drawRect:方法来绘制自定义的内容。

    • 创build一个视图控制器，初始化标注视图并执行与该button相关的操作。

    • 在注释视图中，实现hitTest:响应位于注释视图边界之外但位于注解视图边界内的点击，如代码清单6-7所示。

    • 在注释视图中，实现setSelected:animated:在用户点击或点击时，将标注视图添加为注释视图的子视图。

    • 如果标注视图在用户select时已经可见，则setSelected:方法应该从注释视图中移除标注子视图（请参见清单6-8）。

    • 在注解视图的initWithAnnotation:方法中，将canShowCallout属性设置为NO以防止在用户select注释时地图显示标准注释。

    在Swift中， https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwift说明了如何完成标注的自定义（例如更改标注泡泡的形状，更改背景颜色等）。;

  4. 前一点概括了一个相当复杂的场景（即，您必须编写自己的代码来检测视图之外的水龙头，以便将其解除）。 如果您支持iOS 9，则可以使用popup窗口视图控制器，例如： 

     - (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation { static NSString *identifier = @"MyAnnotationView"; if ([annotation isKindOfClass:[MKUserLocation class]]) { return nil; } MKPinAnnotationView *view = (id)[mapView dequeueReusableAnnotationViewWithIdentifier:identifier]; if (view) { view.annotation = annotation; } else { view = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier]; view.canShowCallout = false; // note, we're not going to use the system callout view.animatesDrop = true; } return view; } - (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view { PopoverController *controller = [self.storyboard instantiateViewControllerWithIdentifier:@"AnnotationPopover"]; controller.modalPresentationStyle = UIModalPresentationPopover; controller.popoverPresentationController.sourceView = view; // adjust sourceRect so it's centered over the annotation CGRect sourceRect = CGRectZero; sourceRect.origin.x += [mapView convertCoordinate:view.annotation.coordinate toPointToView:mapView].x - view.frame.origin.x; sourceRect.size.height = view.frame.size.height; controller.popoverPresentationController.sourceRect = sourceRect; controller.annotation = view.annotation; [self presentViewController:controller animated:TRUE completion:nil]; [mapView deselectAnnotation:view.annotation animated:true]; // deselect the annotation so that when we dismiss the popover, the annotation won't still be selected }

我最终采取了不同的方法。 我尝试了其他的，但他们似乎臃肿，我不想添加更多的类或依靠MKMapViewDelegate处理交互。

我反而重写setSelected：我的MKAnnotationView子类的animation。 诀窍就是扩展annotationView的边界，使其在选中之后完全包含调出视图，并在取消选中后将其返回到正常状态。 这将允许您的自定义调用接受MKAnnotationView的原始界限以外的触摸和交互。

这是一个修剪下来的代码示例，让任何人开始： 

 #define kAnnotationCalloutBoxTag 787801 #define kAnnotationCalloutArrowTag 787802 #define kAnnotationTempImageViewTag 787803 -(void)setSelected:(BOOL)selected animated:(BOOL)animated { if (selected == self.selected) { NSLog(@"annotation already selected, abort!"); return; } if (selected) { self.image = nil; //hide default image otherwise it takes the shape of the entire bounds UIView* calloutBox = [self newCustomCallout]; float imgW = [self unselectedSize].width; float imgH = [self unselectedSize].height; float arrowW = 20; float arrowH = 12; //Annotation frames wrap a center coordinate, in this instance we want the call out box to fall under the //central coordinate, so we need to adjust the height to be double what the callout box height would be //making the height *2, this is to make sure the callout view is inside of it. self.bounds = CGRectMake(0, 0, calloutBox.frame.size.width, calloutBox.frame.size.height*2 + arrowH*2 + imgH); CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2); UIView* imgView = [[UIImageView alloc] initWithImage:icon]; [imgView setFrame:CGRectMake(center.x - imgW/2, center.y-imgH/2, imgW, imgH)]; imgView.tag = kAnnotationTempImageViewTag; [self addSubview:imgView]; UIView* triangle = [self newTriangleViewWithFrame:CGRectMake(center.x-arrowW/2, center.y+imgH/2, arrowW, arrowH)]; triangle.tag = kAnnotationCalloutArrowTag; [self addSubview:triangle]; [calloutBox setFrame:CGRectMake(0, center.y+imgH/2+arrowH, calloutBox.width, calloutBox.height)]; calloutBox.tag = kAnnotationCalloutBoxTag; [self addSubview:calloutBox]; } else { //return things back to normal UIView* v = [self viewWithTag:kAnnotationCalloutBoxTag]; [v removeFromSuperview]; v = [self viewWithTag:kAnnotationCalloutArrowTag]; [v removeFromSuperview]; v = [self viewWithTag:kAnnotationTempImageViewTag]; [v removeFromSuperview]; self.image = icon; self.bounds = CGRectMake(0, 0, [self unselectedSize].width, [self unselectedSize].height); } [super setSelected:selected animated:animated]; } -(CGSize)unselectedSize { return CGSizeMake(20,20); } -(UIView*)newCustomCallout { //create your own custom call out view UIView* v = [[UIView alloc] initWithFrame:CGRectMake(0,0,250,250)]; v.backgroundColor = [UIColor greenColor]; return v; } -(UIView*)newTriangleWithFrame:(CGRect)frame { //create your own triangle UIImageView* v = [[UIImageView alloc] initWithFrame:frame]; [v setImage:[UIImage imageNamed:@"trianglePointedUp.png"]]; return v; } 
 (void)mapView:(MKMapView *)mapViewIn didSelectAnnotationView:(MKAnnotationView *)view { if(![view.annotation isKindOfClass:[MKUserLocation class]]) { CustomeCalloutViewController *calloutView = [[CustomeCalloutViewController alloc]initWithNibName:@"CustomeCalloutViewController" bundle:nil]; [calloutView setPopinTransitionStyle:BKTPopinTransitionStyleSlide]; [calloutView setPopinTransitionDirection:BKTPopinTransitionDirectionTop]; [self presentPopinController:calloutView animated:YES completion:^{ NSLog(@"Popin presented !"); }]; [mapView deselectAnnotation:view.annotation animated:true]; } }
Interesting Posts