In the first class, you'll learn how to create a simple single-view app, following a 3-step process:

Transcription

1 Class 1 In the first class, you'll learn how to create a simple single-view app, following a 3-step process: 1. Design the app's user interface (UI) in Xcode's storyboard. 2. Open the assistant editor, and connect UI objects to the view controller code. 3. Define, in the view controller code, how the app should respond to the user's action(s). The morning exercise creates the traditional HelloWorld app, starting with a very simple version, and building on it to create an app that says hello to the name entered into a text field. The afternoon exercise creates a Greetings app this is a variation on HelloWorld, using a segmented control to say hello, how are you, or goodbye to the name entered into the text field. Page 1

2 Class 1 Morning: HelloWorld Begin at the beginning: open the Xcode app on your Mac: Press command-space to open Spotlight Start typing xcode Press return to select Top Hit: Xcode Page 2

3 New Project The first time you open Xcode, you'll see the Welcome to Xcode window. Select Create a new Xcode project If you want to see this window whenever you start Xcode, check the checkbox Note: Swift Apprentice only uses the playground the first option in the Welcome menu. Chapter 1 tells you about this Xcode feature. Page 3

4 New Project... > Single View Application The New Project window has menus for ios, watchos, etc. Select ios, then select Single View Application Press Next Page 4

5 New Project... > Choose options for your new project You must name your project, and specify some other options. Bundle Identifier starts out as com.yourcompany.productname: it will change itself as you enter your Product Name and Company Identifier this is what the App Store will use to identify your app, if you submit it. Product Name: a CamelCase word without spaces; this will be the name of your app enter HelloWorld Team: leave this as None Organization Name: enter RMIT or your company or your name Company Identifier: enter RMIT's or your domain name, in reverse order Language: select Swift Devices: select iphone Don't Use Core Data, or Include any Tests. Press Next Page 5

6 New Project... > save your project files You must save your project in the file system. Note: Use the New Folder button to create a new folder, not the right-click option it's easier to name the new folder if you use the button. If you're using your own MacBook, create a new folder (Apple suggests you name this folder Developer) in your user home folder or on the Desktop, then create a sub-folder named RMIT Week 1, to store today's projects. If you're using a lab Mac, just create a RMIT Week 1 folder on the Desktop. At the end of the class, copy this folder to a USB drive, or to a cloud service, or zip it and it to yourself. Later, on your home Mac, create the Developer folder and put today's folder into it. Note: Xcode autosaves your files but, on lab Macs, it won't save to a network or USB drive, so you must create your projects on the lab Mac's hard drive. Don't select Source Control. If it's checked, then uncheck its checkbox. Page 6

7 Explore: project workspace window Xcode projects often open showing the Project Summary window, where you can edit Info, Build Settings etc, but you won't need to do much here, during this course. You'll spend most of your time in the Project Navigator (circled) and in the 2 lower files (in rectangle) the view controller and storyboard. Page 7

