It looks like the popover itself is fine, but the problem is the arrow. Can't you get the arrow as a separate image view? The rest seems to be resizing correctly. Cap Insets basically allow you to keep the corners the same. In your example, the corners are indeed working as expected, but as the arrow section is central it's stretching the couple of pixels that lie in between the cap insets.
–
Dan HanlyJun 8 '12 at 12:48

Well I extracted this image from the iOS Simulator so it looks like Apple works only with one PNG and not 2. So I wanted to know if there's a way to do so.
–
DabrutJun 8 '12 at 12:50

The way Apple does this is to call resizableImageWithCapInsets multiple times. Once for the left side (between the rounded corner and the beginning of the arrow), then again for the right side.
–
FreeAsInBeerDec 3 '13 at 17:02

1 Answer
1

I think your issue is that the edge insets are set incorrectly. What you should try to do is move the left and right insets to sit out side of the arrow area.

At the moment you have given the stretchable area a width of 0, in the center of the image, so it is stretching the arrow in the middle at a single point. The top and bottom insets look okay so what you'll be aiming for is something like this:

It's not exactly what I want. Because doing so, the arrow won't be centered.
–
DabrutJun 8 '12 at 13:00

@Dave, the arrow on popovers isn't always centered either - it depends where it is presented from.
–
BrianJun 8 '12 at 13:08

@Brian Correct but if my problem is the centered case
–
DabrutJun 8 '12 at 13:10

@Dave Hmm. Just had a look myself and you're right. The docs certainly suggest to me that my idea should work (a 9-Patch in Android works in a similar way, it might be worth looking in to this iOS library that duplicates the functionality : github.com/tortuga22/Tortuga22-NinePatch). Short of that you could do as somebody else suggested and break the image up into a few components.
–
WeaverfishJun 8 '12 at 13:22