Creating a Magnetic Effect Between UI Components - UI Dynamics - iOS 9 Swift Programming Cookbook (2015)

iOS 9 Swift Programming Cookbook (2015)

Chapter 13. UI Dynamics

13.5 Creating a Magnetic Effect Between UI Components

Problem

You want to create a magnetic field between two or more UI elements.

Solution

Follow these steps:

1. Create your animator (see Recipe 13.1).

2. Create a collision detector of type UICollisionBehavior.

3. Create a magnetic field of type UIFieldBehavior using the magneticField() class method of UIFieldBehavior.

4. Add your magnetic field and collision detector to your animator.

NOTE

I am basing this recipe on what we learned in Recipe 13.4 and Recipe 13.1.

Discussion

Create a UI that looks similar to Figure 13-6.

Figure 13-6. Place 3 colorful views on your UI

Then link all views to an outlet collection called views in your code:

class ViewController: UIViewController {

@IBOutlet var views: [UIView]!

...

Now that you have an array of views to which we want to apply a noise field and a magnetic field, it’s best to extend UIFieldBehavior so that you can pass it an array of UI elements instead of one element at a time:

extension UIFieldBehavior{

func addItems(items: [UIDynamicItem]){

for item in items{

addItem(item)

}

}

}

Also, it’s best to extend UIDynamicAnimator so that you can add all our behaviors to our animator at once:

extension UIDynamicAnimator{

func addBehaviors(behaviors: [UIDynamicBehavior]){

for behavior in behaviors{

addBehavior(behavior)

}

}

}

Now add a noise and collision behavior, plus your animator, using what you learned in Recipe 13.4. I won’t repeat that code here. Create a magnetic field and enable it on all your views (see Figure 13-6):

lazy var magnet: UIFieldBehavior = {

let magnet = UIFieldBehavior.magneticField()

magnet.addItems(self.views)

return magnet

}()

Last but not least, add your behaviors to the animator:

var behaviors: [UIDynamicBehavior]{

return [collision, noise, magnet]

}

override func viewDidLoad() {

super.viewDidLoad()

animator.addBehaviors(behaviors)

}

Run the app and see the results for yourself:

Figure 13-7. The magnetic field causes all the views to attract one another

See Also