Making iOS apps sexy

Login to Access Code

Login to access video

Here is a typical scenario: you have an app that solves a problem, but nobody wants to use it because it looks ugly. This screencast will help you take your app from plain to sexy with a few very easy to learn tricks and tips on how to add some visual effects to your iOS apps using custom animations, custom fonts, and UIkit.

Xcode Project Setup with Cocoapods

Our first foray into simple animations and visual effects involves a handy Cocoapod framework called Canvas. If you’re unfamiliar with Cocoapods, it is a Ruby-based dependency manager that makes it easy to integrate third-party libraries into your projects. The canvas cocoapod is targeted at designers, and therefore, makes it easy to solve common UI problems in Xcode.

To get Canvas in our project, you need to install Cocoapods

Once you have Cocoapods installed, we can get Canvas. Before we do that, let’s start off by creating a new xcode project for iPhone. We are going to demonstrate all of our techniques on a single view, so go ahead and create a single view application and make sure our language is set to Swift.

Screenshot

Screenshot

Once we’ve saved our project into a directory, open up the Temrinal and navigate to that project’s root directory. Once there, we need to create a file in our project directory called Podfile in which we’ll put our dependencies:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '7.0'

pod 'Canvas', '~> 0.1'

Save the Podfile and return to your Terminal window and build the project pods by running pod install in our project directory.

Now you have the canvas pod readily available. Our command also turned our Xcode project into a workspace so go ahead and close the current project and open the AppName.workspace file that has now been added to your Xcode project’s root directory. You can see the Pods file added to your project in the project navigator.

Screenshot

Set up our Layout

Now that we have our Canvas pod installed, we need to go to our Main.storyboard file and create our layout for our white modal window. Drag a view object onto your main view from the your object library.

Screenshot

Let’s take advantage of Auto Layout and add some constraints to our view by double clicking on the Pin option of the Auto Layout menu. Set the top constraint to 53 and the left and right constraints for 20 each. Set a height constraint to 400.

Screenshot

Select the “Items of New Constraints” option form the update frames dropdown. Then click “add 3 constraints”. Now from the Pin menu, select the Horizontal Center in container option. Just like we did for our constraints, select the “Items of New Constraints” option form the update frames dropdown. Then click “add 1 constraint”.

Screenshot

Now let’s add a dark purple color to our view. Go to the attributes inspector of our parent view and select a dark purple color for the background color.

Screenshot

Lastly let’s give our white modal some vertical padding by clicking on our view and navigating to the size inspector. From there, change the “Top Space” equal to 50.

Screencast

Now let’s build and run to make sure our constraints are rendering the view the way we want.

Screencast

Perfect.

Setting runtime variables for visual elements

There are multiple ways to set the attributes such as border radius and drop shadow for the visual elements in our view. We appreciate that Xcode is an IDE that allows us to set runtime attributes without having to write code. Whether or not it is easier to set visual styling in code is easier or harder than using a GUI is not a debate we’ll get in to, but one benefit of using the GUI is that you can collaborate with a designer who can tweak the properties of our elements without having to learn Swift of Objective-C. For that reason, we’re going to avoid writing code if we can. Let’s add a border radius and drop shadow to our view. To do that, select our white modal view in the main.storyboard file and add the following attributes to the runtime inspector:

Screencast

layer.cornerRadius adds a rounded border to our view. ShadowOffset, shadowRadius, and shadowOpacity help us define a drop shadow for our view. One attribute that might be a bit confusing is layer.MasksToBound. MasksToBound is a boolean that handles whether or not visual elements that overflow the boundaries of the view are shown. If we set layer.masksToBound to true, any sublayers of the layer that extend outside its boundaries will be clipped to those boundaries.

Getting animated with Canvas

In order to use our Canvas cocoapod, we need to make our view a subclass of CSAnimationView in the Identity Inspector of our white modal window. Once you do that, you have the Canvas attributes available for you to set. We are going to set our animation duration, delay, and type just like we set the other runtime attributes. Your table of user defined attributes should now look like this:

Screencast

Build and run and you should see a your white modal window animate down from off the screen and into place!

Adding type and input fields to our modal

