Session

3, Developing an iOS Prototype

Interac(on Design for Mobile Devices

David Lamas, Ilya Shmorgun Tallinn University, 2012

Developing an iOS Prototype

Crea(ng a single view applica(on GeHng familiar with Xcode Designing views in Xcode Managing UIViewController subclasses Managing IBAc(ons and methods Tes(ng your single view applica(on Crea(ng a tabbed applica(on Managing groups in the project hierarchy Customizing a tabbed applica(on Tes(ng your tabbed applica(on

January, 2012

Tallinn University

Crea(ng a Single View Applica(on

January, 2012

Tallinn University

Crea(ng a Single View Applica(on

Open Xcode. From the menu select File > New > New Project.

January, 2012

Tallinn University

January, 2012

Tallinn University

Crea(ng a Single View Applica(on

From the menu select Single View Applica6on. Click the Next buTon.

January, 2012

Tallinn University

January, 2012

Tallinn University

Crea(ng a Single View Applica(on

Specify the name of your project. Make sure that iPhone is selected as device family. Make sure that Use Storyboard and Use Automa6c Reference Coun6ng are selected. Select a loca(on for your project to be saved and click Create.

January, 2012

Tallinn University

January, 2012

Tallinn University

GeHng Familiar with Xcode

January, 2012

Tallinn University

10

GeHng Familiar with Xcode

The window of Xcode consists of several parts. The top of the window is called the Toolbar. On the leU of the toolbar are controls for star(ng and stopping the project. A popup menu enables selec(on of the scheme you want to run, such as an iOS device, an iPad or an iPhone simulator.

January, 2012

Tallinn University

11

GeHng Familiar with Xcode

The big blue box in the middle of the toolbar is the Ac6vity view which displays ac(ons and processes that are currently happening. On the right side of the toolbar are three sets of buTons for

Switching between various congura(ons of the Editor Showing or hiding specic panes in the workspace Showing the Organizer window which among other things is used as a documenta(on viewer and a place to manage iOS devices which are synchronized with the par(cular computer.
Tallinn University
12

January, 2012

GeHng Familiar with Xcode

Below the toolbar is the Jump bar which allows jumping to specic elements in the project hierarchy. In the middle of the window is the Editor which enables edi(ng of code and user interface elements. Below the editor is the Debug bar where debugging errors are displayed during the tes(ng of the applica(on.
January, 2012
Tallinn University
13

GeHng Familiar with Xcode

On the leU side of the window is the Naviga6on area which allows the user to navigate the project structure. On the right side of the window is the U6lity area which holds the various inspectors and libraries of le templates, code snippets and user interface objects.

January, 2012

Tallinn University

14

January, 2012

Tallinn University

15

GeHng Familiar with Xcode

Once your project is loaded you will see a window showing a summary of the projects seHngs. From this view you will be able among other things to specify supported devices and orienta(ons as well as add icons and launch images.

January, 2012

Tallinn University

16

January, 2012

Tallinn University

17

Designing Views in Xcode

January, 2012

Tallinn University

18

Designing Views in Xcode

From the Project navigator select the Mainstoryboard.storyboard le to display the canvas of your main storyboard. A storyboard allows you to graphically arrange and manage views of your applica(on on a single canvas as well as dene an applica(on ow and assign transi(on anima(ons.
January, 2012
Tallinn University
19

January, 2012

Tallinn University

20

Designing Views in Xcode

On the storyboard you will see a view that is generated automa(cally. Select a View Controller from the Object library and drag it onto the canvas.

January, 2012

Tallinn University

21

January, 2012

Tallinn University

22

Designing Views in Xcode

Drag a label from the Object library and posi(on it on the rst view. Change the text of the label to View One. Repeat the same steps for the second view and change the text of the label to View Two.

January, 2012

Tallinn University

23

January, 2012

Tallinn University

24

Designing Views in Xcode

Drag two Rounded Rect BuMons onto the rst view and change their text to Info and Switch View. Repeat the same steps for the second view.

January, 2012

Tallinn University

25

January, 2012

Tallinn University

26

Designing Views in Xcode

The next step will be to link a Switch View buTon to the second view. That way when the buTon is pressed the second view will be displayed. Select the Switch View buTon in the rst view and do a control+click+drag to drag a blue line to the second view. If everything was done correctly a menu (tled Storyboard Segues should appear. Select Modal from the list of menu op(ons.

January, 2012

Tallinn University

27

January, 2012

Tallinn University

28

Designing Views in Xcode

Repeat the same steps for the Switch View buTon on the second view. As a results both views should be connected to each other.

January, 2012

Tallinn University

29

January, 2012

Tallinn University

30

Designing Views in Xcode

Click on the transi(on arrow. The Atributes inspector should open showing seHngs for the Storyboard Segue. From the Transi6on drop down menu select Flip Horizontal. Repeat the same steps for the second transi(on.

January, 2012

Tallinn University

31

January, 2012

Tallinn University

32

Managing UIViewController Subclasses

January, 2012

Tallinn University

33

Managing UIViewController Subclasses

Go to File > New > New File. Select a UIViewController subclass and click the Next buTon.

January, 2012

Tallinn University

34

January, 2012

Tallinn University

35

Managing UIViewController Subclasses

Name the new le SecondViewController. Make sure the Targeted for iPad and With XIB for user interface op(ons are unchecked. Click the Next buTon and create the new le.

January, 2012

Tallinn University

36

January, 2012

Tallinn University

37

Managing UIViewController Subclasses

Open the storyboard. Select the second view controller. Open the Iden6ty inspector and select SecondViewController from the Class drop down menu.

January, 2012

Tallinn University

38

January, 2012

Tallinn University

39

Managing IBAc(ons and Methods

January, 2012

Tallinn University

40

Managing IBAc(ons and Methods

Open the ViewController.h le. Add a line of code which will eventually be used to associate a method called pageInfo with the ac(on of the user pressing the Info buTon in the user interface.

January, 2012

Tallinn University

41

January, 2012

Tallinn University

42

Managing IBAc(ons and Methods

Open the ViewController.m le. Add a block of code for the pageInfo method bellow the #pragma mark - View lifecycle.

January, 2012

Tallinn University

43

January, 2012

Tallinn University

44

Managing IBAc(ons and Methods

Repeat the steps of adding a new IBAc6on and code for the pageInfo method to the SecondViewController.

January, 2012

Tallinn University

45

Managing IBAc(ons and Methods

Open your storyboard and select the Info buTon in the rst view. Make sure the Connec6ons inspector is opened. Click and drag the connec(on from the pageInfo item in the Received Ac6ons sec(on to the Info buTon on the rst view. Select Touch Up Inside from the menu.

January, 2012

Tallinn University

46

January, 2012

Tallinn University

47

Managing IBAc(ons and Methods

Repeat the steps for the Info buTon in the second view.

January, 2012

Tallinn University

48

Tes(ng Your Single View Applica(on

January, 2012

Tallinn University

49

Tes(ng Your Single View Applica(on

Once you have nished seHng up the applica(on press the Run buTon in the top leU corner of the Xcode window. The iOS Simulator will launch and you will be able to test your applica(on.

January, 2012

Tallinn University

50

Crea(ng a Tabbed Applica(on

January, 2012

Tallinn University

51

Crea(ng a Tabbed Applica(on

Go back to Xcode and press the Stop buTon in the toolbar. Open your storyboard and remove the transi(ons between views by selec(ng them and pressing the Backspace buTon on the keyboard.

January, 2012

Tallinn University

52

January, 2012

Tallinn University

53

Crea(ng a Tabbed Applica(on

Add a Tab Bar Controller from the Object library. Posi(on the Tab Bar Controller just below your exis(ng views on the storyboard.

January, 2012

Tallinn University

54

January, 2012

Tallinn University

55

Crea(ng a Tabbed Applica(on

Remove the views which came with the Tab Bar Controller. Posi(on your exis(ng views beside the Tab Bar Controller on the canvas.

January, 2012

Tallinn University

56

January, 2012

Tallinn University

57

Crea(ng a Tabbed Applica(on

Select the Tab Bar Controller and in the AMributes inspector select Is Ini6al View Controller. Control+click+drag to drag a connec(on from the Tab Bar Controller to the rst view. Choose Rela6onship - viewControllers from the Storyboard Segues menu. Do the same for the second view.

January, 2012

Tallinn University

58

January, 2012

Tallinn University

59

Crea(ng a Tabbed Applica(on

Click on the Tab of the rst view and change its (tle to One in the AMributes inspector. Change the (tle of the Tab on the second view to Two.

January, 2012

Tallinn University

60

January, 2012

Tallinn University

61

Crea(ng a Tabbed Applica(on

Remove the Switch Views buTon from each of the views. Re-align the label and the Info buTon on each of the views.

January, 2012

Tallinn University

62

January, 2012

Tallinn University

63

Managing Groups in the Project Hierarchy

January, 2012

Tallinn University

64

Managing Groups in the Project Hierarchy

Right click on the root folder in the Project navigator. Select New Group from the context menu. Rename the new group to Resources.

January, 2012

Tallinn University

65

January, 2012

Tallinn University

66

Managing Groups in the Project Hierarchy

Right click on the Resources group and select Add Files to MyFirstApp.

January, 2012

Tallinn University

67

January, 2012

Tallinn University

68

Managing Groups in the Project Hierarchy

Navigate to the Design Templates folder and select icons from the Glyphish icon set. If you do not have the Glyphish icons on your computer you can download them from hTp://glyphish.com/download/glyphish-icons.zip Choose two icons of your liking. Make sure that the Copy items into des6na6on groups folder (if needed) op(on is selected. Click the Add buTon.

January, 2012

Tallinn University

69

January, 2012

Tallinn University

70

Managing Groups in the Project Hierarchy

The icons you have added should appear in the Resources group in the Project navigator.

January, 2012

Tallinn University

71

January, 2012

Tallinn University

72

Customizing a Tabbed Applica(on

January, 2012

Tallinn University

73

Customizing a Tabbed Applica(on

Open your storyboard. Select the tab of the rst view. In the AMributes inspector select an icon from the Image drop down menu. Do the same for the tab of the second view.

January, 2012

Tallinn University

74

January, 2012

Tallinn University

75

Tes(ng Your Tabbed Applica(on

Once you have nished customizing your user interface click the Run buTon in the toolbar. The iOS Simulator will launch and you will be able to test your tabbed applica(on.

January, 2012

Tallinn University

76

January, 2012

Tallinn University

77

Developing an iOS Prototype

And so we covered... Crea(ng a single view applica(on GeHng familiar with Xcode Designing views in Xcode Managing UIViewController subclasses Managing IBAc(ons and methods Tes(ng your single view applica(on Crea(ng a tabbed applica(on Managing groups in the project hierarchy Customizing a tabbed applica(on Tes(ng your tabbed applica(on

January, 2012

Tallinn University

78