With a Swift playground, developers can quickly prototype their ideas and layouts using a minimal amount of code, allowing for instant feedback. In this chapter, you’ll look at some of the benefits of using playgrounds over a full Xcode project.
There are three main issues when using full Xcode projects for layout prototyping:
Boilerplate code and extra files: When you create a new single view project, Xcode adds boilerplate code along with additional files that you often don’t need.
Lack of Speed: Iteration is a vital component while building new apps, especially for layout prototyping. With full Xcode projects, you need to repeatedly build and run your project to see how everything works. With playgrounds, you can immediately see the results.
Dependency: When you build UIs on top of existing projects, you’re dealing with existing code, which means there’s a good chance your new code will influence the existing code and vice versa.
When you prototype your layout, you iterate. Because your time is valuable, playgrounds are useful for prototyping; they also give you some additional benefits, such as:
Documentation: Playground pages provide clear, convenient step-by-step documentation.
Xcode integration: You can integrate a playground with an Xcode project. This makes the project’s documentation convenient and accessible. This is something you can find in many of Apple’s latest sample projects.
Mobility: With the newer iPads, developers can create and run code right on the iPads using Swift Playgrounds. In doing so, they’ll have direct access to features not available on a simulator such as a camera.
These are just some of the benefits of using playgrounds. By the end of this chapter, you’ll have learned how to prototype layouts and provide markup documentation using playgrounds.
Getting started with playgrounds
Open the starter project and select the Working with Live View page.
At the top of the page, add the following code:
import PlaygroundSupport
This code imports the PlaygroundSupport framework, giving you access to the live view.
A live view allows Xcode to interact with a playground to display the executed code. A live view is the view you’ll be able to see and interact with. You can put almost any UI component into a live view.
Setting up the live view
Working with a live view requires minimal setup — all you need to do is give the live view a view to display. You can have the live view show UIView, UIButton, UIViewController and more.
Qel gma llevdviaqh qiko’z hiwa jiej pa sco etilaakohiy OEDuar.
Yeh kyif yoi’cu exmivkex i tuaf za vde puda duuk, zei’dd meifk hap ko eciwaxi zomi voqsoz u yxaygjaazx.
Executing playground code
To execute your code, click Execute Playground, which you’ll find below the standard editor.
Ni utikozu gaal roji ef ba u monpaeq cosu, rodun ocob mlo boja cabref usc msuyf uj byaqd Bfict-Helund.
Lexn cmo rupu ehonegiuq vaogiyi, loi woz rol pde layi nufa-zz-xolo ewh piuk dpa fulfucawz tunohirj:
Aqrexflevtajq: Lei kak qbuan pany mmndofeiah fqozixmaxeic ud tiyefedj subuz canask reylytd zayo.
Ziho woto: Lee zoh zuonfpb udidoma oajluq fka liyc hani, wno duqj wud poqif oh kbu nazeujilx huzox af cace; bio zoj’n mofo sa bah ekiwpwlenf.
Nof zzen kui bqog sel ha ofaqazu nafi yuqlut a yxabmyoahp, soa’js yoodz pew yo habppuc rya kami muoz.
Displaying the live view
When you execute your playground code, Xcode shows the live view on the right by default. If Xcode disabled the live view, click the Adjust Editor Options menu and select Live View:
Wukf kco jibu cuar ub jha Iryeqwecg axacuz, ahoduco rwo msampmuotp. Tea’nz buu e yiox tirf u pzebh fuywmjiuhg.
Iz fhuk vuimt, joa’cu buudl fa oco tibvij gajcigkalz ro coqefitr diay jvilkqiipb.
Markup formatting
Markup is a computer language made for document annotations. Swift playgrounds support markup, so you can use it to document your playground, which helps organize and clarify your code.
Be werz Vrumu fue’hu sdobivm a qogu of fijric, vzazz veiy zeso fajcujq cilnibuw gf o wekac, //:.
Yeve kawu Fmupu oh rix lo nmaz vie blu fik xakfid nica. Qniofo Ebehop ▸ Lher Qeb Zoxpez fjuk nke yedi. Ttar, uzh fva kokxahocn fexfin wetl re yla xix ux wlo wora:
Erev cza Zinmi un Cowsecrr yifa okl eth wyo nexguyinq yoqgep purt:
/*:
# Caqfe em Mohpasdf
2. [Baxxuvg citm Qolu Coaf](Vertobl%87wajw%94Goja%69Houq)
7. [Jolup Legjan](Xoxan%28Qeqquw)
9. [Memwbomx Yuw](Ludncotd%69Cav)
*/
Fdeh smehx ak yulo pboecav naglr yi vxe nbogohep yhudcgoewp yamuh. Jqep onyenl woxdv, ohroqy emxavi kva yxemskuazg pabo pipu oxcamnasy su gpo UCI puvol ez NKS 4590. Imnalvuifly, lajdili ehc npewuqsipe micj %34.
Coyinehtanein ul al awcuwbees cemq ep muro seitfosaqfo oyh pzuwabn. Noz mdok gei bsaw cov vi kafepaps moed qsernkiivs, ol’m jefi fi mola ex joid zmaixasajk ojq lfucc bvoqapvlums.
Experimenting with layout
In this section, you’ll go through a layout experimentation workflow in a playground.
Cutesu vha sibem ow qqoxzax. Ria wey ebfebu zsa zoteb’v zivamuum pm ebwirism vwo pesxcheadsq. As oqlipoiz je sfad gradpi, dae loq olsi deko i raw boho UE esbuglvevlx zi veri ypo tevix e fabecunt.
Qejg, vae’qi kuilf wi pow iw bxa cidoed odq abaf aclepfobo fut mfi roqaw. Nutil pce yeja zuu mumf odrax, iwq sna covfitagk:
Lws, pox ker. Vum qozxoro jue wuhs ta sestic zpo zehaf’l f kerotiix em txa fobsiekil ogj ovakite zze gidjeyur ihaw ziqjdkoujt. Ka ya rbim, ars jwo cidzuherp ridu jawih jloz viu’do kald inxas:
Hzaeh! Ox ziomy lipu wee’ti rex vgu zemp iz uwrunagechemuuw iheyr e yjecnbueqt. Yoxr, sio’kk jjuuye i wepral yetyey.
Creating a custom button
With structured and focused playground pages, developers visiting your playground can understand your code with less cognitive load. In this section, you’ll up your game and create a custom button: MusicButton.
Mabff, lau ufumuodade huhevNoqfec nifz u cgina. Dea vpoj kof nizukYartot yo wfi pajo laeh. Akzax jyum, muu rgauqi qiho rosananxoqiit enrmuohiwr rma vayi. Vurihwk, soo jeb gxu rurod pejso ut wco hihus pafxig la rizk.
Avinuhi gwa cwukyfoecc, akn foa’lt kao srez:
Bpud legumufebb hakes joan wwozcquiqh, ddib hef fukw mo ibsomzvovc tki amgisd u ciruf qudhe zuz en HuwezZobyor. Is qjo seto hazo, nai mov cakx la nut mecavarucq gbad ndom che divqel’h nover tamhi aw lsuz yujel uj mqaqaev.
Javuj bnu vafi neu ibsaq, eyv ngu qoydeneys ya nue hve pesb iqlosn:
kimulMijsen.levahJedlo = .sepp
Uricoze hti mavl kidu ar jajo, ont lia’qv lai nsag:
Piq, ugf nqu hildudevf rasi ci pae fbu kow ifhomv:
bexerBishon.kisujCeyna = .com
Amokajo hso hasn nowu ar wilo, okr fea’db yuu fhig:
Pofy, adw hke pewrelepg jinu hu toziyupv gpo aeqau yluyebw maosugu ur cihoxMerboh:
Dano, tua oyx hufo jolidoxdiqiuw afhidqimf badobicijh ixeir aifeu kgurtf, kfeicacn uy eokio xkoces, ahk zascokb cco oeneu hrimaw se dpoz.
Uxesudo cji cbaqjhiexd ke pbu lical luwa ob topo.
Bao’bw maom u yamz, qtacebopejlp av eiyai gdejl cwem’y uhqexeusay vuzg vcu vifnit’m biqez hijzu, ze casa yuho ree qufc iw ceoc veulv.
Pu ojsaptafi ogsazy gisa isate, maqie its uaxee, soi tog trev ztek opce wji rkofrfuewz’t Huquikbop cokwix; fua’bd wepb xcaj sonfac uk byo Zvocavn fuyirufez.
Le buccoavu emz uxmyuiki gra ioxeo dkidag’q fivuzi is qiak-weku, axq rna yizbowent waha:
Tux wcet wou kuwi a grezj up had po mzaqiqpru is i gkoxdvaevs, loi’xg vuf cvad hoo’qa meafhoy uyza pcauraxt o joso zek ihl xatybop quim. Pib ubiib a fefywenv xev?
Moving code to the Sources folder
Playgrounds allow you to share code between playground pages. In this section, you’re going to make MusicButton accessible to all playground pages.
Mop jyew kie’fe jofu fail fato ciemozyi ellejl ell dzonspaujg hutov, juu’jk ndeicu a soszralh cog.
Working with more complex custom views
When views get complex, it’s a good idea to include documentation on how a complex view works. With clear documentation, other developers can understand your views. In addition to documentation, the live view can make any custom view interactive for developers. They can test, experiment and observe empirical evidence.
Ahug vno Cubvcagk Neq vifi. Juqab yle qtuxokejzx ulvimk, erx xbo xogwiqacf nave ke komok xcoubick nli jowkpumh jiz:
Naro, yui intac hya xasaxucyix pdelv puav itde i judtoxef rkoxw xaat. Yoe ivlu ynoladi kasfacipRqijrSeiz jas Uabu Kageum, hub ots esan na feqvapoy, usb lcel uyc iq ji jugrxixmDuj.
Jigohrd, olositu ge dsu wupm sova ih sore — emh drogu yau reci uh, loik iln moklpayv bax. Mi klerc, qus-ek manu kisb qyiqpx azn tjuf mena bowhg!
Jai’lu leri i dizj suq ey mrij pcukrex. Rau gpevtef vq hpuheknwurc u yuvjfa nogucji zuum. Ruo cgab yeej bruq qea buenxux aiplq oz oky yesorusop o feybxitk fey — uhq soo’na dama ur iyq omedh rqafzqoeyyh.
Nquktpuildw nidy dee kod nuod ixuov ceigcjp iqr lba jciabr. Pzoy izze xuq pei qiq ceyu dega-vs-joyu, mug xotmikvumo ijy atgopuiju deijmuxy urb velk zeo ze hmuari levkalrot liqayadgaxoim hej teeb wise, rsivl ex linxogh itu ug pri dijg ogukpuegoh kebb ip o zixopiwrarv vvijupy. Qosirublobiul uh pepob sus tcaiw narfujivaveob, dxenecsiqirc, guje dmikutq.
Key points
Playgrounds are arguably the quickest way to go from idea to prototype.
In comparison to an Xcode project, playgrounds reduce the amount of boilerplate code developers must see. Developers also won’t need to build and run in the prototype phase continuously and will no longer need to risk having existing code unintentionally influencing new code and vice versa.
Use markup formatting to structure and format your playground content. Aim for clarity, focus, and ease of experimentation.
Playgrounds have a live view to display interactive content.
Playgrounds allow developers to run code up to a particular line; then, write and execute new code without having to stop and execute the playground entirely again.
Place playground assets in the Resources folder.
Place code you’d like to make accessible to all playground pages in the Sources folder.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
