Your SlideShare is downloading. ×
0
CS193P - Lecture 5
           iPhone Application Development

           Views
           Drawing
           Animation



...
Announcements

        • Assignment 1 grades are out. Contact Paul or Dave if you didn’t
          get yours

        • Co...
Questions from Monday?
        • Model, View, Controller

        • Interface Builder & Nibs

        • Delegate
         ...
Today’s Topics
        • Views
        • Drawing
        • Text & Images
        • Animation




Tuesday, January 19, 2010...
Views




Tuesday, January 19, 2010   5
View Fundamentals
        • Rectangular area on screen

        • Draws content

        • Handles events

        • Subcl...
View Hierarchy - UIWindow
        • Views live inside of a window

        • UIWindow is actually just a view
            ...
View Hierarchy - Manipulation
        • Add/remove views in IB or using UIView methods
          	 - (void)addSubview:(UIV...
View Hierarchy - Ownership
        • Superviews retain their subviews

        • Not uncommon for views to only be retaine...
View-related Structures
        • CGPoint
            ■   location in space: { x , y }


        • CGSize
            ■   ...
Rects, Points and Sizes

                     CGRect                                    (0, 0)              x

           ...
View-related Structure

      Creation Function           Example

                                  CGPoint point = CGPoi...
UIView Coordinate System
        ■ Origin in upper left corner
        ■ y axis grows downwards



                       ...
UIView Coordinate System
        ■ Origin in upper left corner
        ■ y axis grows downwards



                       ...
Location and Size
        • View’s location and size expressed in two ways
            ■ Frame is in superview’s coordinat...
Location and Size
        • View’s location and size expressed in two ways
            ■ Frame is in superview’s coordinat...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Location and Size
        • View’s location and size expressed in two ways
              ■ Frame is in superview’s coordin...
Frame is Computed


                            200, 100              View A

                                       200
 ...
Bounds


                                                    View A

                                         200
        ...
Center


                                                    View A

                                         200
        ...
Center


                                                               View A

                                          ...
Frame


                               200, 100                 View A

                                             200
 ...
Transform
        • 45° Rotation


                                                            View A




                ...
Frame
        • The smallest rectangle in the superview’s coordinate system
          that fully encompasses the view itse...
Frame and Bounds
        • Which to use?
            ■   Usually depends on the context
        • If you are using a view,...
Creating Views




Tuesday, January 19, 2010   22
Where do views come from?
        • Commonly Interface Builder
        • Drag out any of the existing view objects (button...
Manual Creation
        • Views are initialized using -initWithFrame:
          	 	 CGRect frame = CGRectMake(0, 0, 200, 1...
Defining Custom Views
        • Subclass UIView

        • For custom drawing, you override:
          	 	 	 	 - (void)dra...
Drawing Views




Tuesday, January 19, 2010   26
- (void)drawRect:(CGRect)rect
        • -[UIView drawRect:] does nothing by default
            ■   If not overridden, the...
Be Lazy
        • drawRect: is invoked automatically
            ■   Don’t call it directly!


        • Being lazy is goo...
CoreGraphics and Quartz 2D
        • UIKit offers very basic drawing functionality
                  UIRectFill(CGRect rec...
Graphics Contexts
        • All drawing is done into an opaque graphics context

        • Draws to screen, bitmap buffer,...
CG Wrappers
        • Some CG functionality wrapped by UIKit
        • UIColor
            ■ Convenience for common colors...
Simple drawRect: example
        • Draw a solid color and shape
       - (void)drawRect:(CGRect)rect {
          CGRect bo...
Simple drawRect: example
        • Draw a solid color and shape
       - (void)drawRect:(CGRect)rect {
          CGRect bo...
Drawing More Complex Shapes
        • Common steps for drawRect: are
            ■ Get current graphics context
          ...
Paths
        • CoreGraphics paths define shapes
        • Made up of lines, arcs, curves and rectangles
        • Creatio...
CGPath
        • Two parallel sets of functions for using paths
            ■ CGContext “convenience” throwaway functions
...
Simple Path Example
       - (void)drawRect:(CGRect)rect {
          CGContextRef context = UIGraphicsGetCurrentContext();...
Simple Path Example
       - (void)drawRect:(CGRect)rect {
          CGContextRef context = UIGraphicsGetCurrentContext();...
More Drawing Information
        • UIView Class Reference
        • CGContext Reference
        • “Quartz 2D Programming G...
Images & Text




Tuesday, January 19, 2010   38
UIImage
        • UIKit class representing an image

        • Creating UIImages:
            ■   Fetching image in applic...
Creating Images from a Context
        • Need to dynamically generate a bitmap image

        • Same as drawing a view

  ...
Bitmap Image Example
           - (UIImage *)polygonImageOfSize:(CGSize)size {
           	
           	     UIImage *resu...
Getting Image Data
        • Given UIImage, want PNG or JPG representation
          	 	 	 NSData *UIImagePNGRepresentatio...
Drawing Text & Images
      • You can draw UIImages in -drawRect:

         - [UIImage drawAtPoint:(CGPoint)point]
       ...
Drawing Text & Images
      • You can draw UIImages in -drawRect:

         - [UIImage drawAtPoint:(CGPoint)point]
       ...
Text, Images, and UIKit views




Tuesday, January 19, 2010               44
Constructing Views
        • How do I implement this?




Tuesday, January 19, 2010            45
Constructing Views
        • How do I implement this?

        • Goal
            ■   PolygonView that displays shape
    ...
Constructing Views
        • How do I implement this?

        • Goal
            ■   PolygonView that displays shape
    ...
Constructing Views
        • How do I implement this?

        • Goal
            ■   PolygonView that displays shape
    ...
UILabel
        • UIView subclass that knows how to draw text

        • Properties include:
            ■ font
          ...
UIImageView
        • UIView that draws UIImages

        • Properties include:
            ■ image
            ■ animated...
UIControl
        • UIView with Target-Action event handling

        • Properties include:
            ■ enabled
        ...
View Properties & Animation




Tuesday, January 19, 2010             49
Animating Views
        • What if you want to change layout dynamically?
        • For example, a switch to disclose addit...
Animating Views
        • What if you want to change layout dynamically?
        • For example, a switch to disclose addit...
Animating Views
        • What if you want to change layout dynamically?
        • For example, a switch to disclose addit...
UIView Animations
        • UIView supports a number of animatable properties
            ■   frame, bounds, center, alpha...
Other Animation Options
        • Additional animation options
            ■ delay before starting
            ■ start at ...
View Animation Example
       - (void)showAdvancedOptions {
           // assume polygonView and optionsView
             ...
Knowing When Animations Finish
        • UIView animations allow for a delegate
          	 	 	 [UIView setAnimationDelega...
How Does It Work?
        • Is drawRect: invoked repeatedly?
        • Do I have to run some kind of timer in order to dri...
Core Animation
        • Hardware accelerated rendering engine

        • UIViews are backed by “layers”

        • -drawR...
View Transforms
        • Every view has a transform property
            ■   used to apply scaling, rotation and translat...
More Animation Information
        • iPhone OS Programming Guide
            ■   “Modifying Views at Runtime” section
    ...
Assignment 3 Hints




Tuesday, January 19, 2010    59
Saving State Across App Launches
        • NSUserDefaults to read and write prefs & state

        • Singleton object:
   ...
Questions?




Tuesday, January 19, 2010   61
Upcoming SlideShare
Loading in...5
×

05 Views

4,635

Published on

Published in: Technology, Business
1 Comment
2 Likes
Statistics
Notes
  • What's the meaning of 'If you are implementing a view, typically you use bounds'? Some instances? Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,635
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
73
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "05 Views"

  1. 1. CS193P - Lecture 5 iPhone Application Development Views Drawing Animation Tuesday, January 19, 2010 1
  2. 2. Announcements • Assignment 1 grades are out. Contact Paul or Dave if you didn’t get yours • Contact Paul or Dave if you need a loaner iPod Touch • Assignments 2A and 2B due Wednesday, 1/20 Tuesday, January 19, 2010 2
  3. 3. Questions from Monday? • Model, View, Controller • Interface Builder & Nibs • Delegate ■ Allows one object to act on behalf of another object • Target-Action Tuesday, January 19, 2010 3
  4. 4. Today’s Topics • Views • Drawing • Text & Images • Animation Tuesday, January 19, 2010 4
  5. 5. Views Tuesday, January 19, 2010 5
  6. 6. View Fundamentals • Rectangular area on screen • Draws content • Handles events • Subclass of UIResponder (event handling class) • Views arranged hierarchically ■ every view has one superview ■ every view has zero or more subviews Tuesday, January 19, 2010 6
  7. 7. View Hierarchy - UIWindow • Views live inside of a window • UIWindow is actually just a view ■ adds some additional functionality specific to top level view • One UIWindow for an iPhone app ■ Contains the entire view hierarchy ■ Set up by default in Xcode template project Tuesday, January 19, 2010 7
  8. 8. View Hierarchy - Manipulation • Add/remove views in IB or using UIView methods - (void)addSubview:(UIView *)view; - (void)removeFromSuperview; • Manipulate the view hierarchy manually: - (void)insertSubview:(UIView *)view atIndex:(int)index; - (void)insertSubview:(UIView *)view belowSubview:(UIView *)view; - (void)insertSubview:(UIView *)view aboveSubview:(UIView *)view; - (void)exchangeSubviewAtIndex:(int)index withSubviewAtIndex:(int)otherIndex; Tuesday, January 19, 2010 8
  9. 9. View Hierarchy - Ownership • Superviews retain their subviews • Not uncommon for views to only be retained by superview ■ Be careful when removing! ■ Retain subview before removing if you want to reuse it • Views can be temporarily hidden theView.hidden = YES; Tuesday, January 19, 2010 9
  10. 10. View-related Structures • CGPoint ■ location in space: { x , y } • CGSize ■ dimensions: { width , height } • CGRect ■ location and dimension: { origin , size } Tuesday, January 19, 2010 10
  11. 11. Rects, Points and Sizes CGRect (0, 0) x 54 origin CGPoint x 80 80 size y 54 y 144 CGSize width 144 72 height 72 Tuesday, January 19, 2010 11
  12. 12. View-related Structure Creation Function Example CGPoint point = CGPointMake (100.0, 200.0); CGPointMake (x, y) point.x = 300.0; point.y = 30.0; CGSize size = CGSizeMake (42.0, 11.0); CGSizeMake (width, height) size.width = 100.0; size.height = 72.0; CGRect rect = CGRectMake (100.0, 200.0, CGRectMake (x, y, 42.0, 11.0); width, height) rect.origin.x = 0.0; rect.size.width = 50.0; Tuesday, January 19, 2010 12
  13. 13. UIView Coordinate System ■ Origin in upper left corner ■ y axis grows downwards 0, 0 +x +y Tuesday, January 19, 2010 13
  14. 14. UIView Coordinate System ■ Origin in upper left corner ■ y axis grows downwards 0, 0 +x UIView +y Tuesday, January 19, 2010 13
  15. 15. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system Tuesday, January 19, 2010 14
  16. 16. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system View A Tuesday, January 19, 2010 14
  17. 17. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A 400 Tuesday, January 19, 2010 14
  18. 18. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 View A bounds: origin: 0, 0 size: 550 x 400 400 Tuesday, January 19, 2010 14
  19. 19. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 View A bounds: View B origin: 0, 0 size: 550 x 400 400 Tuesday, January 19, 2010 14
  20. 20. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 200, 100 View A bounds: View B origin: 0, 0 size: 550 x 400 400 Tuesday, January 19, 2010 14
  21. 21. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 200, 100 200 View A bounds: View B origin: 0, 0 size: 550 x 400 400 250 Tuesday, January 19, 2010 14
  22. 22. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 200, 100 200 View A bounds: View B origin: 0, 0 size: 550 x 400 400 250 View B frame: origin: 200, 100 size: 200 x 250 Tuesday, January 19, 2010 14
  23. 23. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 200, 100 200 0, 0 View A bounds: View B origin: 0, 0 size: 550 x 400 400 250 View B frame: origin: 200, 100 size: 200 x 250 Tuesday, January 19, 2010 14
  24. 24. Location and Size • View’s location and size expressed in two ways ■ Frame is in superview’s coordinate system ■ Bounds is in local coordinate system 0, 0 550 View A frame: View A origin: 0, 0 size: 550 x 400 200, 100 200 0, 0 View A bounds: View B origin: 0, 0 size: 550 x 400 400 250 View B frame: origin: 200, 100 size: 200 x 250 View B bounds: origin: 0, 0 size: 200 x 250 Tuesday, January 19, 2010 14
  25. 25. Frame is Computed 200, 100 View A 200 View B 250 Tuesday, January 19, 2010 15
  26. 26. Bounds View A 200 0, 0 View B 250 Tuesday, January 19, 2010 16
  27. 27. Center View A 200 0, 0 View B 250 Tuesday, January 19, 2010 17
  28. 28. Center View A 200 300, 225 0, 0 View B 250 Tuesday, January 19, 2010 17
  29. 29. Frame 200, 100 View A 200 300, 225 View B 250 Tuesday, January 19, 2010 18
  30. 30. Transform • 45° Rotation View A 0, 0 300, 225 20 Vi 25 0 ew 0 B Tuesday, January 19, 2010 19
  31. 31. Frame • The smallest rectangle in the superview’s coordinate system that fully encompasses the view itself 140, 65 320 View A 0, 0 300, 225 20 Vi 25 0 ew 0 320 B Tuesday, January 19, 2010 20
  32. 32. Frame and Bounds • Which to use? ■ Usually depends on the context • If you are using a view, typically you use frame • If you are implementing a view, typically you use bounds • Matter of perspective ■ From outside it’s usually the frame ■ From inside it’s usually the bounds • Examples: ■ Creating a view, positioning a view in superview - use frame ■ Handling events, drawing a view - use bounds Tuesday, January 19, 2010 21
  33. 33. Creating Views Tuesday, January 19, 2010 22
  34. 34. Where do views come from? • Commonly Interface Builder • Drag out any of the existing view objects (buttons, labels, etc) • Or drag generic UIView and set custom class Tuesday, January 19, 2010 23
  35. 35. Manual Creation • Views are initialized using -initWithFrame: CGRect frame = CGRectMake(0, 0, 200, 150); UIView *myView = [[UIView alloc] initWithFrame:frame]; • Example: CGRect frame = CGRectMake(20, 45, 140, 21); UILabel *label = [[UILabel alloc] initWithFrame:frame]; [window addSubview:label]; [label setText:@”Number of sides:”]; [label release]; // label now retained by window Tuesday, January 19, 2010 24
  36. 36. Defining Custom Views • Subclass UIView • For custom drawing, you override: - (void)drawRect:(CGRect)rect; • For event handling, you override: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event; Tuesday, January 19, 2010 25
  37. 37. Drawing Views Tuesday, January 19, 2010 26
  38. 38. - (void)drawRect:(CGRect)rect • -[UIView drawRect:] does nothing by default ■ If not overridden, then backgroundColor is used to fill • Override - drawRect: to draw a custom view ■ rect argument is area to draw • When is it OK to call drawRect:? Tuesday, January 19, 2010 27
  39. 39. Be Lazy • drawRect: is invoked automatically ■ Don’t call it directly! • Being lazy is good for performance • When a view needs to be redrawn, use: - (void)setNeedsDisplay; • For example, in your controller: - (void)setNumberOfSides:(int)sides { numberOfSides = sides; [polygonView setNeedsDisplay]; } Tuesday, January 19, 2010 28
  40. 40. CoreGraphics and Quartz 2D • UIKit offers very basic drawing functionality UIRectFill(CGRect rect); UIRectFrame(CGRect rect); • CoreGraphics: Drawing APIs • CG is a C-based API, not Objective-C • CG and Quartz 2D drawing engine define simple but powerful graphics primitives ■ Graphics context ■ Transformations ■ Paths ■ Colors ■ Fonts ■ Painting operations Tuesday, January 19, 2010 29
  41. 41. Graphics Contexts • All drawing is done into an opaque graphics context • Draws to screen, bitmap buffer, printer, PDF, etc. • Graphics context setup automatically before invoking drawRect: ■ Defines current path, line width, transform, etc. ■ Access the graphics context within drawRect: by calling (CGContextRef)UIGraphicsGetCurrentContext(void); ■ Use CG calls to change settings • Context only valid for current call to drawRect: ■ Do not cache a CGContext! Tuesday, January 19, 2010 30
  42. 42. CG Wrappers • Some CG functionality wrapped by UIKit • UIColor ■ Convenience for common colors ■ Easily set the fill and/or stroke colors when drawing UIColor *redColor = [UIColor redColor]; [redColor set]; // drawing will be done in red • UIFont ■ Access system font ■ Get font by name UIFont *font = [UIFont systemFontOfSize:14.0]; [myLabel setFont:font]; Tuesday, January 19, 2010 31
  43. 43. Simple drawRect: example • Draw a solid color and shape - (void)drawRect:(CGRect)rect { CGRect bounds = [self bounds]; [[UIColor grayColor] set]; UIRectFill (bounds); CGRect square = CGRectMake (10, 10, 50, 100); [[UIColor redColor] set]; UIRectFill (square); [[UIColor blackColor] set]; UIRectFrame (square); } Tuesday, January 19, 2010 32
  44. 44. Simple drawRect: example • Draw a solid color and shape - (void)drawRect:(CGRect)rect { CGRect bounds = [self bounds]; [[UIColor grayColor] set]; UIRectFill (bounds); CGRect square = CGRectMake (10, 10, 50, 100); [[UIColor redColor] set]; UIRectFill (square); [[UIColor blackColor] set]; UIRectFrame (square); } Tuesday, January 19, 2010 32
  45. 45. Drawing More Complex Shapes • Common steps for drawRect: are ■ Get current graphics context ■ Define a path ■ Set a color ■ Stroke or fill path ■ Repeat, if necessary Tuesday, January 19, 2010 33
  46. 46. Paths • CoreGraphics paths define shapes • Made up of lines, arcs, curves and rectangles • Creation and drawing of paths are two distinct operations ■ Define path first, then draw it Tuesday, January 19, 2010 34
  47. 47. CGPath • Two parallel sets of functions for using paths ■ CGContext “convenience” throwaway functions ■ CGPath functions for creating reusable paths CGContext CGPath CGContextMoveToPoint CGPathMoveToPoint CGContextAddLineToPoint CGPathAddLineToPoint CGContextAddArcToPoint CGPathAddArcToPoint CGContextClosePath CGPathCloseSubPath And so on and so on . . . Tuesday, January 19, 2010 35
  48. 48. Simple Path Example - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor grayColor] set]; UIRectFill ([self bounds]); CGContextBeginPath (context); CGContextMoveToPoint (context, 75, 10); CGContextAddLineToPoint (context, 10, 150); CGContextAddLineToPoint (context, 160, 150); CGContextClosePath (context); [[UIColor redColor] setFill]; [[UIColor blackColor] setStroke]; CGContextDrawPath (context, kCGPathFillStroke); } Tuesday, January 19, 2010 36
  49. 49. Simple Path Example - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor grayColor] set]; UIRectFill ([self bounds]); CGContextBeginPath (context); CGContextMoveToPoint (context, 75, 10); CGContextAddLineToPoint (context, 10, 150); CGContextAddLineToPoint (context, 160, 150); CGContextClosePath (context); [[UIColor redColor] setFill]; [[UIColor blackColor] setStroke]; CGContextDrawPath (context, kCGPathFillStroke); } Tuesday, January 19, 2010 36
  50. 50. More Drawing Information • UIView Class Reference • CGContext Reference • “Quartz 2D Programming Guide” • Lots of samples in the iPhone Dev Center Tuesday, January 19, 2010 37
  51. 51. Images & Text Tuesday, January 19, 2010 38
  52. 52. UIImage • UIKit class representing an image • Creating UIImages: ■ Fetching image in application bundle ■ Use +[UIImage imageNamed:(NSString *)name] ■ Include file extension in file name, e.g. @”myImage.jpg” ■ Read from file on disk ■ Use -[UIImage initWithContentsOfFile:(NSString *)path] ■ From data in memory ■ Use -[UIImage initWithData:(NSData *)data] Tuesday, January 19, 2010 39
  53. 53. Creating Images from a Context • Need to dynamically generate a bitmap image • Same as drawing a view • General steps ■ Create a special CGGraphicsContext with a size ■ Draw ■ Capture the context as a bitmap ■ Clean up Tuesday, January 19, 2010 40
  54. 54. Bitmap Image Example - (UIImage *)polygonImageOfSize:(CGSize)size { UIImage *result = nil; UIGraphicsBeginImageContext (size); // call your drawing code... result = UIGraphicsGetImageFromCurrentContext(); UIGraphicsEndImageContext(); return result; } Tuesday, January 19, 2010 41
  55. 55. Getting Image Data • Given UIImage, want PNG or JPG representation NSData *UIImagePNGRepresentation (UIImage * image); NSData *UIImageJPGRepresentation (UIImage * image); • UIImage also has a CGImage property which will give you a CGImageRef to use with CG calls Tuesday, January 19, 2010 42
  56. 56. Drawing Text & Images • You can draw UIImages in -drawRect: - [UIImage drawAtPoint:(CGPoint)point] - [UIImage drawInRect:(CGRect)rect] - [UIImage drawAsPatternInRect:(CGRect)rect] • You can draw NSString in -drawRect: - [NSString drawAtPoint:(CGPoint)point withFont:(UIFont *)font] Tuesday, January 19, 2010 43
  57. 57. Drawing Text & Images • You can draw UIImages in -drawRect: - [UIImage drawAtPoint:(CGPoint)point] - [UIImage drawInRect:(CGRect)rect] - [UIImage drawAsPatternInRect:(CGRect)rect] • You can draw NSString in -drawRect: - [NSString drawAtPoint:(CGPoint)point withFont:(UIFont *)font] But there is a better way! Tuesday, January 19, 2010 43
  58. 58. Text, Images, and UIKit views Tuesday, January 19, 2010 44
  59. 59. Constructing Views • How do I implement this? Tuesday, January 19, 2010 45
  60. 60. Constructing Views • How do I implement this? • Goal ■ PolygonView that displays shape as well as name Tuesday, January 19, 2010 45
  61. 61. Constructing Views • How do I implement this? • Goal ■ PolygonView that displays shape as well as name • Initial thought ■ Have PolygonView draw the text ■ Inefficient when animating Tuesday, January 19, 2010 45
  62. 62. Constructing Views • How do I implement this? • Goal ■ PolygonView that displays shape as well as name • Initial thought ■ Have PolygonView draw the text ■ Inefficient when animating • Instead use UILabel! ■ Tastes great ■ Less filling Tuesday, January 19, 2010 45
  63. 63. UILabel • UIView subclass that knows how to draw text • Properties include: ■ font ■ textColor ■ shadow (offset & color) ■ textAlignment Tuesday, January 19, 2010 46
  64. 64. UIImageView • UIView that draws UIImages • Properties include: ■ image ■ animatedImages ■ animatedDuration ■ animatedRepeatCount • contentMode property to align and scale image wrt bounds Tuesday, January 19, 2010 47
  65. 65. UIControl • UIView with Target-Action event handling • Properties include: ■ enabled ■ selected ■ highlighted • UIButton: font, title, titleColor, image, backgroundImage • UITextField: font, text, placeholder, textColor • See UIKit headers for plenty more Tuesday, January 19, 2010 48
  66. 66. View Properties & Animation Tuesday, January 19, 2010 49
  67. 67. Animating Views • What if you want to change layout dynamically? • For example, a switch to disclose additional views... Tuesday, January 19, 2010 50
  68. 68. Animating Views • What if you want to change layout dynamically? • For example, a switch to disclose additional views... Tuesday, January 19, 2010 50
  69. 69. Animating Views • What if you want to change layout dynamically? • For example, a switch to disclose additional views... Tuesday, January 19, 2010 50
  70. 70. UIView Animations • UIView supports a number of animatable properties ■ frame, bounds, center, alpha, transform • Create “blocks” around changes to animatable properties • Animations run asynchronously and automatically Tuesday, January 19, 2010 51
  71. 71. Other Animation Options • Additional animation options ■ delay before starting ■ start at specific time ■ curve (ease in/out, ease in, ease out, linear) ■ repeat count ■ autoreverses (e.g. ping pong back and forth) Tuesday, January 19, 2010 52
  72. 72. View Animation Example - (void)showAdvancedOptions { // assume polygonView and optionsView [UIView beginAnimations:@”advancedAnimations” context:nil]; [UIView setAnimationDuration:0.3]; // make optionsView visible (alpha is currently 0.0) optionsView.alpha = 1.0; // move the polygonView down CGRect polygonFrame = polygonView.frame; polygonFrame.origin.y += 200; polygonView.frame = polygonFrame; [UIView commitAnimations]; } Tuesday, January 19, 2010 53
  73. 73. Knowing When Animations Finish • UIView animations allow for a delegate [UIView setAnimationDelegate:myController]; • myController will have callbacks invoked before and after - (void)animationWillStart:(NSString *)animationID context:(void *)context; - (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context; • Can provide custom selectors if desired, for example [UIView setAnimationWillStartSelector: @selector(animationWillStart)]; [UIView setAnimationDidStopSelector: @selector(animationDidStop)]; Tuesday, January 19, 2010 54
  74. 74. How Does It Work? • Is drawRect: invoked repeatedly? • Do I have to run some kind of timer in order to drive the animation? • Is it magic? Tuesday, January 19, 2010 55
  75. 75. Core Animation • Hardware accelerated rendering engine • UIViews are backed by “layers” • -drawRect: results are cached ■ Cached results used to render view ■ -drawRect: called only when contents change ■ Layers drawn from a separate render tree managed by separate process • Property animations done automatically by manipulating layers Tuesday, January 19, 2010 56
  76. 76. View Transforms • Every view has a transform property ■ used to apply scaling, rotation and translation to a view • Default “Identity transform” • CGAffineTransform structure used to represent transform • Use CG functions to create, modify transforms CGAffineTransform Functions (just a small example set) CGAffineTransformScale (transform, xScale, yScale) CGAffineTransformRotate (transform, angle) CGAffineTransformTranslate (transform, xDelta, yDelta) Tuesday, January 19, 2010 57
  77. 77. More Animation Information • iPhone OS Programming Guide ■ “Modifying Views at Runtime” section • Core Animation Programming Guide Tuesday, January 19, 2010 58
  78. 78. Assignment 3 Hints Tuesday, January 19, 2010 59
  79. 79. Saving State Across App Launches • NSUserDefaults to read and write prefs & state • Singleton object: + (NSUserDefaults *)standardUserDefaults; • Methods for storing & fetching common types: - (int)integerForKey:(NSString *)key; - (void)setInteger:(int)value forKey:(NSString *)key; - (id)objectForKey:(NSString *)key; - (void)setObject:(id)value forKey:(NSString *)key; • Find an appropriate time to store and restore your state Tuesday, January 19, 2010 60
  80. 80. Questions? Tuesday, January 19, 2010 61
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×