Our sexy modal animates onto the view, giving a nice visual effect that will delight our users. Now we need to add the actual content into the modal, because what good is a sexy animation without any good content? Our modal is going to contain a login form, which might seem like a dead simple thing, but that doesn’t mean we can ignore the importance of making it sexy. Understand that when you create an app and your brand doesn’t have a track record, your user is going to use your design as an indicator of quality. Things that feel professional and polished are easier to trust, and therefore your users will be more willing to interact with your app if it immediately looks well-designed.

Our login form will contain a heading, some body text under the heading, two input fields for email and password, and a button to login. Let’s get to it

Modal Heading

Our modal heading is going to be a label object, so drag a label object from the object library onto our white modal view and add the following values for the left, right, and top constraints:

Screencast

Now in the attributes inspector, let’s change the label text to say “Welcome Back” and center align the text. Most of the time, all of our type is going to benefit from using a custom font. It is an easy way to give your app a unique look and feel without much work. For this example, we will be using Futura. So change the font in the attributes inspector to Futura Condensed ExtraBold if you have it installed. If not, find a bold sans-serif font you like and keep following the tutorial, though the exact spacing or font size might vary depending on which font you choose. Don’t worry, trust your eyes to find what looks good. We should also change the color of our heading to a teal color to make it stand out from the body text. Here’s what the attributes inspector for your label should look like, along with the label itself:

Screenshot

Our label is a bit too close to the top of the view, so we should bring our label down some. In the size inspector, change the “top leading space option” to 40.

Modal body text

Our login modal now needs some body text that gives the user instructions on what to do on this view. For that we need another label from our object library. Add the following constraints (top, left, and right) to this label. One thing to note on this one is that the top constraint is relative to its closest neighbor, it does not refer to absolute coordinates. Here are the attributes for our body text:

Screencast

Change the label text to “Please login to continue. You may use your screen name or email in the username field.” We are gonna use the font Avenir in size 15 for this text and we’ll set a dark grey color for the font color. We also leave the the lines option in the attributes inspector to 0 so our text can take up as many lines as it needs without truncating. Here’s what the attributes inspector for our body text label looks like:

Screencasts

Build and run and you should have this:

Screencasts

Adding Input fields

Customizing the look of input fields without coding is impossible. In fact, most developers use an image view as a background for their input field to give the effect of a custom padding or margin on the input field. For this tutorial, we won’t customize the input field. We are simply going to drag two text fields from our object library onto our modal with identical constraints, one with a placeholder text of “username”, and one with the placeholder text of “password”. The constraints for each text field is:

Screencast

Adding our submit button

Now we just need to add a button from our objects library that will be our submit button. As always we add constraints.

Screencast

We want our button to stand out visually so let’s give it the same background color as our heading and let’s change the prompt on the button to “log me in!.” We will also use Futura again, this time in a medium weight. Finally change the text color to be white. Our result is now looks like:

Screencast

Using UI Kit for Visual Feedback

Our animations heretofore have focused on delighting the user and giving our app a professional and polished appearance. While delighting the user is important, a far more important use for animation is providing useful visual feedback that informs the user’s next step. One common example is when a user submits a form with an invalid entry, the field that is invalid shakes to indicate an invalid input. Let’s create that effect using UIKit.

We are going to need to reference the storyboard elements in our code down the road. In order to do that, open both the main.storyboard and ViewController.swift files. Control-click on the input field under the username label and drag the line that gets created into the ViewController.swift. An input field will appear, enter usernameField. This defines a variable that refers to our input field. Do the same for the second input field and call that passwordField.

Screenshot

We are also going to trigger our shake animation when the form gets submitted, so we have to tie an action to the tap gesture on the submit button so when a user taps the button, the action gets called. In order to that we first define our IBAction in viewController.swift under the definitions for the IBOutlets.

@IBAction func loginAction (sender: AnyObject) {}

Now we go to Main.storyboard and we control click on our button to reveal and drag an outlet from the touchUpInside event to the @IBAction in ViewController.swift.

Screenshot

Before we define our loginAction method, notice we have UIKIt imported. UIKit allows us to add physics and custom animations and all kinds of helpers to a view. UIKit provides a class method on UIView called animateWithDuration that we are going to use to define three stages of our inputfield animation. Write the following code in your loginAction method:

