View
0
Download
0
Category
Preview:
Citation preview
MediaComputing
Group
Mobile Application DevelopmentL06: iOS Drawing and Animation
Jonathan Diehl (Informatik 10)Hendrik Thüs (Informatik 9)
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Views
2
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
UIView
3
Responsibilities
Draw contentArrange subviews
React to touch events
Defines a rectangular area on the screen
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Simple Views
4
UILabel
UITextField
UISlider
UIActivityIndicatorView
UIPageControl
UIButton
UISwitch
UIProgressView
UISegmentedControl
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Bar Views
5
10:15 PM10:15 PMiPhone
Search
Status Bar
UINavigationBar
UISearchBar
UIToolbar
UITabBar
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Complex Views
6
MKMapView
UIWebView
UITableView
UITextView
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Draw content
7
• How? CoreGraphics
• Get the graphics context
• Configure the brush (color, line width, etc.)
• Define a shape
• Stroke or fill the shape
• Where? Subclass UIView
• override - (void)drawRect:(CGRect)rect
• For redraw: [view setNeedsDisplay]
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Drawing Example
- (void)drawRect:(CGRect)rect {
// Get the graphics contextCGContextRef context = UIGraphicsGetCurrentContext();
// Set stroke and fill color [[UIColor whiteColor] set];
// Define a line as the shape to be drawn! CGContextMoveToPoint(context, 10.0, 30.0);! CGContextAddLineToPoint(context, 310.0, 30.0);
// Stroke the line! CGContextStrokePath(context);
}
8
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Layout (Sub-) Views
9
• Where?
• In the interface description (.xib)
• In a View Controller (e.g., loadView)
• In a View (initWithFrame:)
• How?
• Manage the view hierarchy (subviews, superviews)
• Manage the frame and bounds
Frame vs. Bounds
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
FrameOrigin: 0, 0Size : 320, 480
BoundsOrigin: 0, 0Size : 320, 480
BoundsOrigin: 300, 100Size : 320, 480
10
Frame vs. Bounds
Jonathan Diehl, Hendrik ThüsMediaComputing
Group11
FrameOrigin: 0, 0Size : 320, 480
BoundsOrigin: 300, 100Size : 320, 480
FrameOrigin: 0, 100Size : 320, 480
Frame vs. Bounds
Jonathan Diehl, Hendrik ThüsMediaComputing
Group12
FrameOrigin: 0, 0Size : 320, 480
BoundsOrigin: 300, 100Size : 320, 480
FrameOrigin: 0, 0Size : 320, 380
BoundsOrigin: 300, 100Size : 320, 380
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Automatic Layout
• parent.autoresizesSubviews = YES
• Define an autoresize mask
• In the interface description (.xib)
• view.autoresizingMask = ...
• Resizing Behavior
• flexible left / top / right / bottom margin
• flexible width / height
13
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
React to Touch Events
• How?
• view.userInteractionAllowed = YES
• Multitouch: view.multipleTouchEnabled = YES
• Where?
• Subclass UIView
• Override event handling methods
• Events are also forwarded to the View Controller!
14
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Touch Events
// initial touch- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
// updated touch- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
// cancelled touch (by external event)- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
// finished touch- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
15
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Animation
16
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Core Animation
17
Implicit Animations
Changing animatable properties triggers implicit animations
Explicit Animations
Create an animation object that defines and controls the animation
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Implicit Animations
static int i = 0;
// start an implicit animation[UIView animateWithDuration:1.0 animations:^{
// move the viewview.center = CGPointMake(50+random() % 220, 50+random() % 360);
// rotate the viewview.transform = CGAffineTransformMakeRotation( random() % 360);
// change the colorview.backgroundColor = i++ % 2 ? [UIColor blueColor] : [UIColor redColor];
}];
18
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Explicit Animations
• Create Animation Object
• CABasicAnimation
• CAKeyframeAnimation
• Configure animation
• Duration
• Timing function
• Key-path of animated property
• From and to value
19
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Example: Move Animation
CGPoint position = CGPointMake(100, 200);
// create an animation objectCABasicAnimation *move = [[CABasicAnimation alloc] init];
// configure the key path and valuemove.keyPath = @"position";move.toValue = [NSValue valueWithCGPoint: position];
// set the animation durationmove.duration = 1.0;
// start the animation[timeLabel.layer addAnimation:move forKey:@"moveAnimation"];!
20
Jonathan Diehl, Hendrik ThüsMediaComputing
Group
Transformations
• Animations can use affine transformations to manipulate the layer’s geometry
• CGAffineTransform
• Every rendered pixel is transformed
• Common transformations:
• CGContextTranslateCTM: move origin
• CGContextScaleCTM: change size
• CGContextRotateCTM: rotate around anchorPoint
21
Recommended