Zoom UILabel & Re-render font at correct size

Question

I have a multi-line UILabel that I want to enable zooming on.

I embedded it with a UIScrollView and set min zoom to .25 and max zoom to 4. This works well, however my UILabel's font looks rather gross at any zoom level other than 1.

I can handle this method:

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale

in order to re-size the font of my UILabel to something larger, but the view is still zoomed in, so it always looks awful.

Is there any way to make the label's text re-render one I'm done zooming?

It is important that the users current scrolled position in the text not be lost.

(To get a feel for what I'm going for, notice how in Mobile Safari when you zoom the text is scaled/anti-aliased for a split second then it clears up to render well at your current zoom scale)

Answer 1

The UIScrollView's built-in scaling only applies a transform to your content view, which results in blurriness at anything above a scale factor of 1.0. For truly sharp rendering, you'll need to handle the scaling yourself. I describe a chunk of the process in this answer.

You'll need to keep track of the scale factor of the content view manually, then in the -scrollViewDidEndZooming:withView:atScale: delegate method you'll apply that scale. For your UILabel, that will mean changing the font size to reflect the new scale.

In order to maintain the correct scroll position, you'll need to grab the contentOffset of the UIScrollView within the above delegate method and calculate what position that corresponds to in the newly scaled UILabel. You then set the contentSize of the scroll view to match the new size of the UILabel and use -setContentOffset:animated: to set the newly calculated content offset (with animated set to NO).

It's a little tricky to get the math right, but I do this when scaling text in one of my applications, which can be seen in the video demonstration of that application (at about the 1/3 mark).

Answer 2

Thanks valvoline & Scrimmers for your answers. My solution was a mix between yours.

Subclass UILabel like this:

UILabelZoomable.h

+ (Class) layerClass;

UILabelZoomable.m

+ (Class) layerClass
{    
    return [CATiledLayer class];
}

Now, when you use your fancy new UILabelZoomable in your app, remember to do this:

YourViewController.m

CATiledLayer *tiledLayer = (CATiledLayer*)textoLabel.layer;
tiledLayer.levelsOfDetail = 10;
tiledLayer.levelsOfDetailBias = 10;

Remember to add the QuartzCore framework!

#import <QuartzCore/QuartzCore.h>

Enjoy sharp and a beautiful rendered text:

[UIView animateWithDuration:1 animations:^
     {
         yourLabel.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(200, 200), CGAffineTransformMakeRotation(1));
     }];