“WordPlay” App: A Mad Libs app that you will navigate through 3 UIViewControllers to add text that will be shown in a story on the fourth UIViewController. Create a new project ● Create a new Xcode project ● Select Single View Application and click Next ● In the Product Name field, name your project “WordPlay” ● In the Organization Name field, enter your school’s name ● In the Organization Identifier field, enter “com.YourSchoolName” ● Set Language to Swift ● Set Devices to Universal ● Click Next ● Choose where you want the project folder to save and click Create Embed in Naviagation Controller ● Select Main.storyboard on the Navigation panel (on the left­hand side of the screen) ●
●
●
●
Select the viewController by clicking on the yellow icon at the top of the storyboard Go the the very top of xCode and under the Editor tab, select Embed In...Navigation Controller Zoom out and align the two controller windows Double click on the top of the viewController Creating a new UIViewController ● In the storyboard, zoom out so you can see both controller panes. ● Search for a UIViewController in the object library ● Drag the resulting UIViewController on to your Storyboard ● Align it with the other controllers ● On the top left, select File...New...File ● Select iOS..Source...Cocca Touch Class. ●
Click Next _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC ●
Name the class SecondViewController and make sure it says Subclass of UIViewController and its language is swift. ●
Click next and create Connecting the new viewController in storyboard and secondViewController.swift file ● Select Main.storyboard on the Navigation panel (on the left­hand side of the screen) ● Double click on the top of the new viewController. ●
●
Click on the identity inspector in the Utilities pane.
Under Custom Class...class, select SecondViewController. Repeat for Third and Fourth ViewControllers ● Create a new UIViewController.swift file (name it ThirdViewController and FourthViewController) ● Connecting the new viewController in storyboard and (ThirdViewController.swift/FourthViewController.swift) file Add a Label ● Select your first view controller named ViewController in the storyboard. ● Click on the top bar of ViewController in the storyboard and center it in the window. ● Search for a UILabel in the object library (located at the bottom of the Utilities Panel on the right­hand side of the screen) ● Drag the resulting Label on to your ViewController in Storyboard until you get the intersection of the blue layout guideline at the top and blue layout guideline indicating the center of the storyboard. ● Double Click on the label and title it “Input a noun” ● Re­center your UILabel Add a UITextField to ViewController ● Search for a UITextField in the object library (located at the bottom of the Utilities Panel on the right­hand side of the screen) ● Drag the resulting TextField on to your ViewController in Storyboard below your Input a Noun Label and into the center of the storyboard. _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC Add the UITextField Delegate ● Control Click on your TextField and drag up to the yellow viewController icon at the top of the storyboard and release. ● Select delegate under the Outlets heading. Add a UIButton ● Search for a UIButton in the object library ● Drag the resulting UIButton on to your ViewController in Storyboard below your text field and into the center of the storyboard. ● Double Click on the label and title it “Add” ● Re­center your UIButton Add Constraints to your Label ● Select your label ● Look for the Layout menu options (at the bottom of the Main.storyboard) ●
●
●
●
We need to align our label so it always stays in the center of the screen (whether the app is run on an iphone 4, iphone 5, or an ipad) So first go into the Align layout settings and check off Horizontal Center in container Click Add 1 Constraint Go into the Pin settings, select the line at the top of the view and pin it with a value of 26. ●
Click the Add 1 Constraint Button Add Constraints to your TextField ● Select your TextField ● Go into the Align layout settings and check off Horizontal Center in container ● Click Add 1 Constraint. ● Go into the Pin settings, select the line at the top of the view and pin it with a value of whatever you want. ● Also check off the Height and Width checkboxes. ● Click Add 3 Constraints. _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC Add Constraints to your UIButton ● Select your UIButton ● Go into the Align layout settings and check off Horizontal Center in container ● Click Add 1 Constraint ● Go into the Pin settings, select the line at the top of the view and pin it with a value of whatever you want. ● Click Add 1 Constraint. Creating the segue between view controllers ● Go back to the first viewController and control­click on the Add button. ● Drag until you get to the second viewController and let go. ● Select Action Segue...Show Repeat the following sections for secondViewController and thirdViewController ● Add a Label (name it “Input a verb” and “Input an adjective”) ● Add a UITextField ● Add the UITextField Delegate ● Add a UIButton ● Add Constraints to your Label ● Add Constraints to your TextField ● Add Constraints to your UIButton ● Creating the segue between viewControllers Adding textView on Fourth View Controller ● Double click on the top of the fourth viewController. ● Search for a UITextView in the object library ● Drag the resulting TextView on to your fourth ViewController in Storyboard ● Resize to use up all the viewController except for the Navigation Bar. ● Go into the Pin settings, select the line at the top, bottom, right and left of the view and pin it with a value of 0,0,­16,16 respectively. _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC Hook your TextFields and TextView up to IBOutlets ●
Hide the Utilities Pane on the top right corner by selecting the right most picture. ●
Select the Assistant Editor (On the top­right of the screen ­ ) ○ Shortcut: While holding down the option key, click your ViewController.swift file in the left­hand Navigation Panel. Option + Click automatically brings up the selected file into the Assistant Editor view Move back to the first viewController and click on the top. You should now see your Main.storyboard and ViewController.swift displayed side­by­side. If you do not, make sure that you have the top right pane set to automatic. ●
●
●
●
●
●
●
Select your TextField in the Storyboard, and while holding down the control key, drag an outlet to ViewController.swift ○ Drag the outlet below the class instantiation, but above the viewDidLoad method Name the outlet “myTextField” and click Connect Now navigate to the top of the second viewController, click on it and repeat the process of creating an IBOutlet for SecondViewController Repeat for ThirdViewController Repeat for FourthViewController with TextView. Name it “myTextView” Creating MadLib Class File and MadLib class to Store Story ● Select the WordPlay folder on the Navigation Panel. ● Now click File...New...File from the top of xCode. ● Select iOS...Source...Swift File and click Next ● Name the file MadLib in the save as field and click Create. ● Go inside of the MadLib.swift file and create the MadLib class with the code: ○ class MadLib { } ● Inside the class, create three properties to store the noun, verb and adjective. ○ var noun:String = “” ○ var verb:String = “” ○ var adjective:String = “” Create an Object of the class ● Under your IBOutlet, create an instance of the class MadLib by typing: ○ var myMadLib1 = MadLib() ● Repeat for each of the four viewControllers. Name each myMadLib# representing each viewController. _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC Create prepareForSegue ● Inside of your first viewController, type prepareForSegue and allow the autocompletion to finish the function. ● Inside prepareForSegue, we need to create an instance of the viewController we are going to. To do this type the following code: ○ var nvc = segue.destinationViewController as! SecondViewController ● Get the noun out of the textField and put it into the noun of the myMadLib object by typing the code: ○ myMadLib1.noun = myTextField.text ● Now place the noun from viewController into the noun in the second viewController by typing: ○ nvc.myMadLib2 = myMadLib1 ● Inside of your second viewController, type prepareForSegue and allow the autocompletion to finish the function. ● Inside prepareForSegue, we need to create an instance of the viewController we are going to. To do this type the following code: ○ var nvc = segue.destinationViewController as! ThirdViewController ● Get the verb out of the textField and put it into the verb of the myMadLib object by typing the code: ○ myMadLib2.verb = myTextField.text ● Now place the MadLib object from viewController into the MadLib object in the third viewController by typing: ○ nvc.myMadLib3 = myMadLib2 ● Inside of your third viewController, type prepareForSegue and allow the autocompletion to finish the function. ● Inside prepareForSegue, we need to create an instance of the viewController we are going to. To do this type the following code: ○ var nvc = segue.destinationViewController as! FourthViewController ● Get the adjective out of the textField and put it into the adjective of the myMadLib object by typing the code: ○ myMadLib3.adjective = myTextField.text ● Now place the MadLib object from viewController into the MadLib object in the fourth viewController by typing: ○ nvc.myMadLib4 = myMadLib3 Displaying Story in the Fourth ViewController ● Inside your fourth viewController, go to viewDidLoad and begin under super.viewDidLoad() ● Since all three words are inside your MadLib object, you simply need to place them into a String and then place that String into the TextView. ● Accomplish this by typing the code: ○ myTextView.text = "There once was a \(myMadLib4.noun) that " + "\(myMadLib4.verb) with the very \(myMadLib4.adjective)" + " giant." _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC Stretch #1 Creating IBOutlets for Buttons ●
Hide the Utilities Pane on the top right corner by selecting the right most picture. ●
Select the Assistant Editor (On the top­right of the screen ­ ) ○ Shortcut: While holding down the option key, click your ViewController.swift file in the left­hand Navigation Panel. Option + Click automatically brings up the selected file into the Assistant Editor view Move back to the first viewController and click on the top. You should now see your Main.storyboard and ViewController.swift displayed side­by­side. If you do not, make sure that you have the top right pane set to automatic. ●
●
●
●
●
Select your Add Button in the Storyboard, and while holding down the control key, drag an outlet to ViewController.swift ○ Drag the outlet below the class instantiation, but above the viewDidLoad method Name the outlet “myButton” and click Connect Now navigate to the top of the second viewController, click on it and repeat the process of creating an IBOutlet for SecondViewController Repeat for ThirdViewController ●
Disable and Enable Button ● In ViewController.swift, add the code myButton.enabled = false to viewDidLoad ● Import the delegate on the top line of the viewController. We should now have: ○ class ViewController: UIViewController, UITextFieldDelegate { ● Select the delegate method shouldChangeCharactersInRange. Add the code: if myTextField.text != “” { myButton.enabled = true } return true ● Do the same for SecondViewController.swift and ThirdViewController.swift Stretch #2 ● Go to the MadLib class, create the function getStory that will receive no arguments, but will return a String ○ func getStory() ­> String { ● We want to return the story as a String. This time we want to use only the identifiers, noun, verb and adjective. We do not have an object. ○ return “There once was a \(noun) that \(verb) with the very \(adjective) giant.” _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC ●
Finally, go to FourthViewController and modify the line that places the story into the textView. It should now be: ○ myTextView.text = getStory() Stretch #3 ●
●
●
Inside of viewDidLoad on SecondViewController.swift we want to add the line of code: ○ navigationItem.title = myMadLib2.noun Inside of viewDidLoad on ThirdViewController.swift we want to add the line of code: ○ navigationItem.title = myMadLib3.noun + “,” + myMadLib3.verb Inside of viewDidLoad on FourthViewController.swift we want to add the line of code: ○ navigationItem.title = myMadLib4.noun + “,” + myMadLib4.verb + “,” + myMadLib4.adjective Stretch #4 ●
Inside of MadLib.swift we want to include the code: ​
var attributedString = NSMutableAttributedString() var myString = String() func getAttributedStory() ­> NSMutableAttributedString { myString = getStory() attributedString = NSMutableAttributedString(string: myString) changeStringColor(noun, color: UIColor.blueColor()) changeStringColor(verb, color: UIColor.blueColor()) changeStringColor(adjective, color: UIColor.blueColor()) let stringLength = attributedString.length let font = UIFont(name: "Helvetica­Bold", size: 15.0) attributedString.addAttribute(NSFontAttributeName, value: font!, range: NSMakeRange(0, stringLength)) return attributedString } func changeStringColor(word: String, color: UIColor) { let regularExpression = NSRegularExpression(pattern: word, options: nil, error: nil) let regularMatches = regularExpression!.matchesInString(myString, options: nil, range: NSMakeRange(0, attributedString.length)) for regularMatch in regularMatches { let wordRange = regularMatch.rangeAtIndex(0) attributedString.addAttribute(NSForegroundColorAttributeName, value: color, range: wordRange) } } _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC ●
Now we want to modify FourthViewController.swift for viewDidLoad to have the line: ○ myTextView.attributedText = myMadLib4.getAttributedStory() Stretch #5 ● Create a new swift file named UIColor, in it create an extension to the UIColor class. The code below can have any values sent to the red, green and blue values. They do not need to be the same as below. import UIKit extension UIColor { class func nounColor() ­> UIColor { return UIColor(red: 255/255, green: 251/255, blue: 1/255, alpha: 1.0) } class func verbColor() ­> UIColor { return UIColor(red: 232/255, green: 138/255, blue: 3/255, alpha: 1.0) } class func adjectiveColor() ­> UIColor { return UIColor(red: 134/255, green: 3/255, blue: 232/255, alpha: 1.0) } } ● Then modify the MadLib.swift file to have the new colors. changeStringColor(noun, color: UIColor.nounColor()) changeStringColor(verb, color: UIColor.verbColor()) changeStringColor(adjective, color: UIColor.adjectiveColor()) _________________________________________________________________________________________ MOBILE MAKERS ACADEMY
223 W Erie, Suite 4NW, Chicago, IL 60654
www.mobilemakers.co
© 2015 Mobile Makers Academy, LLC