Chris Hulbert

Fuzzy iphone graphics when using an UIImageView set to UIViewContentModeCenter

Say you've got a 15px image, inside a 20px imageview, with contentmode set to UIViewContentModeCenter. Well, you'd expect it to be centered at 1:1 (eg no scaling). But it appears fuzzy, because its origin won't be at a rounded pixel boundary, it'll be at a fraction. If you look at the maths it makes sense:

  • The image is 15px, centered inside a 20px view
  • The image will be drawn at: 20/2 - 15/2 = 2.5px
Hence it'll be fuzzy, because the offset is at a 1/2 pixel boundary, and images (in ios) are drawn using subpixel precision in much the same was as fonts are. So the solution is to make it centered inside a 21px (or 19px) view:
  • The image is 15px, centered inside a 21px view
  • The image will be drawn at: 21/2 - 15/2 = 3px, hence will be drawn sharply.
Other reasons for fuzzy graphics can be seen here:

Thanks for reading! And if you want to get in touch, I'd love to hear from you: chris.hulbert at gmail.

Chris Hulbert

(Comp Sci, Hons - UTS)

Software Developer (Freelancer / Contractor) in Australia.

I have worked at places such as Google, Cochlear, Assembly Payments, News Corp, Fox Sports, NineMSN, FetchTV, Coles, Woolworths, Trust Bank, and Westpac, among others. If you're looking for help developing an iOS app, drop me a line!

Get in touch:
[email protected]
github.com/chrishulbert
linkedin


 Subscribe via RSS