How to use CAScrollLayer on the iPhone?


Don’t get it twisted. This is not a how-to. Rather it is a “how do you do?” That’s not “How do you do?”, as in the sense of a typical greeting but an inquiry into the inner workings of the aforementioned topic. I’ve looked high, I’ve asked down low. For whatever the reason I can find absolutely no documentation on the use of CAScrollLayer on the iPhone. No source examples, no tutorials, and scarce documentation. Here’s my dilemma. I created s simple UISCrollView example app that allows a single image to scroll around the screen. I copied/re-coded the example as a means of familiarizing with Layers and I got stuck. At this point I’m not certain if I’m stuck on NSResponder oddities (Is the owning UIView stealing touch events form the CAScrollLayer?) or just misunderstanding the API in total. The idea is to fill the screen with a scroll layer and add an image or five to the scroll layer. I’m expecting the images to be scrollable by virtue of the fact that they sit in the layer. I’ve set the layer’s contentsRect to be larger than the parent UIView. I tried everything. Still I get no scroll action. Is there a hidden UIView property that needs to be set? Where am I going wrong?

#import "LayersViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface LayersViewController(PrivateMethods)

-(void) initialize;

@end

@implementation LayersViewController

 // The designated initializer.  Override if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
      [self initialize];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)decoder
{
  self = [super initWithCoder:decoder];
  if (self != nil) {
    [self initialize];
  }
  return self;
}

-(void) initialize
{
  if(self.view) {
    [self.view removeFromSuperview];
    NSLog(@"Removed default view!");
  }
  self.view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
  CAScrollLayer *scrollLayer = [CAScrollLayer layer];
  scrollLayer.backgroundColor =  [[UIColor blackColor] CGColor];
  scrollLayer.bounds = self.view.bounds;
  scrollLayer.contentsRect = CGRectMake(0, 0, scrollLayer.bounds.size.width*2, scrollLayer.bounds.size.height);
  scrollLayer.borderWidth = 2.5;
  scrollLayer.borderColor = [[UIColor redColor] CGColor];

  scrollLayer.position = CGPointMake(self.view.center.x, self.view.center.y - 20);
  scrollLayer.scrollMode = kCAScrollBoth;
//  [self.view.layer addSublayer:scrollLayer];
  [self.view.layer insertSublayer:scrollLayer atIndex:0];
  UIImage *image = [UIImage imageNamed:@"eclipse32.gif"];
  for(int i=0; i<6; i++) {
    layer = [CALayer layer];
    layer.backgroundColor = [[UIColor blackColor] CGColor];
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.contents = (id)[image CGImage];
    layer.position = CGPointMake(layer.bounds.size.width * i, self.view.center.y);
    [scrollLayer addSublayer:layer];
  }
  [image release];
}

@end

3 thoughts on “How to use CAScrollLayer on the iPhone?

  1. Hey Cliff,

    I don’t think CAScrollLayer will handle touch input — that’s UIResponder’s (and it’s subclasses, including UIView) responsibility. What CAScrollLayer will handle is programmatic scrolling via its scrollToPoint: and scrollToRect: messages. If you want the whole deal (touch input w/scrolling), you’ll have to use UIScrollView instead.

    Try adding this to your example to scroll the layer programmatically:

    – (void)scroll {
    [scrollLayer scrollToPoint:scrollPoint];
    scrollPoint.x += 10;
    [self performSelector:_cmd withObject:nil afterDelay:0.1];
    }

    and add this at the end of the initialize method:

    scrollPoint = CGPointMake(0, 0);
    [self scroll];

    You’ll also have to add scrollLayer and scrollPoint as members of the viewController class.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s