New physics behaviors in UIKit with Xamarin and iOS7

By | September 25, 2013

This is a super basic demonstration of the new Dynamics physics engine integrated into UIKit for iOS as done with Xamarin.

To complete this demo you will need to install Xamarin.iOS here: http://xamarin.com (you can download the indie version for free).

To start I created a new single view iPhone project.

To keep it simple all the code is done in the ViewDidLoad() method on the View Controller that gets automatically created. So in the case of the example code below it’s in UIKitDemoViewController.cs.

First thing I wanted to do was change the background color to something different:

 View.BackgroundColor = UIColor.DarkGray;

Then I need to new up my Dynamic Animator class for this view:

var animation = new UIDynamicAnimator (this.View);

Next I need a shape. I chose a rectangle and set the position to upper left, a size of 25f by 25f, and a color of red:

UIView rec = new UIView (new RectangleF (new PointF (20f, 10f), new SizeF (25f, 25f))) {

    BackgroundColor = UIColor.Red

};

I then added the rectangle to my view:

 View.Add(rec);

Now for the behaviors. For this animation I wanted a push behavior. What this does is gives something a “push” along a designated vector. I chose a push mode of continuous to keep it moving and no vector for X but a vector of 1f for Y. This will in effect push the rectangle to the bottom.

UIPushBehavior push = new UIPushBehavior (UIPushBehaviorMode.Continuous, rec);
push.PushDirection = new MonoTouch.CoreGraphics.CGVector(0f, 1f);

Then I wanted the rectangle to stop at the bottom of the view “bounds”. To do this I needed a collision behavior as well which I added below. I also added TranslatesReferenceBoundsIntoBoundary designating the view itself as the boundary:

var collide = new UICollisionBehavior (rec) {

    TranslatesReferenceBoundsIntoBoundary = true

};

To make it interesting I also wanted to create a “bounce” effect. To do this I needed to add a dynamic behavior on the item and set an elasticity:

var elastic = new UIDynamicItemBehavior (rec) {

    Elasticity = 0.7f

};

So now I have a shape, a push behavior to make it move, a collision behavior set to the view boundary, and an elasticity on the shape.

So what’s next?

How about a color change to yellow for the shape when it detects the collision on the bottom?

collide.BeganBoundaryContact += (sender, e) => {

    rec.BackgroundColor = UIColor.Yellow;

};

Last, but certainly not least, I need to tell my dynamic animator about all the behaviors I created.

To do this for multiple behaviors I just pluralize the AddBehavior method:

 animation.AddBehaviors (push, collide, elastic);

That’s it. Now I have a red square that “bounces” off the bottom of the screen and changes to yellow when it hits.

iOS Simulator Screen shot Sep 25, 2013 1.52.10 PM

For your project you’d want to split this out into multiple methods (as in DRY), but over all I hope you get the basics of some of the new things you can do in IOS 7 with dynamic behaviors.

The source code for this project can be found on Github: https://github.com/anthem001/UIKitDemo

 

 

 

 

 

 

Share and Enjoy