Animated Components with UIKit Dynamics: Part 2

Introduction

In the first tutorial of this short series on UIKit Dynamics, we learnt the basics of the API by creating an animated menu component. In this tutorial, we'll continue working on our project and implement another animated component, a custom alert view.

1. Overview

The default alert view on iOS is great, but it's not very customizable in terms of appearance and behavior. If you need an alert view that is customizable, then you need to create your own solution and that's what we'll do in this tutorial. The focus of this tutorial is on the behavior of the alert view and not so much on its functionality. Let's see what the result is that we're after

The alert view will be a UIView instance to which we'll add the following subviews:

  • UILabel object for displaying the alert view's title
  • UILabel object for displaying the alert view's message
  • one or more UIButton instances for letting the user interact with the alert view

We'll use the UISnapBehavior class to present the alert view. As its name indicates, this UIDynamicBehavior subclass forces a dynamic item to snap to a point as if it were magnetically drawn to it.

The UISnapBehavior class defines one additional property, damping, that defines the amount of oscillation when the dynamic item has reached the point to which it is attracted.

We'll use a gravity behavior, in combination with a collision and push behavior, to dismiss the alert view. Remember that we already used these behaviors in the previous tutorial.

The alert view will animate in from the top of the screen. When the alert view is about to appear, the snap behavior will make it drop into view and snap to the center of the screen. To dismiss the alert view, a push behavior will briefly push it to the bottom of the screen and a gravity behavior will then pull it to the top of the screen and make it animate off-screen.

We'll create a custom initialization method for the alert view component that accepts the alert's title, message, button titles, and its parent view. We won't be implementing a delegate protocol for the alert view. Instead, we'll make use of blocks, which makes for a more elegant and modern solution. The block or handler will accept two parameters, the index and the title of the button the user tapped.

We'll also display a semi-transparent view behind the alert view to prevent the user from interacting with its parent view as long as the alert view is visible. Let's start by taking a look at the alert view's properties and the custom initializer.

2. Properties and Initialization

Step 1: Creating the Alert View Class

Press Command-N on your keyboard to create a new file and select Objective-C class from the list of iOS templates. Make it a subclass of NSObject and name it AlertComponent.

Step 2: Declaring Properties

The next step is to declare a few private properties. Open AlertComponent.m, add a class extension at the top, and declare the following properties:

The function of each property will become clear as we implement the alert component. It's time to create the component's custom initializer.

Step 3: Initialization

As I already mentioned, we're going to use a custom initializer to make working with the alert component as easy as possible. The initializer accepts four parameters, alert's title, its message, the button titles, and the view to which the alert component will be added, its parent view. Open AlertComponent.h and add the following declaration:

3. Setting Up the Alert View

Step 1: Declaring Setup Methods

In this part the alert view is going to be set up, and all its subviews will be added to it. Also, the background view, as well as the dynamic animator will be set up too.

Open AlertComponent.m and declare the following private methods in the private class extension:

The method names are self-explanatory. Let's start by implementing the setupAlertView method first since most of the alert's setup takes place in this method.

Step 2: Setting Up the Alert View

In setupAlertView, we do three things:

  • initialize and configure the alert view
  • initialize and configure the alert view's labels
  • initialize and configure the alert view's buttons

Let's start by calculating the alert view's size and position as shown in the code snippet below.

We start by setting the alert view's size. To make the alert view dynamic, we add 50.0 points to its height for every button. Also note that the initial origin of the alert view is off-screen. The next step is initializing and setting up the alert view:

Using alertViewSize and initialOriginPoint, we initialize the alertView object and set its background color. We round the alert view's corners by setting its layer's cornerRadius to 10.0, its borderWidth to 1.0, and its borderColor to black. We also store the alert view's initial frame in its initialAlertViewFrame property as we'll be needing it later.

If Xcode tells you it doesn't know about the alertView's layer property, then add the following import statement at the top of the implementation file:

It's time to add the labels. Let's start with the title label.

Setting up the message label is pretty similar.

Note that the numberOfLines property is set to 3 and lineBreakMode is set to NSLineBreakByWordWrapping.

The last thing we need to set up are the alert view's buttons. Even though the number of buttons can vary, setting up and positioning the buttons is pretty simple. We separate the buttons by 5 points and use a for loop to initialize them.

Note that each button invokes the handleButtonTap: method when it's tapped. We can determine which button the user tapped by inspecting the button's tag property.

Finally, add the alert view to the target or parent view by adding the following line at the bottom of the setupAlertView method:

Step 3: Setting Up the Background View

The second method we need to implement is setupBackgroundView. The background view will prevent the user from interacting with the alert view's parent view as long as the alert view is shown. We initially set its alpha property to 0.0, which means it's transparent.

Step 4: Implementing the Initializer

With setupAlertView and setupBackgroundView ready to use, let's implement the custom initializer we declared earlier.

