Question

In my iPad app, Universal Combat Log (new-layout branch), I have a UIView subclass (UCLLineChartView) which contains a UIScrollView and the scrollview in turn contains another UIView subclass (ChartView). ChartView has multiple sub-layers, one for each line of data that has been added to the chart. UCLLineChartView draws the axes and markers. The contents of these views/layers are entirely custom drawn, no stock views are used (e.g. UIImageView).

I’m having a problem with zooming — it’s scaling the ChartView like an image, which makes the drawn line all blurred and stretched. I want the line to stay sharp, preferably even while the user is in the act of zooming, but after 3 days of hacking at this, I cannot get it to work.

If I override setTransform on the ChartView to grab the scale factor from the transform but don’t call [super setTransform], then the scrollview’s zoomScale stays at 1. I tried keeping the given transform and overriding the transform method to return it. I tried replicating the effects of setTransform by changing the ChartView’s center and bounds but I wasn’t able to get the behaviour quite right and it still didn’t seem to affect the scrollview’s zoomScale. It seems that the scrollview’s zoomScale depends on the effects of setTransform, but I cannot determine how.

Any assistance would be greatly appreciated.

Answer 1

I have figured out a solution to my problem that is not too gross a hack. In your UIScrollViewDelegate:

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
{
    [_contentView beginZoom];
}

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
    CGSize size = scrollView.bounds.size;
    CGPoint contentOffset = _scrollView.contentOffset;

    CGFloat newScale = _contentView.scale;
    newScale = MAX(newScale, kMinZoomScale);
    newScale = MIN(newScale, kMaxZoomScale);

    [_scrollView setZoomScale:1.0 animated:NO];
    _scrollView.minimumZoomScale = kMinZoomScale / newScale;
    _scrollView.maximumZoomScale = kMaxZoomScale / newScale;

    _contentView.scale = newScale;

    CGSize newContentSize = CGSizeMake(size.width * newScale, size.height);

    _contentView.frame = CGRectMake(0, 0, newContentSize.width, newContentSize.height);
    _scrollView.contentSize = newContentSize;

    [_scrollView setContentOffset:contentOffset animated:NO];

    [_contentView updateForNewSize];
    [_contentView setNeedsDisplay];
}

In your content view, declare a scale property and the following methods:

- (void)beginZoom
{
    _sizeAtZoomStart = CGSizeApplyAffineTransform(self.frame.size, CGAffineTransformMakeScale(1/self.scale, 1));
    _scaleAtZoomStart = self.scale;
}

- (void)setTransform:(CGAffineTransform)transform
{
    self.scale = _scaleAtZoomStart * transform.a;
    self.frame = CGRectMake(0, 0, _sizeAtZoomStart.width * self.scale, _sizeAtZoomStart.height);

    [self updateForNewSize];
    [self setNeedsDisplay];
}

And if your content view uses sub-layers, you’ll need to disable their implicit animations by adding the following to the sub-layers’ delegate(s):

- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event
{
    // prevent animation of the individual layers so that zooming doesn't cause weird jitter
    return (id<CAAction>)[NSNull null];
}

The basic idea here is that the overridden setTransform uses the scale factor from the tranform matrix to calculate the new scale factor for the content view and then resizes the content view accordingly. The scrollview automatically adjusts the content offset to keep the content view centered.

The scrollViewDidEndZooming code keeps the zooming bounded.

There are further complexities for dealing with resizing the scrollview when rotating device for example.