Prototyping UIView Animations in a Swift Playground

Written by: on March 10, 2015

Creating UIView animations can be tedious work. Getting the animation in place and functioning is often only the first challenge. Polishing the animation can take just as much time and effort. This polishing phase usually involves making many small tweaks. With each of those small adjustments comes building and running the app followed by navigating to a view where the animation occurs. Playgrounds can make this process more efficient by cutting out some of time spent building and running and all of the time spent navigating.

A couple quick steps are required to get your Playground configured for UIView development. Once the Playground is created and open, the first step is to make sure the platform of the Playground is set to iOS and the Run in Full Simulator option is enabled. Both of these settings are accessed via File Inspector. To open File Inspector navigate to View -> Utilities -> Show File Inspector. Then correctly set the Platform drop down to iOS and check the Run in Full Simulator box. Next, make sure the Assistant Editor is showing. The Assistant Editor can be opened from View -> Assistant Editor -> Show Assistant Editor.

PlaygroundSettings

Now that the Playground is setup, it’s time to write some code. First import UIKit and XCPlayground. XCPlayground in conjunction with the Run in Full Simulator option will cause the iOS Simulator to launch and run in the background. This allows the Playground to draw UIViews in the Timeline. The most efficient way to get views drawing and animating is to create a container view that will hold all of the other views. Make the container view a UIView that simulates the size of the screen you are creating the animation for. Then call XCPShowView(identifier: String, view: UIView) and pass in your container view. This XCPShowView call tells XCPlayground to draw the container view in the Timeline. From here on out it is UIKit development as usual. Create a view hierarchy starting with the container view and then manipulate and animate the views. As you modify or add code the Playground will execute and the animation will play in the Timeline. If you want to force the Playground to execute again without making any changes you can use Editor -> Execute Playground.

UIViewAnimationPlayground

There are some limitations and draw backs to UIKit in Playgrounds. The primary limitation is that Auto Layout has some issues when used in Playgrounds. Some constraints will cause runtime exceptions in addition to increased compile times. Hopefully future updates to Xcode will resolve this. Another draw back is the performance of Playgrounds when using XCPlayground. There can be delays as Xcode works with the iOS Simulator running behind the Playground.

Even with some limitations and performance issues Playgrounds are still a powerful UIKit prototyping tool and UIView animations are just one of the many possible use cases. UIKit Dynamics and Core Graphics drawing are a couple more features that can potentially be rapidly developed and iterated on in Playgrounds using XCPlayground. The efficiency of this process allows more time to be spent polishing the UI to perfection.

Taylor Case

Taylor Case

Taylor Case is a Software Engineer at POSSIBLE Mobile specializing in iOS Development. Taylor also enjoys cycling, pina coladas, and getting caught in the rain. Follow Taylor on Twitter or visit his website.
Article


Add your voice to the discussion: