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.
Related
When using the following code:
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"texture1.png"]];
The texture background of my view gets set just fine. But I can see that the images are not scaled properly for a retina display, they seem more pixelated, rather than rich in texture and color as they should be. I have had this issue with other images too, when trying to make an image the size of the iphone 5 screen fade away, only a part of it would be seen, and the rest would be cut off, even though the resolution is fine. Any idea what I am missing here?
EDIT: Does it have to do with the default dpi of the images that I am using?
EDIT #2: Here is a screenshot:
On a side note, does anyone know if good background texture sources besides http://subtlepatterns.com/?
EDIT #3: Here is a good example of me attempting to use the ios-linen pattern
firstly remove .png from image name if you are use #2x image
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"texture1"]];
Please check the image height and width for retain display ..
By Apple On devices with high-resolution screens, the imageNamed:, imageWithContentsOfFile:, and initWithContentsOfFile: methods automatically looks for a version of the requested image with the #2x modifier in its name. If it finds one, it loads that image instead. If you do not provide a high-resolution version of a given image, the image object still loads a standard-resolution image (if one exists) and scales it during drawing.
Instead of using initWithPatternImage you should add a UIImageView to the UIView . This is better because :-
The UIImageView will contain the image according to its specific width and height.
Also, the initWithPatternImage method consumes MORE MEMORY than the UIImageView.
I would prefer to use a UIImageView rather than the
initWithPatternImage:[UIImage imageNamed:#"texture1.png"]
If the image is still not clear you can add the #2x image to the UIImageView and you will see the clarity is more.
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'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.