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.
Related
Currently I'm using a custom image for my UITableView Accessory View. I set the accessory view to an imageview with this custom image. If I use cell-arrow.png (15x15 px) it looks quite pixelated. However, if I use cell-arrow.png (100x100 px) and then re-size it in code [see below] then it looks much better. Why is this?
Follow up question:
It seems that it has been determined that using a 100x100px image and then sizing it down to a 15x15 looks better on a the device (specifically with retina, haven't fully tested it < 4.0). The follow up question is what maximum size I can set the image to so that it increases the resolution? For example, I tested a 1024x1024 version of the same exact cell-arrow.png image, and it look identical to when I re-sized the 100x100 px image.
*Code used to re-size image: *
CGRect myImageRect = CGRectMake(0.0f, 0.0f, 15.0f, 15.0f);
UIImageView *myImage = [[UIImageView alloc] initWithFrame:myImageRect];
[myImage setImage:[UIImage imageNamed:#"cell-arrow.png"]];
// cellArrowNotScaled ends up making the image look very pixelated
// UIImageView *cellArrowNotScaled = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"cell-arrow15.png"]];
cell.accessoryView = myImage; //cellArrowNotScaled;
In general, you should use an image that is exactly the size that it will be used on screen. Otherwise, you are leaving your image scaling up to the software, and you may end up with misaligned pixels and sharp lines turning fuzzy. Remember that as of iOS 4, all measurements in UIKit are in UIKit points, where on a Retina display 1pt = 2px, and on non-Retina, 1pt = 1px.
So, for your 15pt × 15pt image view, you will need two image files if you intend to target both Retina and non-Retina devices:
cell-arrow.png, a 15px × 15px image
cell-arrow#2x.png, a 30px × 30px image
Then you call [UIImage imageNamed:#"cell-arrow"] (note the lack of an extension - UIKit figures it out for you), and the OS will load the 1x or 2x version as appropriate.
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.
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?
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 which shows multiple images when user swipe horizontally. But these images does not have the same height. The first image has height taller then the second.
1.What I want to do is when the person swipes, the next picture shown, is positioned at the top.
2.Also when using ScrollView's paging, the vertical scrolling is not smooth, it skips a whole frame. I've read that i cannot use ScrollView's paging to get the vertical scrolling smooth.
Any ideas?
For the 1st problem should I load nibs with images inside? How do I load a nib after swiping?
updated question:is there a way, i can load nibs(with its own scroll and imageview inside) as i swipe from left to right or right to left? because loading images side by side in the uiscrollview isn't going to do the trick.
set
[imageView setContentMode:UIViewContentModeScaleAspectFit];
this will show the image in proper aspect ... you don't have to worry about image size
[imageView setAutoresizingMask:UIViewAutoresizingFlexibleBottomMargin];
this will keep your imageView attached to the top of scrollView.
If you want every image to show at the top of the scrollView adjust the image.frame accordingly.
UIImageView *imageView;
UIImage *image = [UIImage imageWithData:loadTheImage];
imageView.image = image;
imageView.frame = CGRectMake(0, 0, 280, 480);
In the CGRectMake the first two values specify the padding for the image. The first is x value, the second y value. If both are 0, the image is displayed in the top left.
Does this make sense?