Correcting blurry text after a CGAffineTransformMakeScale

Question

I have multiple views with many UILabels on the views. (all constructed in Interface Builder).

I am then trying to create a "smaller" replica of my view when you pinch the screen.

To do this I apply:

view.transform = CGAffineTransformMakeScale(.5, .5);

and then I also adjust the frame of view.

The problem is that after the transformation, the text in all of my UILabels becomes "blurry". It doesn't stay pixel perfect as it is in full-scale view.

Is there a way to increase the pixelation of the labels after the transformation?

Answer 1

Applying a transform to a UIView or CALayer merely scales the rasterized bitmap of that layer or view. This can lead to blurriness of the resulting UI element, because they aren't re-rendered at that new scale.

If you really want your text or images to be crisp at the new scale factor, you're going to need to manually resize them and cause them to redraw instead of applying a transform. I described one way that I did this with a UIView hosted in a UIScrollView in this answer.

You might be able to create a single method that traverses your view hierarchy for your one main view, recursively reads each subview's frame, scales that down, and then forces a redraw of its contents. Transforms are still great to use for interactive manipulation or animation, but you can then trigger a full manual scaling and redraw at the end of the manipulation or animation.