Basic animation, Auto Layout, and view geometry – Part 1

[Download the full Xcode project from GitHub.]

We’re going to learn about basic animation in the next few series of posts, “Basic animation, Auto Layout, and view geometry – Part X.” In order to perform animations, we need to lay the foundation for a simple app. We’ll be 1) setting up a storyboard scene using Auto Layout (this post), 2) using some basic UIView geometry to play with shapes and sizes (Part 2), and 3) writing the code in Swift and Objective-C to explore iOS animation capabilities (Part 3). After Part 3, we’ll start solidifying all the concepts you’ve learned in this series, tie all these concepts together, and come to the realization that these concepts will be indispensable in almost all your iOS development efforts. I’ll make all the source code available to y’all on GitHub as we move forward.

NOTE: The iOS skill level required herein is “beginner” to “intermediate.” One of the purposes of this blog is to help aspiring new iOS developers get started on the right foot. For all you seasoned (or “advanced”) developers out there, I encourage you to stick with this blog as we’ll be covering very complex iOS scenarios too. Everyone can benefit from these articles, including myself, by getting your feedback.

Create a new Xcode 8.x project, selecting a Single View Application, naming the project “Animation Demo,” filing out all the required new project fields, selecting “Swift” as the Language, and setting “iPhone” for Devices.


In Main.storyboard, accept the default Auto Layout Device of “View as: iPhone 7 (wC hR)”. Drag a UIView from the Object Library onto your only UIViewController scene. Click the Size Inspector and set the UIView’s Width and Height to 240 and 240 points, respectively, to get a perfect square. Select the UIView and set Auto Layout constraints for the UIView as follows:

  • Align: Horizontally in Container
  • Align: Vertically in Container

Select the UIView again and control-drag diagonally from the lower left side to the upper-right side. In the context menu that pops up, set constraints as follows:

  • Width
  • Height
  • Aspect Ratio

If I wouldn’t have set the previous three constraints, the UIView would not have an Intrinsic Content Size — it’s width and height would be 0 and 0 points, respectively, and it wouldn’t be visible.

You’ll see the following in Interface Builder (click to enlarge):

Set the Background of your new UIView to “Light Gray Color.” Test your work by running the app on the “iPhone 7” in the Simulator or on an iPhone. If I wouldn’t have set the Background color to other than the default white, the UIView would show up as nothing — invisible — in the Simulator or iPhone. That scenario wouldn’t be helpful in the current exercise.

The purpose of my madness so far was to set up a base UIView in which to perform animations. The constraints I’ve set will keep the UIView centered on all iPhone screens, whether displayed in the Simulator or on an actual device, and regardless of orientation.

Before closing this chapter in our series, let me show you an important feature of Xcode and Interface Builder.

Select our UIViewController scene in the current storyboard. Go up to the Assistant Editor button, click, and select “Assistant Editors on Bottom.” A new window will open up below Interface Builder. In the navigator at the top of the Assistant Editor window, click on “Automatic” and switch to “Preview.” Select “Preview -> Preview (1) -> Main.storyboard (Preview).” A big white window will open up showing only the text “No Preview Choices.” Look for the “+” button in the lower left bottom toolbar of the “Preview” window. Follow these steps:

  • Click the “+” and select “iPhone 4s”;
  • Click the “+” and select “iPhone SE”;
  • Click the “+” and select “iPhone 7”;
  • Click the “+” and select “iPhone 7 Plus”;

   

You’ll see this (click to enlarge):

This is live, realtime design, y’all. Dang. Any changes you make in Interface Builder will be reflected here instantly. Gone are the days of having to run your app in a bunch of different versions of the Simulator, or having to run your app on a bunch of different iPhones, just to see changes you’ve made to design. Note that you should always test your designs on real devices, but using “Preview” can cut down drastically on the time you spend developing user interfaces.

It gets even better. Look at the bottom of each device’s visual representation. Notice that each one says “iPhone XX | Portrait.” Click on one of the devices. See the icon next to “iPhone XX” with a curved arrow?

It’s intuitive. Guess what clicking that button does? It rotates your device! Try it. Hoo-rah! Now go up to Interface Builder, click on the gray UIView, go into the Attributes Inspector, and set the UIView’s Background to blue. Check it out — your change was reflected on all your virtual devices (click to enlarge):

We seemingly did so little in this post yet we covered a lot of ground. Check in tomorrow for Part 2 of this series. We’ll start doing some UIView geometry and basic animation. As always, post a comment if you have questions or feedback. Thanks!

   

[Download the full Xcode project from GitHub.]

Author: Andrew Jaffee

Avid and well-published author, software engineer, designer, and developer, now specializing in iOS mobile app development in Objective-C and Swift, but with a strong background in C#, C++, .NET, JavaScript, HTML, CSS, jQuery, SQL Server, MySQL, Oracle, Agile, Test Driven Development, Git, Continuous Integration, Responsive Web Design, blah, blah, blah ... Did I miss any fad-based catch phrases? My brain avatar was kindly provided by https://icons8.com under a Creative Commons Attribution-NoDerivs 3.0 Unported license.