How do I draw resizable UIImage in code like this?

Question

I want to use custom background image for UISegmentedControl like "Find My Friends". Here's how their resizable images look like:

source http://feedzr.com/source.png source http://feedzr.com/inwork.png

How do I create that complex shadow effect in Core Graphics?

EDIT

The bottom image is just how the above looks like when working with a leather background in a real UISegmentedControl.There're lot's of effects in the resizable image like: bottom gloss, top inner shadow and partial gradient from top to bottom.

I just can't see how & what effects are being used in this image. I'm not asking how to use UIEdgeInsets.

Do you mean the shine effect that starts partially over the 'Everywhere' segment and beyond? — Andy Bowskill, Sep 05 '12 at 13:29
No. What I want to draw is the the above image. The bottom image is just what the above looks like when working with a leather background. Like bottom gloss, top inner shadow, and partial gradient from top to bottom, I just can't see how & what effects are being used in this image. — Jay Zhao, Sep 05 '12 at 13:34
There aren't any "effects", those images were most likely made in Photoshop by a designer. — Bartosz Ciechanowski, Sep 06 '12 at 13:47

score 2 · Answer 1 · edited May 23 '17 at 10:29

These are just 2 images. One with the shadow one without…

You have to create these Images with CapInsets to make them resizable

For example

UIImage *buttonImage = [[UIImage imageNamed:@"yourImage"]  
   resizableImageWithCapInsets:UIEdgeInsetsMake(1, 11, 0, 20)];

To know how UIEdgeInsets work read: How does UIEdgeInsetsMake work?

Or in the Apple Doc:

UIEdgeInsetsMake
Creates an edge inset for a button or view.

UIEdgeInsets UIEdgeInsetsMake (
   CGFloat top,
   CGFloat left,
   CGFloat bottom,
   CGFloat right
);
Parameters
top
The inset at the top of an object.
left
The inset on the left of an object
bottom
The inset on the bottom of an object.
right
The inset on the right of an object.
Return Value
An inset for a button or view

Discussion
An inset is a margin around the drawing rectangle where each side (left, right, top, and bottom) can have a different value.

Availability
Available in iOS 2.0 and later.
See Also

http://developer.apple.com/library/ios/#documentation/uikit/reference/UIKitFunctionReference/Reference/reference.html

Sorry that I didn't describe my question clearly. I edited it. Please have a look at the EDIT part, thank you @lukaswelte — Jay Zhao, Sep 05 '12 at 13:39

How do I draw resizable UIImage in code like this?

1 Answers1