Week 1: Storyboardn

This little Storyboarding in iOS series so we can all learn how to Storyboard our own iOS apps. The series is meant to be super short (30 minutes) once a week. Every week we will end with a challenge. To get the most out of this it would be most benificial if you take the basics learned during the series and play around with it on your own time during the week.

The structure will look something like this:

• 10 minutes: show what you did with your previous weeks challenge
• 15 minutes: go through a little teaching & questions
• 5 minutes: go through the next challenge

The next 4 weeks objectives (roughly):

Week 1:

• Xcode UI
• View Controllers
• Basic storyboarding with the Object Library
• Tab Bar Controllers
• Asset management
• Attributes inspector
• Size inspector

Week 2:

• Auto Layout
• Size inspector (more in depth)

Week 3:

• MVC pattern
• Hooking our views up to code

Week 4:

• More advanced hooking our views up to code
• Start building a weather app

Setup:

• Make sure you are on Github & Xcode
• Login to Xcode by going to Xcode -> Preferences (cmd + ,) and clicking on accounts

Xcode UI:

Creating a new project:

Creating Single View Applications will make it so our story board isn't bloated with stuff we may not need.

Product name: whatever you want it to be Organization Name & Organization Identifier: if you are signed in this will be auto populated Notice we are building this for an iPhone only.

App settings:

Right now we are only going to be doing a portrait app, this is because of AutoLayout issues, which we will be covering next week.

Project Navigator: Project navigator is where all of your files will live. We will be covering this week will be the Main.storyboard file. Also your app settings is the very tip blue icon.

Utilities: Utilities is the right flyout menu. This is where you fill find your tools for editing and adding objects to the storyboard.

Debug Area: This is the bottom flyout menu. We do not need to do anything with the debug area yet. But it is there, and if something is broken in your storyboard, it will automatically pop out and tell you what is going on.

Document Outline: This is shown when you have Main.storyboard open. This will list all of your view controllers and all objects inside of it. You will notice it also has a label for first responder and exit, you rarely use first responder and exit is used for transitions.

Simulator: When you build your app it will open up in a simulator. Basically a iPhone with no app store.

View Controllers:

If you do not switch the size to a 4.7 inch iPhone you will run into layout issues when building your application. We will cover how to use autolayout to make it work on multiple device sizes next week. So for now we will stick to the one size.

Basic storyboarding with object library:

In the bottom right corner of the window are 4 icons, one of them is the object library. When selected you can search and add common UI elements to your view. You add UI elements by clicking and dragging them into the view.

We are going to drag a label onto the screen and play with the size, color and font. There are a ton of options in here. Play with them in your challenge. The ones that have yellow circles are controllers, these add new scenes, not objects. We will go over that in just a minute.

Some common things you would add here:

• Views (like divs in HTML)
• Labels (Text)
• Buttons
• Inputs
• Image Views

You can read more about these here

Attributes inspector:

Attributes inspector is on the right hand side of the screen, it lives with the other inspectors of the object. The icon looks like a triangle pointing at the ground. This will changed based on the object that is selected.

Tab bar controllers:

To add a tabbar we are going to replace our old view controller. So click the scene and hit delete, your storyboard should now be empty.

Then search for Tab bar controller and drag that into the storyboard. When you do this there is two things that need to happen, our sizing needs to go back to the 4.7 iPhone and we need to switch this to the initial view controller, or we will get a error.

To add a new tab you would add a view controller, select the tab bar controller, hold control and drag it to the new view controller.

Asset management:

Assets are in the Assets.xcassets folder. Here is where you would add AppIcons and any image you might want in your project. Typically you need 3 sizes for images, 1x, 2x and 3x.

Size Inspector:

This is the beginnings of auto layout. This is where you would apply widths, heights, offsets etc. to a object. We are going to remove the title from the tabbar.

Week 1 Challenge:

Build a UI of your own. I would recommend something that would test what we have talked about today, add some images, add some text and a tabbar. Possibly a UI you have designed recently?