8 Explore: run the app 1. In the Project Navigator (left-most sidebar), select (single-click) the Main.storyboard file 2. Expand the View Controller Scene in the Document Outline (2nd left sidebar if you don't see it, click the rectangular icon in the lower left corner of the storyboard canvas) 3. Select View Controller: the same round golden icon is selected in the storyboard scene, and some info appears in the Utility pane (right sidebar) select the 4th icon in the Utility pane: this is the attributes inspector. 4. Click and hold the third button from the left (in the screenshot, the text is Hell...orld) to open a menu of devices and simulators. Select iphone 7 Plus. 5. Click the Run button (or press command-r) Note: You can run the app without selecting any project files but I prefer to look at something more interesting than the Project Summary. Page 8

9 Explore: ios simulator The app doesn't do anything yet but all the underlying infrastructure works. The simulator is usually too large for the computer screen, so use its Window>Scale menu to make it fit. You shouldn't see a scroll bar when you try to scroll the simulator's screen. You can select Hardware > Home from the Simulator's menu to see the home screen. Note that this does not actually stop the app running in Xcode. Page 9

10 Explore: hide the document outline The storyboard usually opens with the Document Outline (the pane between the Project Navigator and the storyboard canvas) open. At the moment, you don't need it, so: 1. Click the square at the bottom left of the storyboard canvas to close the Document Outline 2. While you're here, click the Stop button (or press command-.) to stop the running app Page 10

11 Explore: Xcode window Xcode is an Integrated Development Environment -- similar to, but different from, Eclipse and Visual Studio. Note: This screenshot is from Xcode_Overview.pdf (in course folder/resources). This document goes far beyond what you need to know for this course but these sections might be helpful: About Xcode Develop Your App in the Workspace Window Write Code in the Source Editor: Fix Errors as You Type; Speed Up Typing with Code Completion; Split the Editor to Display Related Content; Use Gestures and Keyboard Shortcuts; Examine the Structure of Your Code with Code Folding; Match Pairs of Braces, Parentheses, and Brackets Automatically; Look Up Documentation for a Symbol (since Xcode 6, the Quick Help button, in the inspector pane, is a question mark); Find Help for Using the Source Editor Build a User Interface Page 11

12 Page 12

13 Explore: workspace window areas The buttons along the upper right of the workspace window hide/show various parts of the workspace. In the red box are the Editor buttons: you will work mostly with the first two editor buttons (Standard and Assistant editors); avoid clicking the third (version) editor button (if you do, just click the Standard editor again). Note: The editors have a jump bar across the top each item is a drop-down menu. The < and > arrow buttons act like a web browser's history Previous and Next buttons. In the green box are the Pane buttons: the first (leftmost) pane button toggles the (leftmost) Navigator pane; the third (rightmost) pane button toggles the Utility pane; the middle pane button toggles a debug/console pane along the bottom of the workspace window. Each pane always appears in the location indicated by its button; for example, you cannot move the Navigator to the right side or bottom of the workspace. Note: the Pane buttons act like checkboxes, but the Editor buttons act like radio buttons -- you can have all, some or none of the 3 panes open, but exactly one editor is open at any time. To "close" the Assistant editor, select the Standard editor -- clicking the Assistant editor button while it's already showing won't close the Assistant editor. Page 13

14 Set up: code editing tab When you're developing an app, you'll keep switching between the storyboard and the code (ViewController.swift). This can become confusing if you're working in only one window, especially on a small screen. It's more convenient to set up separate tabs for the storyboard and the code, then switch between them while you're working. This also allows you to close the Navigator pane, to give more space for the code/storyboard. Note: If you double-click a file name in the Project Navigator, it opens the file in a new window -- on a large display screen, you might prefer working with separate windows for storyboard and code. If the new window doesn't show the Toolbar (Run button, editor buttons, etc), you can show it with View > Show Toolbar On a MacBook, it's probably easier to work with tabs, as one window might hide the other. To set up a code editing tab: 1. open the Navigator pane 2. press command-t to create a new tab in the project window 3. close the Utility pane 4. in the Project Navigator, select (single-click!) ViewController.swift to open it in the Editor Note: Xcode tabs use the same keyboard shortcuts as Safari and other web browsers: command-t opens a new tab; command-w closes the current tab; shift-command-[ moves left; shiftcommand-] moves right. You can drag tabs to rearrange them, or drag a tab out of the window, to create a new window. Page 14

15 Find Help for Using the Source Editor This page from Xcode_Overview.pdf is important enough to show here. In your code editing tab, control-click (or right-click) anywhere in the editor, and locate the Source Editor Help menu. Note that it now opens a new window, instead of showing a menu of topics. Optional: explore the Customizing Syntax Colors and Fonts item Page 15

16 Set up: storyboard tab Now select the storyboard tab to finish setting it up: 1. Close the Navigator pane 2. Open the Assistant Editor; if ViewController.swift is not displayed, select it from the jump bar's drop-down menu. You can specify where the Assistant Editor should appear by using the Xcode menu View > Assistant Editor -- here, I've chosen Assistant Editors on Bottom. (not shown) If you slow-click the Assistant Editor button, the same options appear in a drop-down menu. 3. Click the app view in the Editor, to show the icons in its top bar, then click the first icon: this represents the view controller 4. Select Attributes in the Utilities pane 5. Show the Object Library (the circled-square icon, third from the left in the toolbar near the bottom of the Utility pane) Note: This is a single-view app, so the storyboard contains a single view: it represents the app on the screen of an ios device, and you'll design your user interface (UI) by dragging and dropping UI objects onto this view. Page 16

17 Find Help for Using Interface Builder This is the Xcode_Overview.pdf page FInd Help for Using Interface Builder: In your storyboard tab, control-click (or right-click) on some empty space, and locate the Interface Builder Help menu (note: this is an Xcode 5 screenshot; Xcode 8 opens a new window) Optional: explore the Buiding User Interfaces item Page 17

18 UI: Change the background color Just for fun, you can change the background color of the app view: 1. Click in the centre of the app view (or anywhere that isn't the top bar the dock) the Attributes Inspector shows the View's attributes 2. Click on the white rectangle* next to Background; a Color Picker appears (crayons are my personal preference; use the option you prefer) -- choose one to replace the default white background, then close the color picker window 3. You can restore the default background color from its drop-down menu * In the screenshot, the white rectangle has been replaced by the new color, but it looks like the blue rectangle between Tint and Default, just below Background. Note: Xcode now expects developers to use adaptive layout with size classes, but you can view as any size or orientation of ios device: click View as: to see the options; click again to close the menu. w C h R means an iphone 7 Plus in portrait orientation is in the compact width class and regular height class. Use the View as: menu to view as iphone 7 Plus. Another note: UI = User Interface. All the objects that you can use to create your user interface in storyboard are in the UIKit framework. ViewController.swift imports UIKit to access information about these objects. Page 18

19 UI: Object Library In the lower pane of the Utilities pane, the circled-square icon is the Object Library, containing UI objects that you can drag onto the storyboard. Check that the Object Library is selected, and adjust the height of the lower pane so that you can see 5 items (you should see View Controller, 3 other Controllers, then Collection View Controller) Scroll down in the Object Library until you see Label, Button,... Slider Page 19

20 UI: Label, Button, Text Field The UI objects you will use today are Label, Button and Text Field. Select one to open a window with some information about it. Note: I selected the Standard Editor to close the Assistant Editor, to unclutter the screen shot. Page 20

21 HelloWorld version 1 The simplest HelloWorld app has a Label, where you'll set the text to be Hello, World!: drag a Label from the Object Library onto the app view until blue guides appear to help you position it the recommended (standard) distances from the top and left edges of the view drag the resizing handle on the right side of the Label, until a vertical blue guide appears to show you the standard distance to the view's right edge; a vertical guide also appears to indicate the label is centred horizontally Notice that the Utilities/Attributes pane now shows the attributes for the label (if it doesn't, select the Attributes Inspector button and the label). Note: I've changed the background to a lighter colour, to make it easier to see the label etc. Page 21

22 UI: Label attributes Enter Hello, World! as the text for the Label -- you can do this either in the Label itself, or in its attributes field (if you type in the attributes field, it won't appear in the label until you press return or click in another field) Set its Alignment to centered Page 22

23 Run version 1 Run the app in the simulator: it looks fine! Now stop the app and select iphone SE from the simulator list, then run it again... huh? the label text is not centred! Go back to the storyboard to fix this... Page 23

24 Storyboard: Reset to Suggested Constraints The problem is that you set up the label in the iphone 7 Plus view, and a 7 Plus is wider than an SE. The storyboard creates implicit constraints that use the 7 Plus positioning as literal values for the origin, height and width of the label. But you used the blue guides to indicate these values relative to the underlying view (the label's superview), so how do you get Xcode to do the right thing? To fix it: Make sure the View as: is still iphone 7 Plus Click anywhere in the view, outside the label, to deselect it Click the rightmost (fourth) icon in the lower right corner (Resolve Auto Layout Issues), to open its dropdown menu Select All Views in Controller \ Reset to Suggested Constraints -- this interprets your careful blue-guide positioning as "relative to the superview", to create explicit constraints that "pin" the edges of the label to the edges of the screen Page 24

25 Run version 1 (with auto layout) Run the app again, still with the iphone SE simulator. The label text is now where it should be, centred in the view, as it appears in the storyboard! Page 25

26 Xcode Stop Dialog Warning: Don't Ask Me You might have noticed this dialog box popping up, when you run your app -- unless you've been pressing the stop button, or quitting the simulator, after each run. The correct thing to do is to press Stop. You can get rid of this warning by checking Do not show this message again, before pressing Stop. If you change your mind, open Xcode > Preferences > General and press Reset "Don't Ask Me" Warnings Page 26