iOS 8 MKAnnotationView rightCalloutAccessoryView misaligned

Question

I\'m still pretty new to the iOS stuff in general and found a problem while testing our App for iOS 8 compatibility. In iOS 7 everything worked fine but on iOS 8 the rightCa

Answer 1

For now, I’m hiding rightCalloutAccessoryView with

pin.rightCalloutAccessoryView.frame = CGRectZero;

and click on Annotation View still working, just no button on the right side. Tested on iOS7 and iOS8, not sure about iOS6.

Answer 2

Ugly as heck, but I did manage to find a workaround to this issue.

Set the accessory view height to a value equal to the callout view height. I used hard-coded values:

• for iOS 7 targets: 45.0 px
• for iOS 8 targets: 54.0 px

(You probably noticed the height of the default annotation callout view is bigger in iOS 8 than in iOS 7).

In your code, that would be:

- (MKAnnotationView *)viewForStation:(id<MKAnnotation>)annotation {
  static NSString *stationIdentifier = @"stao";
  MKAnnotationView *annotationView = [self.mapView dequeueReusableAnnotationViewWithIdentifier:stationIdentifier];
  if (annotationView == nil) {
      annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation 
                                                    reuseIdentifier:stationIdentifier];
      annotationView.image = [UIImage bundleImageNamed:PIN_IMAGE];
      annotationView.canShowCallout = YES;

      UIButton *detailButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];

      // N.B. In production code, you would need a more generic way to adjust 
      // height values instead of hard-coding values based on NSFoundationVersionNumber...

      CGFloat height = (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_7_1) ? 55.f : 45.f;

      detailButton.frame = CGRectMake(0.f, 0.f, 32.f, height);
      annotationView.rightCalloutAccessoryView = detailButton;
  }
  return annotationView;
}

Also, from what I've seen so far, if you specify both left and right accessory views, you would have to set both their heights to the same value to get proper alignment. Hopefully this issue will be fixed in subsequent iOS releases to avoid writing this kind of code...

Answer 3

I solved this by setting the autoresizingmask to fix the vertical bug and frame.size.width for the horizontal bug

UIButton* infoButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
[infoButton setFrame:CGRectMake(0, 0, CGRectGetWidth(infoButton.frame)+10, CGRectGetHeight(infoButton.frame))];
[infoButton setAutoresizingMask:UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleTopMargin];
[annotationView setRightCalloutAccessoryView:infoButton];

Answer 4

Hi I was having the exact same problem here is what I did to solve it:

It seems to be an issue with the Callout view having issues displaying the MKAnnotation title text when it is too long. Even from your screenshot you can see the issue only happens when the title has been truncated and the ellipsis is added. So the standard MKAnnotation is not laying out the views properly and this is a bug in iOS8.

In the mean time you could create your own custom callout by following the steps here.

I thought this was too much work for what I needed so I just trimmed the title string and added the ellipsis to preventing it from trying to do itself. (Not ideal but is a quick solution, and the text would be truncated anyway)

if (locTitle.length > 15) 
{
    locTitle = [NSString stringWithFormat:@"%@...", [locTitle substringToIndex:14]];
}

Answer 5

I got mine to work by setting my map view's delegate prior to adding the annotation and did not have to change anything in the del.

Going from the following:

    self.mapView = [[MKMapView alloc] init];
    NGAAnnotation *annotation = [[NGAAnnotation alloc] init];
    annotation.coordinate = coordinates;
    annotation.title = self.project.name;

    [self.mapView addAnnotation:annotation];
    self.mapView.delegate = self;

To:

    self.mapView = [[MKMapView alloc] init];
    NGAAnnotation *annotation = [[NGAAnnotation alloc] init];
    annotation.coordinate = coordinates;
    annotation.title = self.project.name;

    self.mapView.delegate = self;
    [self.mapView addAnnotation:annotation];

Fixed it for me. I noticed that the delegate method gets called when the annotation is added so if the delegate is not set prior to you adding the annotation it will not get called.

Answer 6

In Swift 3:

let infoButton = UIButton(type: .detailDisclosure)
annotationView.rightCalloutAccessoryView = infoButton