34

I got texture, which really shorter, than my UIButton.

I got this texture:

enter image description here

And i should create this button:

enter image description here

How should i stretch (not tile), this texture? Stretching in horizontal direction

Thnx

DrummerB
  • 39,814
  • 12
  • 105
  • 142
Eugene Trapeznikov
  • 3,220
  • 6
  • 47
  • 74

5 Answers5

69

From the example images you provided I'm pretty sure you're looking for UIImage's resizableImageWithCapInsets:

UIImage *originalImage = [UIImage imageNamed:@"myImage.png"];
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
UIImage *stretchableImage = [originalImage resizableImageWithCapInsets:insets];
[myButton setBackgroundImage:stretchableImage forState:UIControlStateNormal];
// the image will be stretched to fill the button, if you resize it.

The values in the UIEdgeInsets struct determine the margins you don't want to be stretched. Your left and right values could be about this wide:

enter image description here

The top and bottom values can be either 0 (if you don't want to resize the button vertically), or probably half of the total height.

DrummerB
  • 39,814
  • 12
  • 105
  • 142
  • resizableImageWithCapInsets available in iOS 5.0 and later. do you know somethinf for iOS 4.3? – Eugene Trapeznikov Oct 04 '12 at 03:13
  • 3
    Probably not the answer you wanted, but the last estimate I saw was that 90% of all iPhones are running at least iOS 5.0. iOS6 already had 30% penetration after 8 days. Just sayin', you might consider changing your target rather than trying to shoe-horn a solution into 4.3. – memmons Oct 30 '12 at 18:57
  • 3
    @drummerb You should be using `setBackgroundImage:forState` instead of `setImage:forState`. – memmons Oct 30 '12 at 18:59
  • 1
    Here's a little tool I wrote that might help: https://www.cocoacontrols.com/controls/thecapper – Stavash Dec 04 '13 at 11:29
  • This created some of the strangest behaviors I've ever seen. – ScottyBlades Sep 28 '18 at 05:08
38

With Xcode 6 (and iOS7+ target) you can use slicing editor when working with images assets. Toggle slicing mode with Editor -> Show Slicing menu or press Show Slicing button when select specific image with editor (showed below).

Show Slicing button

Then you can select image for specific display scale and drag rules or edit insets values manually.

Rules

After that you can select this image in Interface Builder for UIButton Background Image (IB button's representation could look bad, but it should be OK when running).

My buttons look well (running iOS 7.1 simulator and iOS 8 device).

enter image description here

This Apple doc link could be helpful.

Anton Gaenko
  • 8,929
  • 6
  • 44
  • 39
3

By not tiling, I assume you can thus not use 

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

The way to do what you want is to use:

UIGraphicsBeginImageContextWithOptions(newSize, NO, 0); // should be proportionally larger
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawImage(context, (CGRect){{0,0}, newSize}, [yourImage CGImage]);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
David H
  • 40,852
  • 12
  • 92
  • 138
  • 1
    Well, you sort of changed your question after I responded, so @DrummerB provided the answer I would have given you, but then he gave you a really nice image of how to define the caps! I just gave him a +1 primarily for the image that shows you exactly how to do it! – David H Sep 27 '12 at 16:52
1

Use stretchableImageWithLeftCapWidth:topCapHeight: method.

Refer: https://github.com/boctor/idev-recipes/tree/master/StretchableImages

Amar
  • 13,202
  • 7
  • 53
  • 71
jki
  • 4,617
  • 1
  • 34
  • 29
1

Or using Stretchable Images:

UIImage* imgbkg =[[UIImage imageNamed: @"my_bkg_image.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:10];

[_button setBackgroundImage: imgbkg forState: UIControlStateNormal];

Use 0 if you don't want to stretch certain side.

htafoya
  • 18,261
  • 11
  • 80
  • 104