StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think that <code>resizableImageWithCapInsets:</code> will be pretty useful for you</p> <p>Example:</p> <pre><code>UIImage *image = [[UIImage imageNamed:@"buttonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0,10.0,5.0,10.0)]; [self.yourButton setBackgroundImage:image forState:UIControlStateNormal]; </code></pre> <p>I wrote example with button because it's a common case of using this method. Just play with caps values.</p> <p>HTH!</p> <p><strong>EDIT:</strong></p> <p>Thought about this problem and wrote small example. I understood that <code>resizableImageWithCapInsets:</code> can save only corners of image in case we use two dimension scale.</p> <p>I see 2 ways:</p> <ol> <li>Use two controls: one for balloon and one for arrow with proper images</li> <li>Render image for this one control from two images</li> </ol> <p>I decided to realize second one. Pass ballonView.frame as argument here:</p> <pre><code>- (UIImage *)balloonImageWithRect:(CGRect)rect{ //create two images, ballon image with cap corners UIImage *ballonImage = [[UIImage imageNamed:@"balloon"] resizableImageWithCapInsets:UIEdgeInsetsMake(IMAGE_CAP_INSET_TOP, IMAGE_CAP_INSET_LEFT, IMAGE_CAP_INSET_BOTTOM, IMAGE_CAP_INSET_RIGHT) resizingMode:UIImageResizingModeStretch]; UIImage *arrowImage = [UIImage imageNamed:@"arrow"]; //drawing area CGSize newSize = rect.size; UIGraphicsBeginImageContext(newSize); //leave some space for arrow at the bottom [ballonImage drawInRect:CGRectMake(0, 0, newSize.width, newSize.height - arrowImage.size.height)]; //draw arrow at the bottom [arrowImage drawInRect:CGRectMake((newSize.width - arrowImage.size.width)/2, newSize.height - arrowImage.size.height, arrowImage.size.width, arrowImage.size.height)]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } </code></pre> <p>Then we just set this image to our ballonView.</p> <p>Also I leave gist with full code of that ViewController with random sizes of that balloon: <a href="https://gist.github.com/AlloyDev/7910637" rel="nofollow noreferrer">https://gist.github.com/AlloyDev/7910637</a></p> <p>Also you can use that two images:</p> <p><img src="https://i.stack.imgur.com/pQkxk.png" alt="balloon image"> <img src="https://i.stack.imgur.com/luRsZ.png" alt="arrow image"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload