Question

This may be a very simple issue, but I’ve been stuck with this for a week. I’m using an UIImageView to display a Dropbox branding PNG image. I see it alright in Interface Builder, but it’s easy to notice a strong pixelation in the iOS Simulator and in the actual device (an iPad). Here I attach a screen capture of the IB together with the simulator:

I would really appreciate any hint.

Thanks in advance!

Answer 1

InterfaceBuilder is a completely different environment than iOS or even the simulator. Layout and such should translate, but the way everything looks should always be judged (and therefore designed for) the end product.

It looks like your image is being stretched slightly. There are any number of reasons for this. The first thing to check is the resizing mask on your UIImageView. It’s generally bad for UIImageViews to autoresize – for this very reason.

By the way, autoresizing is UIKit’s way of making sure that subviews still fit/look good when their parent view changes size. You can specify how much you want a subview to move around, also how much you want it to stretch. Read about it here.

What you will want to do is design your view — answer the question: how big do I want this image to be in the final product? — and then make the actual png that size (also produce an @2x variant that is double the size for retina displays). Then, when you design in IB, make your UIImageView that size as well, and make sure that the autoresizing settings are set to prohibit stretching.

This ought to fix your problem.