Is it possible to have custom background fragments vertically stretch #36

MattKiazyk opened this Issue Mar 20, 2013 · 8 comments

3 participants


Custom background works good with the default title/subtitle, but not when you have custom contentView

What am I doing wrong - or is this not supported?




Hi Matt,

You should be able to draw your own background at any height. Is this "purple" background you're using a set of images, or is it drawn in -drawRect?



It's a set of images (based on your cut images). I've updated the systemBackgroundView code to use my images as well as updated the initWithFrame inside SMCalloutImageBackgroundView to use my width/height

  • (SMCalloutBackgroundView *)systemBackgroundView { SMCalloutImageBackgroundView *background = [SMCalloutImageBackgroundView new]; background.leftCapImage =[UIImage imageNamed:@"vv_map_popup_LeftCap"]; background.rightCapImage =[UIImage imageNamed:@"vv_map_popup_RightCap"]; background.topAnchorImage =[UIImage imageNamed:@"vv_map_popup_TopAnchor"]; background.bottomAnchorImage = [UIImage imageNamed:@"vv_map_popup_BottomAnchor"]; background.backgroundImage =[UIImage imageNamed:@"vv_map_popup_Background"]; return background; }

I then try to set the content View from your example

// custom view to be used in our callout
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 150)];
customView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.5];
customView.layer.borderColor = [UIColor colorWithWhite:0 alpha:0.6].CGColor;
customView.layer.borderWidth = 1;
customView.layer.cornerRadius = 4;

// if you provide a custom view for the callout content, the title and subtitle will not be displayed
calloutView.contentView = customView;
calloutView.backgroundView = [SMCalloutBackgroundView systemBackgroundView]; 

Gotcha. So you'd like to use prerendered images but also have the height be adjustable. So you could do this by loading your images using -stretchableImageWithLeftCapWidth:TopCapHeight: and they could be stretched vertically that way; is that what you were thinking?


That's exactly what I was thinking!


OK right now the callout won't attempt to stretch images but I think it would be better if it did. Let me make a quick patch and commit it.


That would be awesome if you could provide a patch. I think it will be beneficial for others too!

@nfarina nfarina added a commit that closed this issue Mar 20, 2013
@nfarina Support stretchable-height image-based backgrounds
- SMCalloutImageBackgroundView now attempts to resize its images to fit the callout's height.
- System graphics are now loaded as stretchable with sane defaults, even though they weren't really designed to be stretched it works very well (except for the gloss point not being in the middle).
- Closes #36
@nfarina nfarina closed this in 0fd8fdb Mar 20, 2013

OK give that a shot and let me know how it goes - if you load your images using stretchable… then it should all work as expected!


Hallo Guys,
this is a great work you made. Thank you.

Nick, I am trying to use my own graphic as a callout background, following your cut images. I tried to up-date the SMCalloutImageBackgroundView and SMCalloutBackgroundView in my code similar the way Matt did it, but I do not get any change at the screen. I figured it out, that I should use generated graphic values. I tried to do it, using "PaintCode" as you recommended, but I am unable to generate any of them with the trial version of the software. Is there any other way to achieve that? I have no experience in this. Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment