Question

Background:

I need to get a basic understanding on how to present pixel perfect images on iOS devices using MonoTouch. My understanding of the iOS ecosystem is limited at the moment, being a developer for the windows platform for the last 18 years. From what I understand there is a common coordinate system that renders views the same no matter if it’s a retina display or an old “iPhone 3g” display.

The question is:

What is the best way to generate and display images without blurring or distortion using MonoTouch?

// AnkMannen

Answer 1

First thing you need to learn about is iOS’s system for the retina display.

All controls are laid out in coordinates as if they were a 3GS/iPad 2 or older. Devices with the retina display such as iPhone 4, 5, and iPad 3 all use these same coordinates, but with double the screen size.

For your images, use PNGs. You will have 2 sets, one for the smaller display, and one for the retina display. Apple uses the file-naming convention:

• yourImage.png – smaller image for 3GS
• [e-mail] – larger image for retina displays

Let’s assume the image is 150 pixels by 50 pixels at the smaller size. To properly display it from C#:

//This code is in the ViewDidLoad method of a UIViewController
var imageView = new UIImageView(new RectangleF(0, 0, 150, 50));
imageView.Image = UIImage.FromFile ("yourImage.png");
View.AddSubView(imageView);

iOS will load the appropriate sized image (by the naming convention) and place it in the top left of the screen. Keeping the correct size for the imageView will also prevent any distortion. On retina displays, iOS will load the larger 300×100 image and look identical (except much sharper) to the smaller sized screens side-by-side.