I'm drawing a bunch of UIImageView (100x100) as menu items. Each has its own image, some are larger than 100x100, some smaller. By default, the imageViews with larger images are being scaled down in ratio to fit the 100x100 box nicely.
However, images smaller than 100x100 are being scaled up, which makes them really blurry. I'd like it so the smaller images simply remain the size they naturally are. Otherwise I'm happy with the way large images are scaling, just not the smaller images.
I haven't been able to achieve anything by switching to UIViewContentModeScaleAspectFit, UIViewContentModeScaleAspectFill, or UIViewContentModeScaleToFill.
Does anyone have ideas or hacks on how I could achieve this? I could use an if statement to check the image's dimensions and sent their contentMode (Center?), but that seems a bit hackish since I'm drawing each item from an NSDictionary with a for in loop. Any help appreciated. Thanks
If I understand correctly you can just check the image dimensions first before setting your frame, something like:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageName:#"myimage.png"]];
[imageView sizeToFit];
CGRect newFrame = imageView.frame;
if (newFrame.size.width > 100) newFrame.size.width = 100;
imageView.frame = newFrame;
You'll need some extra logic to do similar things for the height. Is this what you mean?
Related
I am trying to export an image from a UIView that contains a UIImage view and some labels. I am not sure I am going about this the right way. I want to export everything in the view and maintain the layout. I want to export at 1536 x 2048.
I am using the following code with renderInContext to grab an image of the main view (UIView). Kind of works, but the layout gets messed up, basically the layout changes and the labels do not scale properly. Is renderInContext the right way to go for something like this? Is there a better way?
you can download the whole project here: http://tinyurl.com/7qvhqtp
UIGraphicsBeginImageContext(CGSizeMake(1536, 2048));
viewOutput.frame = CGRectMake(0, 0, 1536, 2048);
[[viewOutput layer] renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageWriteToSavedPhotosAlbum(image,nil,nil,nil);
This is the code I use to save the current UIView as an image. The layout gets saved perfectly.
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, self.view.opaque, 0.0);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
I'm not 100% sure, but there might be some issues with UIGraphicsBeginImageContext vs UIGraphicsBeginImageContextWithOptions.
On the other hand the problem might be in your view's subview's autoresizing mask if your view has the autoresizesSubviews set to YES. I'd try to disable it if you do not have the support for rotations or at least before changing your view's frame.
The only thing you did to get a bigger image was to change the frame but the labels did not have the correct autoresize masks nor did their font size change. You can clearly see this in the "after running code" image that the label did neither move nor change size.
First, If you wan the label to change its frame when the superview's frame changes (are the labels subviews of the image? If not you may need to calculate their new frames yourself) then you should give it a suitable auroresizing mask. In your case you would want it to have a fixed distance to the bottom of the screen and a flexible distance to the top. You would also want the distances to the left and right to be fixed so that the width can be flexible.
This only leaves you with the font size problem. You should calculate the scale factor (how many times bigger everything gets) and multiply the current font size with that scale factor.
I'm trying to make cell background stretch properly when in landscape mode. I' written this code:
UIImage* cellBackGroundImage = [UIImage imageNamed:#"button_listing_default.png"];
cellBackGroundImage = [cellBackGroundImage stretchableImageWithLeftCapWidth:290 topCapHeight:76];
deselectedBackground = [[UIImageView alloc] initWithImage:cellBackGroundImage] ;
[deselectedBackground setContentMode:UIViewContentModeScaleToFill];
cell.backgroundView = deselectedBackground;
The image size is 580x152. The cell size is 280x76.
But when I turn my device into landscape the rounded corners of my image is scaled but they shouldn't.
Portrait appearance: Portrait appearance http://xmages.net/storage/10/1/0/6/6/upload/456703d5.png
Landscape appearance: Landscape appearance http://xmages.net/storage/10/1/0/d/0/upload/a99fb3a8.png
The image itself: The image itself http://xmages.net/storage/10/1/0/6/6/upload/e1895d8e.png
Probably your cap values are wrong?
cellBackGroundImage = [cellBackGroundImage stretchableImageWithLeftCapWidth:290 topCapHeight:76];
Why are they so big? Do your rounded corners have such a big radius? If they are only like 10px, than use stretchableImageWithLeftCapWidth: 10 topCapHeight: 10. These values define, which portion of the image won't be scaled.
Could you perhaps show us your image?
I have found what had caused my problems. Actually it is the image itself. Stretching and auto-sizing works properly when image is smaller than the result, but if it should be wider and lower (as it was in my case) it doesn't.
So to solve my issue I, just, had to use smaller image.
Currently, when I insert a 50x50 image in an UIImageView and draw it on the screen, the image appears badly pixelated, is not smooth, and is not aesthetically pleasing. How should one change the interpolation algorithm UIImageView uses, to ensure high quality? I am also using SDWebImage to load the image from web, but that should be irrelevant.
UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 50, 50)];
[imageView setImageWithURL:[NSURL URLWithString:url]
placeholderImage:[UIImage imageNamed:#"unknown.gif"]];
[cell.contentView addSubview:imageView];
[imageView release];
You are creating a imageView with a rectangle of 50x50 points.
There is a difference between points and pixels.
So you are probably placing an image with 50x50 pixels in the imageView with 50x50 points.
So for retina display your image should be twice as big to look smooth, in this case 100x100 pixels.
I resized the image to 200x200 pixels with kCGInterpolationHigh, and then inserted the image into UIImageView. The pic looks a lot better as a result.
I have a box that i want to be expanable only on its width, while still maintaining the rounded corners that I have. I made the graphic in photoshop. and it is exactly 13px wide, so 6 for each corner and 1 for the middle to repeat.
UIImage* img = [[UIImage imageNamed:#"screen_displayer_rounded.png"] stretchableImageWithLeftCapWidth:6 topCapHeight:6];
CGRect rect = CGRectMake(272.0f, 14.0f, 100.0f, 30.0f);
UIImageView* imgView = [[UIImageView alloc] initWithFrame:rect];
[imgView setImage:img];
Could anyone tell me why this might be happening?
Thanks!
I have found that you cant just rely stretchableImageWithLeftCapWidth to get it to resize correctly.
I normally use the contentStretch property that is available to all UIView subclasses when stretchableImageWithLeftCapWidth doesnt work for me.
Checkout the UIView apple docs regarding the contentStretch property.
You should check if the view doesn't end up at a non-integer position. If you choose "Run with performance tool > Core Animation" and check "Color misaligned images", all misaligned images will show purple.
If your image is purple, try to find out which superview is causing this. Look out for things being centered, since that is a common cause for these issues.
Just checking - are you perhaps viewing a non-retina image on a retina display? This would definitely stretch it out.
i have a UIScrollView, when somebody click a button, the scrollview will become longer. And i would like to make its background image extended also, which means, the buttom part of the image can be duplicated. do you guys know how to do it in Objective c?
thanks a lot!
penny
I think this will be usefull for you.
you can set the scroll view backgroundColor as follows;
scrollView.backGroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"moviestrip.png"]];
by doing like this, when the scrollView become longer, automatically the image will be duplicated.
or else without duplicating you want to show the image with more width and height as much as the scrollview content, then follow this code.
CGRect rect = imageView.frame;
rect.size = scrollView.contentSize;
imageView.frame = rect;
by doing like that the imageView will show as much as size of the scrollview.
Regards,
Satya