@IBAction func loginAction (sender: AnyObject)
{
  UIView.animateWithDuration(
    0.1,
    animations: {
      self.usernameField.frame.origin.x = 15
    },
    completion: { finish in
      UIView.animateWithDuration(
        0.1,
        animations: {
          self.usernameField.frame.origin.x = 25
        },
        completion: { finish in
          UIView.animateWithDuration(
            0.1,
            animations: {
              self.usernameField.frame.origin.x = 20
            }
          )
        }
      )
    }
  )
}

We are creating a chain of animations where the subsequent animation is triggered when the previous one has completed. In the each step we are horizontally moving the field left and right across the x axis. We set the end distinction for the field using self.usernameField.orgin.x and UIKit takes care of animating between the starting point and the end point for the length of the duration we set. Build and run and you’ll see the username field shake when you hit the submit button!

UIVisualEffectView

We could wrap it here, but we’re too excited about sexy apps to stop. We are going to add one more button to our login screen that will illustrate a common visual effect in Apple’s own design language: UIVisualEffectView. A UIVisualEffectView is an object that makes it easy to implement the blur effect on UI elements that Apple has been using since iOS 7. Apple (rightfully) figured its developers would want to mimic their blur effect, so they decided to spare us the misery of rolling our own substitute. Let’s see how to use UIVisualEffectView. Start off by adding a button object from our object library onto our view, ensuring it is outside the CSAnimationView (aka the white modal). Add a bottom constraint of 30 and give the button a height and width of 100:

Screenshot

We are also going to center the button in the container by selecting the option from the alignment menu.

Screenshot

We are going to set the background of this button to an image. In this exmaple, we are going to add the Swiftcast logo. Select the images.xcassets folder in the project navigator and drag your image into your project at the various sizes. Now back in main.storyboard we can set our button’s background image to our image in the button’s Attributes Inspector. Now let’s make an IBAction outlet in ViewController.swift, just like we did for the submit button. Control-click on our button to reveal and drag an outlet from the touchUpInside event to the @IBAction in ViewController.swift. Call this action showAboutWindow.

Screenshot

Now let’s go to ViewController.swift and get to some code writing. Define an optional variable that will refer to our UIVisualEffectView.

var aboutOverlay: UIVisualEffectView?

We now need to put some code in our showAboutWindow method. Write the following code into your method.

@IBAction func showAboutWindow(sender: AnyObject)
{
  aboutOverlay = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
  aboutOverlay!.frame = view.bounds
  aboutOverlay!.autoresizingMask = .FlexibleHeight | .FlexibleWidth
  aboutOverlay!.layer.zPosition = 1
  aboutOverlay!.hidden = false

  let w = CGFloat(150)
  let h = CGFloat(50)
  let x = (view.frame.width - w) / 2
  let y = (view.frame.height - h) / 2

  let label = UILabel(frame: CGRectMake(x, y, w, h))
  label.textColor = .blackColor()
  label.text = "Made with love by SwiftCast.TV"
  label.numberOfLines = 0
  label.textAlignment = .Center

  aboutOverlay!.addSubview(label)

  view.addSubview(aboutOverlay!)
}

The last thing we’re going to do is toggle our overlay off by tapping anywhere on the screen. We can do this with a simple conditional in the touchesBegan method of ViewController.swift

override func touchesBegan(touches: NSSet, withEvent event: UIEvent) 
{
  view.endEditing(true)


  if (aboutOverlay != nil)
  {
    aboutOverlay!.hidden = true
  }
}

All we are doing here is calling a method when a user touches the screen that toggles the hidden value of aboutOverlay if the overlay exists. This will hide our modal nicely. The UIVisualEffectView is a very good way to display contextual information such as submenus. Look around for examples of good uses of UIVisualEffectView for inspiration.

Conclusion

We hope you enjoyed this tutorial and we hope all of your apps are sexy from now on. If you enjoyed the article, please consider purchasing the screencast. It helps us keep the lights on here at Swiftcast.tv and you’ll be able to see a step by step walkthrough of this tutorial. Furthermore, you’ll get access to the code for this tutorial to use as a reference or a starting point for your next project. Thank you so much for reading and as always, feel free to reach out with questions or feedback.