Reputation: 9054
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;
Upvotes: 0
Views: 167
Reputation: 8148
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:
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.
Upvotes: 2