Build a Swift App

When I wrote Chapter 3 last year, it was written in Objective-C, and for Xcode 5. Things improved dramatically since. Swift made code simpler and it quickly became one of the top languages used. Xcode 6 introduced a number of new features such as Playground, Vector Assets and Designable Views. Ultimately, it made Adaptive Layouts an essential skill because of the iPhone 6 and 6 Plus.Mobile continues to grow exponentially, raking the majority of the profits for its developers. Apple paid $10 Billion in 2014. Prototyping became one of the most sought-after skills for designers. Whether you should use a quick tool like Pixate, or something more powerful like Framer, or directly learn Storyboard in Xcode is up for debate. What’s undeniable is that all of these skills will prepare you for what’s coming.Personally, I spent 14 years making Websites. Beyond Photoshop andSketch, I learned CSS, HTML and Javascript. I wouldn’t trade anything for those skills. It allowed me to be where I am today. Knowing how to implement your own designs is both empowering and informative. It’s like getting feedback in real-time, as you design. That feedback is fed by your understanding of engineering, preventing you from making common design mistakes, which may cost weeks of lost time.

No designer wants to spend a week putting together something only to be told that it can’t be done.

Knowing how to use Storyboard, Auto Layout and a little bit of Swift will not only allow you to build your own app, but also share the workload with your developer. You don’t work in a silo, you iterate at the same pace as your team. A project can only move as fast as its slowest process. Development takes 80% of the time; the first 20% is attributed to visual design. There is 30% up for grab. Since designers are especially trained for that part, there is a huge win.

In this chapter, we’re going to learn how to own that missing 30%. It’ll be written from the perspective of a designer.

Quick Prototyping

While Xcode allows to do really powerful stuff, it can also do simple prototypes. And without writing a single line of code.

Transitions

There are 6 types of transitions between screens in iOS: Cover Vertical, Flip Horizontal, Cross Dissolve, Partial Curl, None and Push (requires Navigation Controller).

Bonus: if you want to download the Xcode project for this demo, get it here. Made entirely in Storyboard.

Designing in Storyboard

The Storyboard works very similarly to Artboards in Sketch. It’s incredibly intuitive once you get past that fear of Xcode. In Storyboard, you manipulate your UI in a very visual way. It’s even easier than HTML and CSS because you don’t need to code.

As a designer, to be able to implement your own design is empowering, not to mention fun as well. We’re fortunate to have a functional visual tool like Storyboard that even developers use. Not only can you prototype with it, but also you can create production-quality layouts that co-exist with production code.

Adaptive Layouts

Adaptive Layouts is one of the most important skills you can develop. In a future where there is a growing number of mobile devices and screen sizes, we can no longer afford to focus on just static designs.

Auto Layout

Auto Layout requires 2 things: position and size. As long as you set those constraints, Auto Layout will be happy. There are 2 ways to respect those requirements: Align and Pin.

  1. Align allows you to center things and align elements with each other.
  2. Pin lets you set the size and the spacing from the edges.

Setting constraints between two objects

Remember the smart guides and the distances in Sketch? Well, constraints are sort of like that, but made for adapting your layout.

Preview Tool

With the Assistant Editor’s Preview, you can quickly check how your layout looks on the iPhone 3.5’, 4’, 4.7’, 5.5’ and iPad in portrait and landscape modes, without having to run the app every time.

Size Classes

This neat tool allows you to set specific Auto Layout constraints and content based on groups of devices. You can decide to add an extra menu or make some content bigger based on the device that you’re on.

Working With Colors

As a designer with a Web background, I typically work with HEX colors. These tools will help you do the conversion efficiently from Sketch to Xcode.

  1. HEX Color Picker – A dead-simple HEX color picker. Very useful when you work with the Mac’s color picker that exist both in Sketch and Storyboard’s Color Picker.
  2. Sip Color – A great tool for collecting colors and converting them to Swift code.
  3. Skala Color Picker – A nice alternative to the first two.

Vector Assets

Instead of generating 3 images (1x, 2x, 3x) per asset, you only need one single file. In Sketch, you need to export them in PDF. However, there are 3 things to note.

  1. The resolution matters. You must export at 1x to make sure it looks good in Storyboard.
  2. You cannot resize the vector image in Storyboard as you please.
  3. Xcode re-renders them to PNG files to 1x, 2x and 3x.

Introducing Spring

A year ago, I released Canvas, an iOS animation library meant to make it far easier to do animations using Runtime Attributes in Storyboard. It was simple enough that any designer without a coding background could come in and play with these animations.

A lot has happened since. Swift took over and Xcode 6 made things much easier. Runtime Attributes can now be set using IBInspectables. Instead of writing manually a few attributes such as animation type, delay and duration, you can just set the values directly in the Attribute Inspector.

So I decided to go back to the drawing board and work on a new animation library called Spring, with the help of two iOS developers. This project started when I released my book’s Swift Chapter to help designers and beginners learn Swift by shortening some of the animation code and allowing them to set layer properties that aren’t readily available in the Attribute Inspector such as cornerRadius, shadowColor, shadowOpacity, etc. It has grown into a full-blown animation library that supports every View, Transitions, Loading Animation and a lot more.

Installing Spring

Just drop in the Spring folder to your Project Navigator like shown in the video.

Using Spring, you can quickly animate any layer without a single line of code. You have access to over 25 preset animations like slideDown, zoomIn,squeezeUp, etc. You even have the flexibility to play with x, y, scale androtation properties. For your animation, you can experiment with curve,damping and velocity values.

For simple animations:

  1. In Identity Inspector, set the Spring Class to your layer.
  2. Play with Spring attributes.

Play with the Spring App

Animations In Code

With code, you can do a lot more. Spring was built so that you can trigger animations or a chain of animations with any event.

You can trigger this during viewDidAppear() or in an IBAction.

layer.animation = "squeezeDown"
layer.animate()

I suggest storing all the animation properties in Storyboard and just call theanimate() or animateTo() function in code. Like this, you avoid putting too much UI code in the Class files.

Learning Swift as a Designer

With Swift Playground, you can experiment with code in real-time. It’s a perfect place to experiment with all the possibilities without the limitations of a GUI. Learning how to use functions, classes and working with UIKit can make your app infinitely more powerful.

I like to think of code as another design tool. Software is made of code, it is unavoidable.

This book was written in a way that it respects all the latest standards encouraged by Apple. I consulted two iOS engineers in the process and they kindly reviewed all the code to make sure that I respected the best practices.

As a designer learning code, you can:

  1. Perform any animation or UI change based on events.
  2. Work with real data from any database or API.
  3. Collaborate better with engineers by understanding their constraints, and pushing beyond those constraints.

Building your Swift App

In this updated chapter, we won’t skip any step. You’ll learn everything in great detail: the Xcode UI, Storyboard, Auto Layout, Animation, the Swift language and a lot more. Each section is extremely visual and has videos with voice as well as downloadable Xcode projects. The whole process has been simplified for designers and beginners who have never touched code in their entire life.


Read Next

Now that you’ve read “Build a Swift App”, let’s learn more about Swift in the next section.

  • First section

    You’re at the first section of Chapter 3

  • Introduction to Xcode 6’s Layout

    Create your first Xcode Project

Chapter 3: Build a Swift App

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s