UIKit Dynamics Attachment Behaviour iOS Tutorial

The UIAttachmentBehavior class can be used to create a connection between two items or between an item and a anchor point. In this tutorial a view is attached to an anchor point, this anchor point can be moved by using a tap gesture. This tutorial is made with Xcode 10 and built for iOS 12.

Project Setup

Open Xcode and create a new Single View App.

For product name, use IOSAttachmentBehaviourTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Storyboard Setup

Go to the Storyboard and drag a View from the Object Library to the main View. Change the background color to black in the Attribute Inspector. Go to the size inspector and change the width and height to 25.

Add another View and change the background color to blue. Also go to the size inspector and change the width and height to 100.

The small, black view will be the anchor where the blue view will be attached to. Next, add a Tap Gesture Recognizer to the main View. The Storyboard will look like this.

Outlet and Action Connections

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the small black View to the ViewController class and create the following Outlet.

Ctrl and drag from the blue View to the ViewController class and create the following Outlet.

Ctrl and drag from the Tap Gesture Recognizer and create the following Action. Make sure the Type is changed from Any to UITapGestureRecognizer.

Code Implementation

Go to the ViewController.swift file and create the following properties.

var anchorPoint: CGPoint!
var attachment: UIAttachmentBehavior!
var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!

Change the viewDidLoad method to

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 1
    anchorPoint = smallView.center
    
    // 2
    attachment = UIAttachmentBehavior(item: blueView, attachedToAnchor: anchorPoint)
    attachment.length = 100
    attachment.frequency = 10
    attachment.damping = 5
    
    // 3
    animator = UIDynamicAnimator(referenceView: view)
    animator.addBehavior(attachment)
    
    // 4
    gravity = UIGravityBehavior(items: [blueView])
    animator.addBehavior(gravity)
  }
  1. The anchorPoint is set to the center of the small Vie

  2. The blueView is attached to the anchor point and the length,frequency and damping properties are set

  3. The attachment behaviour is added to the dynamic animator

  4. The gravity behaviour is also added to the dynamic animator

Next, implement the  handleTap method

 @IBAction func handleTap(_ sender: UITapGestureRecognizer) {
    attachment.anchorPoint = sender.location(in: view)
    smallView.center = sender.location(in: view)
}

The anchorPoint and the center location of the smallView are updated to the location of the tap.

Run Project

Build and Run the project, Tap in the main view to update the anchor point.

You can download the source code of the IOSAttachmentBehaviourTutorial at the ioscreator repository on Github.