We set the title, message, targetView, and buttonTitles properties, invoke setupBackgroundView and setupAlertView, and initialize the dynamic animator, passing in self.targetView as its reference view.

4. Showing the Alert View

To show the alert view after it's been initialized, we need to declare and implement a public method that can be called by, for example, the view controller hosting the alert view. Open AlertComponent.h and add the following method declaration:

Head back to AlertComponent.m to implement showAlertView. As I mentioned earlier in this tutorial, we'll be using a new UIDynamicBehavior subclass to show the alert view, UISnapBehavior. Let's see how we use this class in showAlertView.

We start by removing any existing dynamic behaviors from the dynamic animator to ensure that no conflicts pop up. Remember that some dynamic behaviors can only be added once to the dynamic animator, such as a gravity behavior. Also, we'll add other dynamic behaviors to dismiss the alert view.

As you can see, using a snap behavior isn't difficult. We specify which dynamic item the behavior should be applied to and set the point to which the dynamic item should snap. We also set the behavior's damping property as we discussed earlier. Also note that we animate the alpha property of the background view.

To test the alert view, we need to make some changes to the ViewController class. Let's start by adding a UIButton instance to the view controller's view to show the alert view. Open Main.storyboard and drag a UIButton instance from the Object Library to the view controller's view. Position the button near the bottom of the view and give it a title of Show Alert View. Add an action to ViewController.h as shown below.

Head back to the storyboard and connect the view controller's action to the button. Open ViewController.m and import the header file of the AlertComponent class.

Next, declare a property in the private class extension of type AlertComponent and name it alertComponent.

We then initialize the alert component in the view controller's viewDidLoad method.

To show the alert component, invoke showAlertView: in the action we just created, showAlertView:.

Run your application and tap the button to show the alert view. The result should look similar to the one below.

5. Hiding the Alert View

As we saw earlier, the handleButtonTap: method is invoked when the user taps a button of the alert view. The alert view should hide when one of the buttons is tapped. Let's see how this works.

Revisit AlertComponent.m and, in the private class extension, declare the handleButtonTap: method.

In this method, we create a number of dynamic behaviors and add them to the dynamic animator object. The dynamic behaviors we need are:

  • a gravity behavior that pulls the alert view towards the top of the screen
  • a collision behavior with an off-screen boundary that stops the alert view
  • a push behavior that gives the alert view little nudge towards the bottom of the screen

After removing the existing behaviors from the dynamic animator and initialize the push behavior as shown below.

The angle property of the push behavior defines the direction of the push. By setting the angle to M_PI_2, the force of the push behavior is directed towards the bottom of the screen.

The next step is adding the gravity behavior. The vector we pass to setGravityDirection will result in a force towards the top of the screen, pulling the alert view upwards.

What's interesting about the collision behavior is that we define a boundary that is off-screen.

We also need a dynamic item behavior for setting the elasticity of the collision. The result is that the alert view will bounce a little when it collides with the off-screen boundary.

We also need to make the background view transparent again. We do this by setting the background view's alpha property to 0.0 in an animation block.

Run your application once more to see the result.

6. Handling User Interaction

Even though the alert view responds to user interaction, we currently don't know which button the user has tapped. That's what we'll focus on in this section.

As we did with the menu component, we're going to make use of blocks to solve this problem. Blocks make for an elegant solution and can often be easier to use than a delegate protocol.

We start by updating the public showAlertView method. The method needs to accept a completion handler that the alert view invokes when the user has tapped one of the buttons. In AlertComponent.h, update the declaration of the showAlertView method from:

to:

The completion handler accepts two parameters, the index, of type NSInteger, and the title, of type NSString, of the button that was tapped by the user. If we want to invoke the completion handler when the user taps a button of the alert view, we need to keep a reference to the completion handler. This means we need to declare a property for the completion handler. We do this in the private class extension in AlertComponent.m.

Still in AlertComponent.m, update the method description like we did in the header file a moment ago and store the completion handler in the selectionHandler property, which just we declared.

The last piece of the puzzle is invoking the completion handler in handleButtonTap:, passing in the button's tag and title.

The AlertComponent is complete. It's time to test everything. Head back to ViewController.m and update the showAlertView: action as shown below. As you can see, we invoke the new showAlertViewWithSelectionHandler: method and pass in a block, which will be called when a button in the alert view is tapped by the user.

That's it. Run your application once more and inspect Xcode's console to see the result of our work.

Conclusion

UIKit Dynamics was first introduced in iOS 7 and can help you create realistic animations quickly. This short series has illustrated that leveraging UIKit Dynamics in your projects isn't difficult and you don't need to be an expert in math or physics.

Note that UIKit Dynamics is primarily meant for using in view based applications. If you're looking for a similar solution for games, then I recommend taking a look at Apple's Sprite Kit, which is aimed at game development.

Tags:

Comments

Related Articles