Add Snap Behaviour to a View in iOS7

As part of UIKit Dynamics in iOS7, you can add Snap Behavior to a view, which allows it  to be “snapped” to a specific location. The view will move to its new position as if it is pulled by a spring. In this tutorial we will let the user click on the screen to "snap" an image into place.

Update: Nov 11, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS7SnapUIKitDynamicsTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices. 

Go the Storyboard and drag a Image View to the main view, set the size to 100 by 100 points. We need a image to insert in our Image View. Download this image, unpack it and add it to the project. Select the Image View, go to the Attributes Inspector and add the apple.jpg file to Image field.

The Storyboard should now look like this.

Select the Assistant Editor and open ViewController.m. Ctrl and drag from the Image View to the @interface section and create the following outlet.

Create the following properties

@property (nonatomic, strong) UIDynamicAnimator *animator;
@property (nonatomic, strong) UISnapBehavior *snapBehaviour;

The Dynamic Animator property provides physics-related capabilities for its item and we have created a Snap Behaviour property which we will apply to our Image View later on. Next, change the viewDidLoad method to

- (void)viewDidLoad
[super viewDidLoad];

// Create Tap Gesture Recognizer
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(userHasTapped:)];
[self.view addGestureRecognizer:tap];

// Create the Dynamic Animator
self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

We have created a Tap Gesture Recognizer, which will call the useHasTapped method when the user taps on the screen. The Dynamic Animator is created with the main view as its reference view. Next, implement the userHasTapped method

- (void)userHasTapped:(UITapGestureRecognizer *)tap
CGPoint touchPoint = [tap locationInView:self.view];
if (self.snapBehaviour != nil) {
[self.animator removeBehavior:self.snapBehaviour];

self.snapBehaviour = [[UISnapBehavior alloc] initWithItem:self.myImageView snapToPoint:touchPoint];
self.snapBehaviour.damping = 0.3f;
[self.animator addBehavior:self.snapBehaviour];

First we capture the point where the user has touched the screen. There can be only one Snap Behaviour instance active so we check if there is already a behaviour active. If so, we will remove this behaviour. Next we initialize our Snap Behaviour with the initWithItem:snapToPoint method. The item is our imageview and the point to snap to is the user's touch input. The damping property is the amount of oscillation the item has of the end of the snap animation. Finally, the Snap Behaviour is added to the Dynamic Animator. Build and Run the project, click anywhere on the screen to "snap" the image to its new location.

You can download the source code of the iOS7SnapUIKitDynamicsTutorial at the ioscreator repository on github.