UIImageView as callout's leftCalloutAccessoryView automatically shifts top-left corner

Question

It works great on iOS 7 but UIImageView's position shifts on iO8 like images below. Also rightCalloutAccessoryView position shifts top-right corner.

Can anybody help?

Cheers.

In iOS 7

iOS 7

In iOS 8

iOS8

-(void)mapView:(MKMapView*)mapView didSelectAnnotationView:(MKAnnotationView*)view {

if(![view.annotation isKindOfClass:[MKUserLocation class]]) {

    UBAnnotation *selectedAnnotation = view.annotation;

    NSURL * imageUrlAtIndex = [NSURL URLWithString:[[self.objects objectAtIndex:selectedAnnotation.idx] ad_thumbImageUrl]];


    UIImageView * leftCalloutView = [[UIImageView alloc] initWithFrame:CGRectMake(2, 2, 40, 40)];
    [leftCalloutView setImageWithURL:imageUrlAtIndex];
    leftCalloutView.layer.masksToBounds = YES;
    leftCalloutView.layer.cornerRadius = 6;

    view.leftCalloutAccessoryView = leftCalloutView;

}

}

-(MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id ) annotation {

MKPinAnnotationView *annView=[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"currentloc"];

if ([annotation isKindOfClass:[MKUserLocation class]]) {
    return nil;
} else {
    annView.image = [UIImage imageNamed:@"pin"];

    annView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    annView.rightCalloutAccessoryView.tintColor = [UBColor ubGreenColor];
    annView.animatesDrop= NO;
    annView.canShowCallout = YES;

}

return annView;

}

score 6 · Accepted Answer · answered Sep 21 '14 at 10:37

6

I solved it!

It's all about titleLabel's string length. If the string length over 20-25 character, left and right accessory view shifts up.

First, I trimmed the string that shown on title label or subtitle label. After, concatenate "..." as string at the end of the string.

Solution is a little bit hack, but it works like charm.

answered Sep 21 '14 at 10:37

Gokhan Gultekin

291
5
15

2

It sounds like bug in iOS 8 if needs to fix it like that. – Ramis Oct 12 '14 at 14:50
2

The `leftCalloutAccessoryView` has autolayout set up such that its left margin and top margin are the same. And it's vertically centered with a priority of `250`. However, the label's compression resistance priority is `750`. So if the label has to truncate, it will push the left callout view left, which makes it shift upwards as well. – Lily Ballard Feb 18 '15 at 00:37

score 0 · Answer 2 · answered Oct 12 '14 at 17:02

I made fix like this. Needs to polish the code, but for me it works.

- (UIView*)rightCalloutAccessoryView {
    UIButton* rightButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    return [self parentViewForView:rightButton];
}

- (UIView*)parentViewForView:(UIView*)view {
#ifdef __IPHONE_8_0
    CGRect rr = view.frame;
    rr.origin.x = 2.0f;
    rr.origin.y = (64.0f - rr.size.height ) / 2.0f;
    view.frame = rr;
    UIView *result = [[UIView alloc] initWithFrame:CGRectMake(0, 0, rr.size.width + 4.0f, 64.0f)];
    [result addSubview:view];
    return result;
#else
    return view;
#endif
}

score 0 · Answer 3 · answered Dec 14 '14 at 08:54

If you want to customize the leftCalloutAccessoryView be implemented an customizedView that you have to refine the width been under 225.0f ( the better setup is 220.0f ) on iPhone 4, 4S, 5, 5+.

for example :

UIView *_customContentView    = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 225.0f, 38.0f)];
view.leftCalloutAccessoryView = _customContentView;

That's my solved experience.

UIImageView as callout's leftCalloutAccessoryView automatically shifts top-left corner

3 Answers3