Session3 Developing an Ios Prototype

8/3/2019 Session3 Developing an Ios Prototype

1/78

Interac(onDesignforMobileDevices

Session3,DevelopinganiOSPrototype

DavidLamas,IlyaShmorgun

TallinnUniversity,2012


2/78

DevelopinganiOSPrototype

Crea(ngasingleviewapplica(on GeHngfamiliarwithXcode DesigningviewsinXcode ManagingUIViewControllersubclasses ManagingIBAc(onsandmethods Tes(ngyoursingleviewapplica(on

Crea(ngatabbedapplica(on Managinggroupsintheprojecthierarchy Customizingatabbedapplica(on Tes(ngyourtabbedapplica(on

January, 2012 2Tallinn University


3/78

Crea(ngaSingleView

Applica(on



4/78

Crea(ngaSingleView

Applica(on OpenXcode. FromthemenuselectFile>New>New

Project.



5/78



6/78

Crea(ngaSingleView

Applica(on FromthemenuselectSingleView

Applica6on.

ClicktheNextbuon.



7/78



8/78

Crea(ngaSingleView

Applica(on Specifythenameofyourproject. MakesurethatiPhoneisselectedasdevicefamily. MakesurethatUseStoryboardandUseAutoma6cReferenceCoun6ngareselected. Selectaloca(onforyourprojecttobesavedandclickCreate.



9/78



10/78

GeHngFamiliarwithXcode



11/78


ThewindowofXcodeconsistsofseveralparts. ThetopofthewindowiscalledtheToolbar.Onthe

leofthetoolbararecontrolsforstar(ngand

stoppingtheproject.

Apopupmenuenablesselec(onoftheschemeyouwanttorun,suchasaniOSdevice,aniPadoran

iPhonesimulator.



12/78


ThebigblueboxinthemiddleofthetoolbaristheAc6vityviewwhichdisplaysac(onsandprocessesthatarecurrentlyhappening.

OntherightsideofthetoolbararethreesetsofbuonsforSwitchingbetweenvariousconfigura(onsofthe

Editor

ShowingorhidingspecificpanesintheworkspaceShowingtheOrganizerwindowwhichamongotherthingsisusedasadocumenta(onviewerandaplacetomanageiOSdeviceswhicharesynchronizedwiththepar(cularcomputer.



13/78


BelowthetoolbaristheJumpbarwhichallowsjumpingtospecificelementsintheprojecthierarchy.

InthemiddleofthewindowistheEditorwhichenablesedi(ngofcodeanduserinterfaceelements.

BelowtheeditoristheDebugbarwheredebuggingerrorsaredisplayedduringthetes(ngoftheapplica(on.



14/78


OnthelesideofthewindowistheNaviga6onareawhichallowstheuserto

navigatetheprojectstructure.

OntherightsideofthewindowistheU6lityareawhichholdsthevarious

inspectorsandlibrariesoffiletemplates,

codesnippetsanduserinterfaceobjects.



15/78



16/78


Onceyourprojectisloadedyouwillseeawindowshowingasummaryoftheprojects

seHngs.

Fromthisviewyouwillbeableamongotherthingstospecifysupporteddevicesand

orienta(onsaswellasaddiconsandlaunch

images.



17/78



18/78

DesigningViewsinXcode



19/78


FromtheProjectnavigatorselecttheMainstoryboard.storyboardfiletodisplay

thecanvasofyourmainstoryboard.

Astoryboardallowsyoutographicallyarrangeandmanageviewsofyour

applica(ononasinglecanvasaswellas

defineanapplica(onflowandassigntransi(onanima(ons.



20/78



21/78


Onthestoryboardyouwillseeaviewthatisgeneratedautoma(cally.

SelectaViewControllerfromtheObjectlibraryanddragitontothecanvas.



22/78



23/78


DragalabelfromtheObjectlibraryandposi(onitonthefirstview.

ChangethetextofthelabeltoViewOne. RepeatthesamestepsforthesecondviewandchangethetextofthelabeltoView

Two.



24/78



25/78


DragtwoRoundedRectBuonsontothefirstviewandchangetheirtexttoInfoand

SwitchView.

Repeatthesamestepsforthesecondview.



26/78



27/78


ThenextstepwillbetolinkaSwitchViewbuontothesecondview.Thatwaywhenthebuonispressedthe

secondviewwillbedisplayed.

SelecttheSwitchViewbuoninthefirstviewanddoacontrol+click+dragtodragabluelinetothesecondview. Ifeverythingwasdonecorrectlyamenu(tledStoryboard

Seguesshouldappear.

SelectModalfromthelistofmenuop(ons.



28/78



29/78


RepeatthesamestepsfortheSwitchViewbuononthesecondview.

Asaresultsbothviewsshouldbeconnectedtoeachother.



30/78



31/78


Clickonthetransi(onarrow. TheAtributesinspectorshouldopenshowingseHngsfortheStoryboardSegue.

FromtheTransi6ondropdownmenuselectFlipHorizontal.

Repeatthesamestepsforthesecondtransi(on.



32/78



33/78

ManagingUIViewController

Subclasses



34/78


Subclasses GotoFile>New>NewFile. SelectaUIViewControllersubclassandclicktheNextbuon.



35/78



36/78


Subclasses NamethenewfileSecondViewController. MakesuretheTargetedforiPadandWith

XIBforuserinterfaceop(onsare

unchecked.

ClicktheNextbuonandcreatethenewfile.



37/78



38/78


Subclasses Openthestoryboard. Selectthesecondviewcontroller.OpentheIden6tyinspectorandselectSecondViewControllerfromtheClassdrop

downmenu.



39/78


M i IBA ( d


40/78

ManagingIBAc(onsand

Methods


M i IBA ( d


41/78

ManagingIBAc(onsand

Methods OpentheViewController.hfile. AddalineofcodewhichwilleventuallybeusedtoassociateamethodcalledpageInfo

withtheac(onoftheuserpressingtheInfo

buonintheuserinterface.



42/78


M i IBA ( d


43/78

ManagingIBAc(onsand

Methods OpentheViewController.mfile. AddablockofcodeforthepageInfomethodbellowthe#pragmamark-View

lifecycle.



44/78


M i IBA ( d


45/78

ManagingIBAc(onsand

Methods RepeatthestepsofaddinganewIBAc6onandcodeforthepageInfomethodtothe

SecondViewController.


M i IBA ( d


46/78

ManagingIBAc(onsand

Methods OpenyourstoryboardandselecttheInfobuoninthefirstview.

MakesuretheConnec6onsinspectorisopened. Clickanddragtheconnec(onfromthepageInfoitemintheReceivedAc6onssec(ontotheInfo

buononthefirstview.

SelectTouchUpInsidefromthemenu.



47/78


M i IBA ( d


48/78

ManagingIBAc(onsand

Methods RepeatthestepsfortheInfobuoninthesecondview.


T ( Y Si l Vi


49/78

Tes(ngYourSingleView

Applica(on


T ( Y Si l Vi


50/78

Tes(ngYourSingleView

Applica(on OnceyouhavefinishedseHnguptheapplica(onpresstheRunbuoninthetop

lecorneroftheXcodewindow.

TheiOSSimulatorwilllaunchandyouwillbeabletotestyourapplica(on.



51/78

Crea(ngaTabbedApplica(on



52/78


GobacktoXcodeandpresstheStopbuoninthetoolbar.

Openyourstoryboardandremovethetransi(onsbetweenviewsbyselec(ngthem

andpressingtheBackspacebuononthe

keyboard.



53/78



54/78


AddaTabBarControllerfromtheObjectlibrary.

Posi(ontheTabBarControllerjustbelowyourexis(ngviewsonthestoryboard.



55/78



56/78


RemovetheviewswhichcamewiththeTabBarController.

Posi(onyourexis(ngviewsbesidetheTabBarControlleronthecanvas.



57/78



58/78


SelecttheTabBarControllerandintheAributesinspectorselectIsIni6alViewController.

Control+click+dragtodragaconnec(onfromtheTabBarControllertothefirstview.

ChooseRela6onship-viewControllersfromtheStoryboardSeguesmenu.

Dothesameforthesecondview.



59/78



60/78


ClickontheTabofthefirstviewandchangeits(tletoOneintheAributesinspector.

Changethe(tleoftheTabonthesecondviewtoTwo.



61/78



62/78


RemovetheSwitchViewsbuonfromeachoftheviews.

Re-alignthelabelandtheInfobuononeachoftheviews.



63/78


Managing Groups in the


64/78

ManagingGroupsinthe

Projectierarchy




65/78

ManagingGroupsinthe

Projectierarchy RightclickontherootfolderintheProject

navigator.

SelectNewGroupfromthecontextmenu. RenamethenewgrouptoResources.



66/78




67/78

ManagingGroupsinthe

Projectierarchy RightclickontheResourcesgroupandselectAddFilestoMyFirstApp.



68/78




69/78

ManagingGroupsinthe

Projectierarchy NavigatetotheDesignTemplatesfolderandselecticons

fromtheGlyphishiconset.

IfyoudonothavetheGlyphishiconsonyourcomputeryoucandownloadthemfrom

hp://glyphish.com/download/glyphish-icons.zip

Choosetwoiconsofyourliking. MakesurethattheCopyitemsintodes6na6ongroups

folder(ifneeded)op(onisselected. ClicktheAddbuon.



70/78




71/78

ManagingGroupsinthe

Projectierarchy TheiconsyouhaveaddedshouldappearintheResourcesgroupintheProject

navigator.



72/78


Customizing a Tabbed


73/78

CustomizingaTabbed

Applica(on


Customizing a Tabbed


74/78

CustomizingaTabbed

Applica(on Openyourstoryboard. Selectthetabofthefirstview. IntheAributesinspectorselectaniconfromtheImagedropdownmenu.

Dothesameforthetabofthesecondview.



75/78



76/78

Tes(ngYourTabbedApplica(on

OnceyouhavefinishedcustomizingyouruserinterfaceclicktheRunbuoninthe

toolbar.

TheiOSSimulatorwilllaunchandyouwillbeabletotestyourtabbedapplica(on.



77/78



78/78

DevelopinganiOSPrototype

Andsowecovered... Crea(ngasingleviewapplica(on

GeHngfamiliarwithXcode DesigningviewsinXcode ManagingUIViewControllersubclasses ManagingIBAc(onsandmethods Tes(ngyoursingleviewapplica(on

Crea(ngatabbedapplica(on Managinggroupsintheprojecthierarchy Customizingatabbedapplica(on Tes(ngyourtabbedapplica(on

Session3 Developing an Ios Prototype

Documents

Transcript of Session3 Developing an Ios Prototype