ios: implementing a custom view
TRANSCRIPT
![Page 1: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/1.jpg)
iOS: Custom Views
Jussi Pohjolainen
![Page 2: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/2.jpg)
About Views
• UIBu;on, UILabel, all these controls are views • Views is an – Instance of UIView or one of its subclasses – Can be drawn on applica-ons’ window – Exists in hierarchy of views, root is app window – Can handle events
![Page 3: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/3.jpg)
AppDelegate
Creates the window, puts it to screen. You can add other views to window!
![Page 4: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/4.jpg)
CreaKng Custom View
• Subclass UIView • Allocate and iniKalize the UIView • Pass View Frame to UIView • Add the view as subview of Window
![Page 5: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/5.jpg)
![Page 6: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/6.jpg)
Subview inside of Subview MyCustomView* view = [[MyCustomView alloc] initWithFrame: viewFrame];
MyCustomView* view2 = [[MyCustomView alloc] initWithFrame: viewFrame2];
[view addSubview:view2];
![Page 7: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/7.jpg)
drawRect
• Override drawRect – method in custom view • Default: does not do anything
![Page 8: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/8.jpg)
![Page 9: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/9.jpg)
![Page 10: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/10.jpg)
![Page 11: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/11.jpg)
Redraw and Events
• To redraw a view, call method setNeedsDisplay – [view setNeedsDisplay]
• To receive events – 1) Say that your custom view can do that • Return YES in method - (BOOL) canBecomeFirstResponder
– 2) Say to the view that you are the one to receive events • [view becomeFirstResponder];
![Page 12: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/12.jpg)
MoKon Event to Custom View
• Override moKonX methods in custom view – moKonBegan – moKonEnded – moKonCancelled
![Page 13: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/13.jpg)
Custom View Shake - (BOOL) canBecomeFirstResponder { return YES; } - (void) motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event { if(motion == UIEventSubtypeMotionShake) { // New color [self setCircleColor:[UIColor redColor]]; // Refresh! [self setNeedsDisplay]; } }
![Page 14: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/14.jpg)
And set the View to receive events // Create the view with given size
MyCustomView* view = [[MyCustomView alloc] initWithFrame: viewFrame];
// Set view to become the one who is receiving events!
[view becomeFirstResponder];
![Page 15: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/15.jpg)
Scrolling
• Set view larger than screen • Draw a porKon of that view – Viewing port that you move around
• UIScrollView – contentSize – the size of the area that is visible
![Page 16: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/16.jpg)
UIScrollView Example
![Page 17: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/17.jpg)
UIScrollView Example
![Page 18: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/18.jpg)
Panning and Paging
![Page 19: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/19.jpg)
Example
![Page 20: iOS: Implementing a Custom View](https://reader034.vdocument.in/reader034/viewer/2022042814/555ad998d8b42a024a8b4e7c/html5/thumbnails/20.jpg)
Hide Status Bar
• To hide status bar either: – [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationFade];
• Or in info property list of your project