Custom font for MKAnnotationView Callout

Question

Fortunately, the standard callout view for an MKAnnotationView meets our needs - title, subtitle, leftCalloutAccessoryView, and rightCalloutAccessoryView.

Unfortunately, we use custom fonts in our app, and would like to extend those custom fonts to these callouts.

MKAnnotationView provides no standard way to accomplish this.

How can I use a custom font in an MKAnnotation's callout view?

Answer 1

Since I needed the Swift version - here it is. Also, you have to call setNeedsLayout() on didAddSubview() because otherwise when you deselect and reselect the annotation layoutSubviews() is not called and the callout has its old font.

// elsewhere, in a category on UIView.
// thanks to this answer: http://stackoverflow.com/a/25877372/607876

typealias ViewBlock = (_ view: UIView) -> Bool

extension UIView {
  func loopViewHierarchy(block: ViewBlock?) {

    if block?(self) ?? true {
      for subview in subviews {
        subview.loopViewHierarchy(block: block)
      }
    }
  }
}

// then, in your MKAnnotationView subclass

class CustomFontAnnotationView: MKAnnotationView {

  override func didAddSubview(_ subview: UIView) {
    if isSelected {
      setNeedsLayout()
    }
  }

  override func layoutSubviews() {

    // MKAnnotationViews only have subviews if they've been selected.
    // short-circuit if there's nothing to loop over

    if !isSelected {
      return
    }

    loopViewHierarchy { (view: UIView) -> Bool in
      if let label = view as? UILabel {
        label.font = labelFont
        return false
      }
      return true
    }
  }
}

Answer 2

If all you need is a custom font, you need to subclass MKAnnotationView, but you don't have to recreate all the behavior that you get for free with a standard MKAnnotationView. It's actually pretty easy.

1. Subclass MKAnnotationView
2. Override -layoutSubviews
3. When an MKAnnotationView is selected, the callout is added as a subview. Therefore, we can recursively loop through our subclass' subviews and find the UILabel we wish to modify.
4. That's it!

The only drawback with this method is that you can see the callout adjust it's size if your font is smaller or larger than the standard system font it was expecting. It'd be great if all the adjustments were made before being presented to the user.

// elsewhere, in a category on UIView.
// thanks to this answer: http://stackoverflow.com/a/25877372/607876
//
typedef void(^ViewBlock)(UIView *view, BOOL *stop);

@interface UIView (Helpers)
- (void)loopViewHierarchy:(ViewBlock)block;
@end

@implementation UIView (Helpers)

- (void)loopViewHierarchy:(ViewBlock)block {
    BOOL stop = false;

    if (block) {
        block(self, &stop);
    }

    if (!stop) {
        for (UIView* subview in self.subviews) {
            [subview loopViewHierarchy:block];
        }
    }
}

@end

// then, in your MKAnnotationView subclass
//
@implementation CustomFontAnnotationView
- (void)layoutSubviews
{
    // MKAnnotationViews only have subviews if they've been selected.
    // short-circuit if there's nothing to loop over
    if (!self.selected) {
        return;
    }

    [self loopViewHierarchy:^(UIView *view, BOOL *stop) {
        if ([view isKindOfClass:[UILabel class]]) {
            *stop = true;
            ((UILabel *)view).font = {custom_font_name};
        }
    }];
}
@end

I inspected the view tree by first creating my MKAnnotationView subclass and setting a breakpoint in my overridden -layoutSubviews. In the debugger, I then issued po [self recursiveDescription]. Make sure to turn the breakpoint off when your map first loads, because as mentioned up above, MKAnnotationViews don't have any subviews until their selected. Before you make a selection, enable the breakpoint, tap your pin, break, and print out the view tree. You'll see a UILabel at the very bottom of the tree.