An Introduction to UIDynamics for iOS 7

Covers gravity and collisions of View dynamic items. Shows how to pan (drag) views.

Transcript

1. An Introduction to UIDynamics in iOS 7 Ron Mourant @ronm333 Boston MacTechGroup October 1, 2013 Wednesday, October 2, 13
2. Why UIDynamics? Enhance the user experience in a subtle manner. Examples when the screen is locked: Drag from top to get Notification Center (Swipe and it opens with a bounce) Swipe from bottom to get Control Center (small bounce upon appearance) Drag camera up to activate Camera App (bounce effect when drag let go) Wednesday, October 2, 13
3. Wednesday, October 2, 13
4. Three Demos GravityOne - When you click a button in a subview, gravity is assigned to the subview. CollisionOne - A boundary line is placed in the superview. When the subview collides with the boundary, it bounces. PanOne - After the collision, the subview becomes draggable. Drag the subview up and release the drag. Its gravity results in it colliding with the boundary again. Wednesday, October 2, 13
5. UIGravityBehavior @property(readwrite, nonatomic) CGVector gravityDirection default is down (0.0, 1.0) Standard acceleration is 1000 points / sec2 @property(readwrite, nonatomic) CGFloat magnitude 1.0 is standard acceleration @property(readwrite, nonatomic) CGFloat angle (in radians) Wednesday, October 2, 13
6. GravityOne - Main.storyboard Wednesday, October 2, 13
7. @interface ViewController () @property (strong, nonatomic) UIDynamicAnimator *animator; @property (strong, nonatomic) UIGravityBehavior *gravityBehavior; @property (weak, nonatomic) IBOutlet UIView *fallingView; - (IBAction)StartGravity:(id)sender; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; } - (IBAction)StartGravity:(id)sender { NSMutableArray *dynamicItems = [[NSMutableArray alloc] init]; [dynamicItems addObject: self.fallingView]; self.gravityBehavior = [[UIGravityBehavior alloc] initWithItems:dynamicItems]; [self.animator addBehavior:self.gravityBehavior]; } RUN DEMO GravityOne Wednesday, October 2, 13
8. UICollisionBehavior @property(nonatomic, readwrite) UICollisionBehaviorMode collisionMode UICollisionBehaviorModeItems UICollisionBehaviorModeBoundaries UICollisionBehaviorModeEverything (default) -(void)addBoundaryWithIdentifier:(id<NSCopying>)identifier fromPoint:(CGPoint)p1 toPoint:(CGPoint)p2 Example: fromPoint:CGPointMake(0, 0) toPoint:CGPointMake(self.view.frame.size.width , 0) // A UIView has a CGRect frame. // A CGRect has a CGsize which specifies height and width. Wednesday, October 2, 13
9. UICollisionBehavior - Continued UICollisionBehaviorDelegate Protocol: – collisionBehavior:beganContactForItem:withBoundaryIdentifier:atPoint: – collisionBehavior:beganContactForItem:withItem:atPoint: – collisionBehavior:endedContactForItem:withBoundaryIdentifier: – collisionBehavior:endedContactForItem:withItem: @property(nonatomic, assign, readwrite) id<UICollisionBehaviorDelegate> collisionDelegate Wednesday, October 2, 13
10. @interface ViewController () @property (strong, nonatomic) UIDynamicAnimator *animator; @property (strong, nonatomic) UIGravityBehavior *gravityBehavior; @property (strong, nonatomic) UICollisionBehavior *collisionBehavior; @property (weak, nonatomic) IBOutlet UIView *fallingView; - (IBAction)startCollision:(id)sender; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; } - (IBAction)startCollision:(id)sender { NSMutableArray *dynamicItems = [[NSMutableArray alloc] init]; [dynamicItems addObject: self.fallingView]; self.gravityBehavior = [[UIGravityBehavior alloc] initWithItems:dynamicItems]; [self.animator addBehavior:self.gravityBehavior]; self.collisionBehavior = [[UICollisionBehavior alloc] initWithItems:dynamicItems]; [self.collisionBehavior addBoundaryWithIdentifier:@"middle" fromPoint:CGPointMake(0, 512) toPoint:CGPointMake(self.view.frame.size.width , 512)]; [self.animator addBehavior:self.collisionBehavior]; } RUN DEMO CollisionOne Wednesday, October 2, 13
11. PanOne - Main.storyboard Wednesday, October 2, 13
12. - (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer { if(recognizer.state == UIGestureRecognizerStateEnded) { [self.animator updateItemUsingCurrentState:self.fallingView]; } CGPoint translation = [recognizer translationInView:self.view]; recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x, recognizer.view.center.y + translation.y); [recognizer setTranslation:CGPointMake(0, 0) inView:self.view]; } RUN DEMO PanOne Wednesday, October 2, 13
13. Lots of UIDynamics Left for Another Time UICollectionViewLayoutAttributes - supports the UIDynamicItem Protocol. For adding dynamics in collection views. UIPushBehavior - Applies forces to dynamic items. UISnapBehavior - Snaps to a point with spring-like behavior. UIAttachmentBehavior - A connection to an anchor point or another dynamic item. UIDynamicItemBehavior - Allows overriding of properties such as friction, resistance, elasticity, and density. Wednesday, October 2, 13
14. Additional Information https://developer.apple.com/wwdc/videos/ Getting Started with UIKit Dynamics 206 Advanced Techniques with UIKit Dynamics 221 iOS 7: UIKit Dynamics by Paul Warren - Good Introduction http://www.doubleencore.com/2013/09/ios-7-uikit-dynamics/ Good overview of the behaviors http://weblog.invasivecode.com/post/61654699557/ui-dynamics-in-ios-7-ios-7-is-gold-master-it This is a sample tutorial given by Colin Eberhardt http://www.raywenderlich.com/50197/uikit-dynamics-tutorial This is a pendulum done with UIDynamics by by Sammy Davies http://www.shinobicontrols.com/blog/posts/2013/09/19/ios7-day-by-day-day-0-uikit-dynamics/ Spring behavior on collections by Sammy Davies http://www.shinobicontrols.com/blog/posts/2013/09/26/ios7-day-by-day-day-5-uidynamics-with- collection-views/ Bharat Gulati A pong game http://www.codigator.com/tutorials/uikit-dynamics-ios7-tutorial/ Jonathan Blocksom A pong game http://blog.bignerdranch.com/3899-uikit-dynamics-and-ios-7-building-uikit-pong/ Step Christopher - Collections demo https://github.com/bignerdranch/iOS7Demos/tree/master/Collections Wednesday, October 2, 13