I have an image that I would like to use as the background for a UIToolBar in an iOS 5+ app. The background image changes according to actions taken on the view. The image is larger than the UIToolBar, so the image needs to be resized as a reduction rather than increasing the size.
After review of the other questions on here, as well as other research into the issue, the resolution recommended does not work. The recommendation is as follows:
UIImage *topimg = [[UIImage imageNamed:#"headerBar-Human.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[_headerBar setBackgroundImage:topimg forToolbarPosition:UIToolbarPositionTop barMetrics:UIBarMetricsDefault];
I have tried with different values in the UIEdgeInsetsMake call with no luck. The problem is that the image is not shown at all. The default blue toolbar background is shown.
If I remove the resizableImageWithCapInsets function the image will show, but only the portion of the image covered by the toolbar rect coordinates.
I have also tried creating a UIImageView, adding the image and adding it to the toolbar, but the results are the same.
Does anyone have any suggestions?
You can use this function to resize your backgroundImage :
- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize
{
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
I suggest to call this function with your _headerBar.frame.size as second parameter.
Related
please, help me to find some solution to the following problem. IOS, Xcode.
I have UIBarItem component - the button that switches languages on the toolbar. The bar has function initeWithImage(UIImage). The problem is when i am trying to scale the image it becomes filled with color...The picture is too big for the toolbar. I have changed the size of the picture manually, but it looks ugly (i need scaling).
I have tried to solve the problem:
1. trough Scale
2. through Frame size
3. and variations of the two above :)
Some code:
self initWithImage:image //
style: UIBarButtonItemStyleBordered //UIBarButtonItemStylePlain
target:target
action:action
UIImage *image;
image = [[UIImage imageNamed:#“image.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
-(UIImage )imageWithImages:(UIImage )image scaledToSize:(CGSize)newSize {
//UIGraphicsBeginImageContext(newSize);
// In next line, pass 0.0 to use the current device's pixel scaling factor (and thus account for Retina resolution).
// Pass 1.0 to force exact pixel size.
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Please, help me with this. Quite simple but tricky task. I have already spent several hours with that... Thank you in advance :)
You should not use initWithImage method.
If you want to display the exact image you should use initWithCustomView method.
For example:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image"]];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageView];
You can scale down the image before setting it to the image view if you want to.
I would like to add a background to my taken screenshot, but something went wrong. The return of the image is only the background without the screenshot. Here´s my code, can you fix it please?
- (UIImage *)screenshot
{
UIImage *backgroundImage = [UIImage imageNamed:#"iphoneframe.png"];
UIGraphicsBeginImageContext(backgroundImage.size);
[backgroundImage drawInRect:CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height)];
UIGraphicsBeginImageContext(self.view.frame.size);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIGraphicsEndImageContext();
[screenshot drawInRect:CGRectMake(backgroundImage.size.width - screenshot.size.width, backgroundImage.size.height - screenshot.size.height, screenshot.size.width, screenshot.size.height)];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
return image;
}
Background/Frame I want to put around the screenshot: http://oi45.tinypic.com/2qvv2tv.jpg
Prototype Image, which should be returned: http://i.stack.imgur.com/hg1nW.png
Update: The problem was solved with the tips from #panayot-panayotov and #jrturton - the idea was to remove second UIGraphicsBeginImageContext & place UIGraphicsEndImage Context(); above return Image;, but now the picture is like this: pbs.twimg.com/media/BnlkN9wIAAEG-ue.jpg:large - how can we fix this? Any ideas?
You're creating two image contexts, and drawing a different image in each one. Don't create the second context (UIGraphicsBeginImageContext...), and move the end context call until after you've taken out the final image, and you should be fine.
It's also worth noting that you should use the newer 'with options' version when making an image context - this will allow you to draw properly on retina devices.
I have bubble like image, that I need to resize dynamically.
Example attached.
I will have dynamic text and I need to resize only straight parts of bubble. Leave down arrow on the middle
How can I do this?
Thanks
You can use method:
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
call like this:
UIImage* image = [[UIImage imageNamed:#"bubbleImageName.png"]
stretchableImageWithLeftCapWidth:15 topCapHeight:13];
Change capWidth and capHeight values
I think that resizableImageWithCapInsets: will be pretty useful for you
Example:
UIImage *image = [[UIImage imageNamed:#"buttonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0,10.0,5.0,10.0)];
[self.yourButton setBackgroundImage:image forState:UIControlStateNormal];
I wrote example with button because it's a common case of using this method. Just play with caps values.
HTH!
EDIT:
Thought about this problem and wrote small example.
I understood that resizableImageWithCapInsets: can save only corners of image in case we use two dimension scale.
I see 2 ways:
Use two controls: one for balloon and one for arrow with proper images
Render image for this one control from two images
I decided to realize second one.
Pass ballonView.frame as argument here:
- (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;
}
Then we just set this image to our ballonView.
Also I leave gist with full code of that ViewController with random sizes of that balloon: https://gist.github.com/AlloyDev/7910637
Also you can use that two images:
Use UIImage.h delegate method
// use resizableImageWithCapInsets: and capInsets.
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
#property(nonatomic,readonly) NSInteger leftCapWidth; // default is 0. if non-zero, horiz. stretchable. right cap is calculated as width - leftCapWidth - 1
#property(nonatomic,readonly) NSInteger topCapHeight; // default is 0. if non-zero, vert. stretchable. bottom cap is calculated as height - topCapWidth - 1
like this
UIImage *balloon = [[UIImage imageNamed:#"grey.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
hope this helps.
For the image in the question (assuming it's a Retina image):
[[UIImage imageNamed:#"Bubble"] resizableImageWithCapInsets:UIEdgeInsetsMake(14, 28, 14, 26) resizingMode:UIImageResizingModeStretch];
If the image you've provided in the question is a non-retina image, halve the values.
Modify the values (UIEdgeInsetsMake(top, left, bottom, right)) to suit any image you need.
I would like to take an image and duplicate it. Then increase it by 105% and overlay it on the original image.
What is the correct way to do this on iOS?
This is your basic code for drawing the image and then saving it as an image again:
- (UIImage *)renderImage:(UIImage *)image atSize:(CGSize)size
{
UIGraphicsBeginImageContext(size);
[image drawInRect:CGRectMake(0.0, 0.0, size.width, size.height)];
// draw anything else into the context
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Where it says "draw anything else into the context" you can draw the image at a reduced size by setting the appropriate rect to draw in. Then, call the renderImage method with whatever size you want the full image to be. You can use CGContextSetAlpha to set the transparency.
This question already has answers here:
The simplest way to resize an UIImage?
(34 answers)
Closed 9 years ago.
I've created a UIImageView which contains an image with a high resolution. The problem is that the resolution of that image is too high to put into the imageView. The size of the imageView is 92 x 91 (so it's small). It contains an UIImage, whose resolution is too high so it looks ugly in the UIImageView.
So how can I reduce the resolution of that UIImage?
My code for the UIImageView:
UIImageView *myImageView = [[UIImageView alloc] initWithImage:[UIImage imageWithContentsOfFile:pngFilePath]];
myImageView.frame = CGRectMake(212.0, 27, 92,91);
have a look at this
https://stackoverflow.com/a/2658801
This will help you to resize your image according to your need
Add method to your code and call like this
UIImage *myImage =[UIImage imageWithContentsOfFile:pngFilePath];
UIImage *newImage =[UIImage imageWithImage:myImage scaledToSize:CGSizeMake(92,91)];
You can resize an image using this method that returns a resized image :
-(UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
// Here pass new size you need
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Hope it helps you.
try with this
myImageView.contentMode = UIViewContentModeScaleToFill;
You need to downsize the image, which will reduce the resolution, make it easier to store. I actually wrote a class (building on some stuff from SO) that does just that. It's on my github, take a look:
https://github.com/pavlovonline/UIImageResizer
the main method is
-(UIImage*)resizeImage:(UIImage*)image toSize:(CGFloat)size
so you give this method the size to which you want to downsize your image. If the height is greater than the width, it will auto-calculate the middle and give you a perfectly centered square. Same for width being greater than height. If you need an image that is not square, make your own adjustments.
so you'll get back a downsized UIImage which you can then put into your UIImageView. Save some memory too.