iPhone stretchableImageWithLeftCapWidth only makes "D"s

Question

UIImage *aImage = [[UIImage imageNamed:@"Gray_Button.png"] stretchableImageWithLeftCapWidth:25 topCapHeight:0];

Trying to make a "glass pill button".

What does "stretch" do if the image is bigger... and the button I'm trying to use it on... is smaller?

Does the image 'stretch' and 'shrink'?

The reason I ask... is because all my images end up look like a "D" shape.

The left side is squared-off... and the right side is rounded.

What would a D-shape tell you that I'm doing wrong? Too much.. or too little... "leftCap setting"? Too large an image?

Answer 1

A stretchable image is divided into 9 parts, if both leftCapWidth and topCapHeight are nonzero.

     leftCapWidth
      <----->
      +--------------+ ^
      |     | |      | |
      |  A  | |  B   | | topCapHeight
      |-----+·+------| v
      |-----+·+------|
      |  C  | |  D   |
      |     | |      |
      +--------------+

The central parts are always 1 px in size, and this is the part that is stretched, for example:

     leftCapWidth (constant!)
      <----->
      +------------------+ ^
      |     |     |      | |
      |  A  |     |  B   | | topCapHeight (constant!)
    v |-----+ - - +------| v
    | |     .     .      |
    | |     .     .      |
    ^ |-----+ - - +------|
      |  C  |     |  D   |
      |     |     |      |
      +------------------+
            >-----<
        stretched region

To create a "glass pill button", you should fill the rounded border into the regions A, B, C and D above, and supply the radius of that pill into both the leftCapWidth and topCapHeight.

---

Also, a stretchable image is not shrinkable. If you try to use stretchable images bigger than the buttons (or whatever else) you want to apply it to, they may be rendered incorrectly (especially on older iOSes).

Answer 2

stretchableImageWithLeftCapWidth does not behave as you would expect. I suggest using UIView's contentStretch property instead to save yourself some frustration.

FYI, the way stretchableImage behaves is:

• if you shrink the image, it just clips the top and left parts of the image rather than stretching anything.
• if you expand the image, it will expand only the column of pixels just beneath the top cap and the row of pixels just right of the left cap. This works for very simple graphics but will look awkward for any graphics that have effects like shading or gloss.

contentStretch, on the other hand, behaves just as you would expect. The graphic basically gets split into 9 parts that expand AND CONTRACT the way Kenny explained.

Also, don't forget that anytime you stretch a view, its contentMode should be set to UIViewContentModeScaleToFill.