I'm going to use rounded corner box as 'container' of some UIComponents and, of course, it will requires multiple width and height.
my question is... is there any way to have just one PNG file with rounded corner but programatically stretch some area horizontally or vertically so it can be used in multiple UIView. if so, what UIComponent will be used to hold this image? is it UIImageView?
here's what I mean :
You can use below method to stretch imageview :
UIImage *img = [UIImage imageNamed:#"imageName"];
img = [img stretchableImageWithLeftCapWidth:10 topCapHeight:10];
and then its img into imageview.
Related
I added a uiview as a subview on a view controller programmatically (called contentView). I also added an image on that uiview programmatically. Every time I run the app on the iPad the image is stretched! How do I fix the image so that it fits the iPad screen but doesn't stretch the image? I know the drawInRect is what is stretching the image. So how do I fix that?
Here is my code:
UIGraphicsBeginImageContextWithOptions(self.contentView.bounds.size, self.contentView.opaque, 0.0);
[[UIImage imageNamed:#"menu image 2.JPG"] drawInRect:self.contentView.bounds];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.contentView addSubview:imageView];
UIImageView has a property called contentMode which determines how the image layout is handled in the view context. contentMode is of type UIViewContentMode.
The default value is UIViewContentModeScaleToFill which stretches the image without respecting the aspect ratio. I am assuming it is the changing aspect ratio that is causing the issue.
If you wish to scale the image, but keep the aspect ratio, you have two options:
UIViewContentModeScaleAspectFit: This will show the image scaled to fill the view, but not clip any contents (if the aspect ratio doesn't match view size, it will show either horizontal or vertical bands)
UIViewContentModeScaleAspectFill: This will scale the image to fill the view entirely, without any bands - this will result in content being clipped if the image ratio doesn't match the view ratio.
To set the contentMode on the image view in Objective-C, use the following syntax:
UIImage *image = [UIImage imageNamed:#"menu image 2.JPG"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.contentMode = UIViewContentModeScaleAspectFill;
...
You should not need to use the custom context drawing for this to work anymore (thanks to Losiowaty for asking me about this).
Change code as below
UIImage *image = [UIImage imageNamed:#"menu image 2.JPG"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[self.contentView addSubview:imageView];
I guess your self.contentView.bounds is not having the same aspect ratio as your menu image 2.JPG . For an experiment, please try looking at the menu image 2.JPG's resolution. For example if it is 300x150, it's aspect ratio is (300/150 = 2:1). Set your self.contentView.bounds to this aspect ratio and draw the image and check the results. It will not stretch.
Please add this Single Line of code in your project
yourImage .contentMode = UIViewContentModeScaleAspectFit;
I've got a UIImageView which has a height greater than its UIImage. It is scaling the image to it's width, but since it's height is greater, it is showing the rest of the UIImageView as transparent (what you would expect from UIViewContentModeScaleAspectFit, which is what the UIImageView's contentMode is set to)
However, it is making the top and bottom of the UIImage transparent, basically, positioning the image in the center of itself. How can I get it to position itself at the top? When I use UIViewContentModeTop, it makes the image too large, so that doesn't work for me. I want some sort of way to scale it just as it does with UIVIewContentModeScaleAspectFill but tell it to also position the scaled image at the top of itself. Anyone have any ideas on how to do that?
I would also be able to fix the issue by just trimming the UIImageView's height to be equal to what the UIImage is once it's been stretched to the boundaries of its superview, but that seems like a more complex solution.
try something like,
UIImage *img = [UIImage imageNamed#"yourImageName.jpeg"];
yourImageView.contentMode = UIViewContentModeScaleAspectFit;
yourImageView.clipsToBounds = YES;
[yourImageView setImage:img];
I need to create an UITextView like in Image, but UITextView auto resize to content height. It is in chat message. At left-bottom and right-bottom have one arrow. But I don't know how to draw or create them in iOS. Can someone tell me how to do this? thank you very much.
Arrow in left-bottom and turn the left if messsage from another body, arrow on the right-bottom and turn the right when message from "self"
You can use the mirror effect On the image. by using same image for both sender and receiver
-(UIImage*)setBubbleImageForSender
{
UIImage *image = [UIImage imageNamed:#"sender.png"];
return image;
}
-(UIImage*)setBubbleImageForReceiver
{
UIImage *image = [UIImage imageNamed:#"sender.png"];
image = [UIImage imageWithCGImage:image.CGImage
scale:image.scale
orientation:UIImageOrientationUpMirrored];
return image;
}
The above thing will change the arrow direction for the chat app.
for resizing the height and width you can use the [imgvw resizableImageWithCapInsets:..] for the imageview and set table cell height accordingly.
Thanks
The generic problem I'm facing is this:
I have a stretchable 50x50 PNG. I'm stretching it to 300x100. I want to get three UIImages of size 100x100 cut from the stretched image, A, B & C in the picture below:
I'm trying to do it like this:
// stretchedImage is the 50x50 UIImage, abcImageView is the 300x100 UIImageView
UIImage *stretchedImage = [abcImageView.image stretchableImageWithLeftCapWidth:25 topCapHeight:25];
CGImageRef image = CGImageCreateWithImageInRect(stretchedImage.CGImage, bButton.frame);
UIImage *result = [UIImage imageWithCGImage:image];
[bButton setBackgroundImage:result forState:UIControlStateSelected];
CGImageRelease(image);
I'm trying to crop the middle 100 ("B") using CGImageCreateWithImageInRect, but this is not right, since stretchedImage is 50x50, not 300x100. How do I get the 300x100 image to crop from? If the original image was 300x100 there would be no problem, but then I would lose the advantage of stretchable image.
I guess to generalize the problem even more, the question would be as simple as: if you scale or stretch an image to a bigger image view, how do you get the scaled/stretched image?
Background for the specific task I'd like to apply the solution for (if you can come up with an alternative solution):
I'm trying to implement a UI that's similar to the one you see during a call in native iPhone call application: a plate containing buttons for mute, speaker, hold, etc. Some of them are toggle type buttons with a different background color for selected state.
I have two graphics for the whole plate, for non-selected and selected states. I'm stretching both images to the desired size. For the buttons in selected state I want to get a piece of the stretched selected graphic.
You should be able to do this by rendering abcImageView to a UIImage
UIGraphicsBeginImageContextWithOptions(abcImageView.bounds.size, NO, 0.f);
[abcImageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Then, you can crop the image like this (given cropRect):
CGImageRef cgImage = CGImageCreateWithImageInRect(image.CGImage, cropRect);
UIImage *croppedImage = [UIImage imageWithCGImage:cgImage];
// Do something with the image.
CGImageRelease(cgImage);
How can I truncate the left side of an image stored in a UIImage object. Basically in certain situations I just want to show part of an image.
How can I do this on with the iOS sdk?
P.S. I tried changing the frame size of the UIImage but that just scales the image and distorts it.
A very simple way is to load the image into a UIImageView, and then add the view to another view. You can then position the image view so that its .frame.origin.x property is negative, which will place it off to the left. The parent view needs to have setMasksToBounds:YES called on it, or else the image view will still be fully-visible.
There are many other ways to achieve this effect as well, but this may be the simplest for you to implement.
to crop a UIImage, you can use one of the UIImage categories available out there, such as http://www.hive05.com/2008/11/crop-an-image-using-the-iphone-sdk/
For example, this frame will remove 100 pixel from the left side of a 200x200 pixel UIImage
CGRect clippedRect = CGRectMake(100, 0, 100, 200);
UIImage *cropped = [self imageByCropping:lightsOnImage toRect:clippedRect];