<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Storyboard Basics for iOS Development

Published on
4,063 Points
963 Views
1 Endorsement
Last Modified:

The Basics of Storyboard

Storyboards were first introduced to developers in the release of iOS 5. They save the developer the trouble of designing each screen’s interface in a different file. The storyboard allows you to see the conceptual mockup of your app as a whole and the interactions between each screen. Using segues, you are able to set how the app will transition between given screens and pass data along. In this tutorial, I will show you how to make a simple login screen for an app.

Getting Started

The first thing that you are going to want to do is make a new project. You will want a new single screen application setting the language to Swift and the devices to universal. If you navigate to the storyboard you should see an empty view controller scene. The arrow on the left side of the view controller indicates that it is the root controller.
Screen-Shot-2015-04-06-at-3.56.37-PM.pngIn order to add labels for the user name and password, you need to go to the box in the bottom right of your screen, select the circle with a square in it, and drag and drop two labels onto your view. By choosing the preferences on the side bar, you can specify many important parameters. There are too many to go over but most are self-explanatory.
Screen-Shot-2015-04-06-at-4.03.16-PM.pngThe two important ones for us are the placeholder text and the secure text entry checkbox. We want to use placeholder text to let the user know what information is required of them and the secure entry to hide the user’s password from showing. After this is done, we need a button in order to trigger our segue. We can drag one on in the same way we did a text field. After you have given the button a title and arranged your objects on the screen should look like this:
Screen-Shot-2015-04-06-at-4.10.34-PM.pngNow our first screen of the app is done so we need to make another one to transition to. Do this by dragging onto the screen a second view controller. In order to connect the two screens you must do two things. First you will need to control click on the button and drag it to the new screen you added. Next you will need to select the circle between the two views. You will need to then change the identifier to the segue; for this example I will use “nextScreen”.
Screen-Shot-2015-04-06-at-4.23.30-PM.pngLastly, we will put a label on the new screen so we can view the user and see if our app works. In order to be able to access the fields from storyboard programmatically, we will need to create outlets for them in the class that uses them like so:
class FirstScreen: UIViewController { 

   @IBOutlet weak var username: UITextField!
   @IBAction func loginButton(sender: AnyObject) {
      perfromSegueWithIdentifier("nextScreen", sender: self)
   }
}

class SecondScreen: UIViewController {
   var user: String!
   @IBOutlet weak var username: UILabel!
   
   override func viewDidload() {
      username.text = user
   }
}

Open in new window


After this is done make sure to link the objects from storyboard using the connections inspector of each screen. Your outlets should show up and you can click the circle to the right of them to link them.
Screen-Shot-2015-04-17-at-2.07.07-PM.pngThe last function to be implemented is the prepareForSegue function in the first screen's class. This allows you to pass data on to the new view like so:


override fun prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
   if segue.identifier == "nextScreen" {
      let destVC = segue.destinationViewController as UIViewController
      destVC.user = self.username
   }
}

Open in new window


Now you have a basic understanding of how to change screens and pass data between them. This will give you a good start on making functional apps, happy programming!
1
1 Comment
LVL 2

Author Comment

by:Andrew Reinman
Sorry for the delay Eric, I wasn't aware of the problem until today and the screenshots I took were from macs on campus. I will upload the picture tomorrow after I get out of class, it should be up by 3 at the latest
0

Featured Post

Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
A query can call a function, and a function can call Excel, even though we are in Access. This is Part 2, and steps you through the VBA that "wraps" Excel functionality so we can use its worksheet functions in Access. The declaration statement de…
Next Article:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month