How to Insert Objects Into the User Interface of Xcode - Basics
How to Insert Objects into the User Interface of Xcode - Basics
(Tom Bast, ISYS-120)
- Open X
code and create a new Xcode project.
code and create a new Xcode project.2. Choose a Single View Application and click on Next.
3. Enter in the Product Name and Click Next
4. Choose 
the folder for the project to reside in and click Create
5.Click on Main.storyboard to see the View Editor.
6. In finder, open the
folder that holds the images you want to add to your app storyboard.
7. Click on Create.
8.Find textfield in Object Library and drag onto ViewScreen.
9.Resize and align with left, center, and right margins.
10.Attributes inspector – Go to Placeholder property. Type in “Enter Meal Name”.
11.Scroll down – Change Return key to “done”. Check Auto-Enable Return Key.
12.Find label in Object Library and drag above textbox and align with Left Margin.
13.Double click Label and type “Meal Name” and hit Enter.
14.Find button in Object Library and drag below textbox and align with Left Margin.
15.Double click button and type “Set Default Label Text”. Hit enter. Reposition button with left margin.
16.Click Assistant Editor, second from left, and collapse Navigator and Utilities ares.
17.At top of assistant editor, click Preview – Main.storyboard.
18.Return to Standard Editor, Navigator, and Utilities areas.
19.Choose label, textfield, and button with Shift key.
20.Choose Embed in Stack Option.
21.In Attributes Inspector, type “8” in spacing property.
22.Click Add New Constraints button near bottom.
23.Click top vertical and two horizontal lines. Become red.
24.Left and right boxes = 0, top box = 20.
25.Click Add 3 constraints button.
26.Select text field by itself.
27.Click Add New Constraints button near bottom again.
28.Click right horizontal arrow. 0 in right box.
29.Click Add 1 Constraint.
30.Go to File – Save. Click on Run to View in Simulator. Command – left arrow or command – right arrow to shift orientation.
31.Click Stop to end Simulator.
32.Click on Attributes Inspector. Depress Navigator and Utilities areas.
33.Change Assistant Editor to Automatic – ViewController.Swift
34.Click past left { bracket on class ViewController line, hit return twice.
Type //Mark: Properties as a comment.
35.Click on Text Box. Hold on Control – Drag to Line below command.
36.Put nameTextField in Name.
37.Click Connect. Hit Enter button twice.
38.Click on Label. Hold on Control – Drag to Line below command.
39.Put mealNameLabel in Name.
40.Click Connect.
41.In ViewController.swift, click above the last } curly bracket.
Type in the following comment:
//Mark: Actions
42.Click on Button. Hold on Control – Drag to Line below command.
43.For Connection, select Action.
44.Put setDefaultLabelText in Name.
45.For Type, select UI Button.
46.Click Connect.
47.In between the { } braces for the Action you just created, type the following line:
mealNameLabel.text=”Default Text”
48.Click on File / Save to save the app project.
49. Run on the Simulator. Test the button and see if it changes the label text.
50.Click stop to finish the Simulator.