CATiledLayerJesse Collis, Melbourne Cocoaheads, February 2012       jesse@jcmultimedia.com.au / @sirjec
CATiledLayer
Tiled Views in 2009           Tiled UIScrollViews           iOS 3 Compatibility                @2x.png
CATiledLayer in iOS4
My main goals• CATiledLayer in a zooming scrollView• Seamless integration into iOS4+• Seamless integration between retina ...
SuccessFinally...
SuccessFinally...
Here’s what I learnt• UIViews are backed by CALayers• All good CALayer documentation is OSX  based• NSView is not backed b...
What I learnt cont...• Core Graphics helps with high resolution  screens most of the time• CATiledLayer is just a CALayer ...
Basic Implementation+(Class)layerClass{  return [CATiledLayer class];}- (id)initWithFrame:(CGRect)frame{  ...  [(CATiledLa...
LOD & LODB• LOD is the number of levels it will ask you  for as you zoom out• LODB is the number of levels it will use as ...
UIScrollView zoomScale vs.         CATiledLayer LODB• zoomScale is measured on a linear scale• zoomScale has an exponentia...
UIScrollView zoomScale vs.         CATiledLayer LODB• zoomScale is measured on a linear scale• zoomScale has an exponentia...
Some Notes• Setting LOD and LODB to 0 causes a blank  view• Setting LOD and LODB to 1 seems to be  undefined behaviour• Set...
Code TimeJCTiledLayer
Retina DisplayApple’s docs on Supporting High Resolution screens:[You] may need to adjust [Core Animation Layers] drawing ...
A few things you need to do•   layer.contentsScale == 2 so everything in pixel land    is squared•   Multiply the original...
What’s next• Add UIGestureRecognizer support for  more map-like features• Overlay support• Replace UIImages with vectors o...
JCTiledView is on     Github     •   github.com/jessedc/JCTiledScrollView
Thanks!Jesse Collisjesse@jcmultimedia.com.autwitter.com/sirjec
Implementing CATiledLayer
Implementing CATiledLayer
Implementing CATiledLayer
Implementing CATiledLayer
Upcoming SlideShare
Loading in …5
×

Implementing CATiledLayer

8,963 views

Published on

Presenting on CATiledLayer at Melbourne Cocoaheds February 2012.

JCMultimedia blog post: http://blog.jcmultimedia.com.au/2012/02/jctiledscrollview.html

Demo code is available here: https://github.com/jessedc/JCTiledScrollView

Published in: Technology, Art & Photos
2 Comments
3 Likes
Statistics
Notes
  • The PDF support is awesome! Save me so much work.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Jesse, I love your JCTiledScrollView library, it's been a great help. But, I'm working to add to it to support dynamically downloading the tiles from a server when needed. I have it all working up until the point where the newly loaded tile image needs to be displayed.

    Is there some way to draw the newly loaded tile over what's already there without causing a full screen redraw?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,963
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
63
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Implementing CATiledLayer

    1. 1. CATiledLayerJesse Collis, Melbourne Cocoaheads, February 2012 jesse@jcmultimedia.com.au / @sirjec
    2. 2. CATiledLayer
    3. 3. Tiled Views in 2009 Tiled UIScrollViews iOS 3 Compatibility @2x.png
    4. 4. CATiledLayer in iOS4
    5. 5. My main goals• CATiledLayer in a zooming scrollView• Seamless integration into iOS4+• Seamless integration between retina / non- retina screens• provide only one sized tile (not @2x)
    6. 6. SuccessFinally...
    7. 7. SuccessFinally...
    8. 8. Here’s what I learnt• UIViews are backed by CALayers• All good CALayer documentation is OSX based• NSView is not backed by CALayer• drawRect: (more or less) equals drawLayer:inContext delegate method in OSX docs
    9. 9. What I learnt cont...• Core Graphics helps with high resolution screens most of the time• CATiledLayer is just a CALayer subclass • It’s instantiated as a UIView’s layer • It uses drawRect: • contentScale is set by it’s UIView
    10. 10. Basic Implementation+(Class)layerClass{ return [CATiledLayer class];}- (id)initWithFrame:(CGRect)frame{ ... [(CATiledLayer *)self.layer setLevelsOfDetail:1]; [(CATiledLayer *)self.layer setLevelsOfDetailBias:3]; ...}- (void)drawRect:(CGRect)rect{ CGContextRef c = UIGraphicsGetCurrentContext(); CGFloat scale = CGContextGetCTM(c).a; NSInteger col = (CGRectGetMinX(rect) * scale) / self.tileSize.width; NSInteger row = (CGRectGetMinY(rect) * scale) / self.tileSize.height; UIImage *tile_image = [self.tileSource tiledView:self imageForRow:row column:col scale:scale]; [tile_image drawInRect:rect];}
    11. 11. LOD & LODB• LOD is the number of levels it will ask you for as you zoom out• LODB is the number of levels it will use as you zoom in
    12. 12. UIScrollView zoomScale vs. CATiledLayer LODB• zoomScale is measured on a linear scale• zoomScale has an exponential effect on pixels• Each LODB/LOD is a power of two more or less than the previous level of detail.
    13. 13. UIScrollView zoomScale vs. CATiledLayer LODB• zoomScale is measured on a linear scale• zoomScale has an exponential effect on pixels• Each LODB/LOD is a power of two more or less than the previous level of detail.
    14. 14. Some Notes• Setting LOD and LODB to 0 causes a blank view• Setting LOD and LODB to 1 seems to be undefined behaviour• Setting LOD to 1, and LODB > 1 is fine, but I like to set LOD to 0 if I’m using LODB.
    15. 15. Code TimeJCTiledLayer
    16. 16. Retina DisplayApple’s docs on Supporting High Resolution screens:[You] may need to adjust [Core Animation Layers] drawing code to account forscale factors. Normally, when you draw in your view’s drawRect: method … ofthe layer’s delegate, the system automatically adjusts the graphics context toaccount for scale factors. However, knowing or changing that scale factormight still be necessary when your view does one of the following: • Creates additional Core Animation layers with different scale factors and composites them into its own content.
    17. 17. A few things you need to do• layer.contentsScale == 2 so everything in pixel land is squared• Multiply the original tileSize by the contentsScale• Multiply drawRect: rect by the context scale giving us our 512x512 tileSize• divide rect by contentsScale to give us rect with 256x256 dimensions• rect origin can now be used to grab the right tile• draw said tile it into rect; Core Graphics will do the rest
    18. 18. What’s next• Add UIGestureRecognizer support for more map-like features• Overlay support• Replace UIImages with vectors or SVG drawing
    19. 19. JCTiledView is on Github • github.com/jessedc/JCTiledScrollView
    20. 20. Thanks!Jesse Collisjesse@jcmultimedia.com.autwitter.com/sirjec

    ×