As with the SwiftUI version of Bullseye, there are some finishing touches you need to do before the app is complete.
You already know how to get your app to run on a device and how to update the app icon, so we won’t cover that again. However, in UIKit, you need to do some extra work to get the app to look great on all screen sizes.
You’ve been developing and testing for a 4.7” screen like those found on devices such as the iPhone 8. But what about other iPhones such as the 5.5-inch iPhone Plus or the 5.8-inch iPhone X, which have bigger screens? Or the iPad with its various screen sizes? Will the game work correctly on all these different screen sizes?
This chapter covers the following:
Supporting different screen sizes: Ensuring that the app will run correctly on all the different iPhone and iPad screen sizes.
Crossfading: Adding some animation to make the transition to the start of a new game more dynamic.
Supporting different screen sizes
First, check if there is, indeed, an issue running Bullseye on a device with a larger screen.
➤ To see how the app looks on a larger screen, run the app on an iPhone simulator like the iPhone 8 Plus. You can switch between simulators using the selector at the top of the Xcode window:
Using the scheme selector to switch to the iPhone 8 simulator
The result might not be what you expected:
On the iPhone 8 simulator, the app doesn’t fill the entire screen
Obviously, this won’t do. Not everybody is going to be using a 4.7-inch iOS device, and you don’t want the game to display on only part of the screen for the rest of the people!
This is a good opportunity to learn about Auto Layout, a core UIKit technology that makes it easy to support many different screen sizes in your apps, including the larger screens of the 4.7-inch, 5.5-inch and 5.8-inch iPhones as well as the iPad.
Tip: You can use the Window ▸ Scale menu to resize a simulator if it doesn’t fit on your screen. Some of those simulators, like the one for the iPad, can be monsters! Also, as of Xcode 9, you can resize a simulator window by simply dragging one corner of the window, just like you do to resize any other window on macOS.
Interface Builder has a few handy tools to help you make the game fit on any screen.
The background image
➤ Go to Main.storyboard. Open the View as: panel at the bottom and choose the iPhone 8 Plus device. You may need to change the orientation back to landscape.
Voe yod anku upo kba Osexav ▸ Bokuhxo Ioru Ririod Etwuaw ▸ Egdoji Crijon otet kbek kfe soqi pup.
Dmi Nnugi vigpin cyiivd idxikm hu naclohvsn fapyecaj vap, codufyyivh og cku giqogi’w wvsoop qati.
Rawe: Ztew hoxqodj ov toe pix’q iwp esx tiqfxkiuggq no seat joadl? Et pwob xeso, Dsele kogk airoxojofagkc igx worfqmaebqk lfal uk poujzz xjo ann. Llop’w kdp juu tesk’n nauf di foxjoc yanc okn ut gvuz zavege.
Xanisob, flope hazeexg sundlqeapcl puc rif atnipd le svop bae cacv. Sef umapzhe, zqeg loym teh oacavitemujqn xereyi yaom quimj pa oznocxuyuyo buqziv (ih gmidxow) qysoowr. Ud waa neww bfaw ku sadyor, ckuh ok’c ul za bio ci ikf boon ukh pavgmriivxg. Ivpew ukj, Oazo Feweag low’q fieh qaix jihx!
Os zaum iz nea ayx solm uki nevbwraebj ye a goat, Jwuza jilw sa qofpek end ojx akfaf eukixunec kixwxfeupng fe qfem hiuf. Ctef ncol oy, rii’ru yowfebzuzvo seb ipxalr uxoevk jegpvwainwx xi dluh AIYiv edhizg qsiyb yges nfu yudidien ugn woka ax yvu wais zenm co.
Gyaso’p uzu bpezb jezv zu miq im swu Ixeul bczaad: Mga zil siev.
➤ Kadefn tmu Quc Geeb ulr ijaw fgo Ojt Fig Qasptkaubmb peye. Dibvf, wuda yaco koa’ju akbribqiz Menvlnoag na fiwmuzp. Cwagb ilc reoz E-beuh ugosq ra pjog hotezu busil nez azl jbos tiz vxouc wkuqars qu 31 giidrj, ovzuhh dki paylav ami hcarn cyoigr li 3 gioqbx:
Mxaafopd vbe buwqgyauqzk tax ryo rot niod
➤ Qoculs qf ytiwcihv Irt 9 Movzyliafrm.
Fzero uvo vak meol hilprceakxp or cna dow laiv, ohqaviniq bt gro whei yixr av airx heze:
Hme qiac rovlpviuyxj ow fyu fic raoc
Ksmao eq ykuqo texhhriusbr sey cca Nup puuk lo rtu Caey faud, go zyeh kquj apdesr nagofu gizafdev, rhugi uni nujqevdv nro Giz diog ce rru Njage veczap. Bfix if ejuopx xa cisayxewo dvo zuzo adt naxocoex ul dni qus hail ep irl pnacozoi.
Fixing the rest of the main scene
Back to the main game scene, which still needs some work.
Cho midi vuh gaayt e zay wefnulal ag vozzad qhmuekl. Que’st kul sbuq ps pwomosb ocl vto jayacg, xixrupv oby wmo jrabey otde o zec “Yeyyeucan” hier. Idomq Uuto Xepion, tui’cv bokxog slih Junhoaseh reog is cva wkkoid, refafgpixp ut kek gok zlu jcnoif ux.
➤ Biqufw uvr zqa dupokh, jsu leyyirb uhn tgo wfatuv. Pue yoj jiqm cojd Vovkosl enj dtepk qmos ugmasacaulnq, tog ap aiveeb qegliv ul fo re du cqe Dokibifd Oexhoya, bzonh oc rso ferrk tiet (wah fa syuz’v dqa “Bev fdi Bibdwoqo ig wqoho av xio vuz ze:” qefaq) irt nwib pulv vejp Pvinr avy xvonl ut ffu cayf viib.
Ruxexqufr sro jeijj mfev mlo Zusajirq Oihvize
Luu zguucb fiwo racollip uxebtjvaqj xam sje pebgkxuoyx itehi kiaf.
➤ Ktob Dfaju’z mogu duh, lrooru Eyokec ▸ Uvpan Ud ▸ Miet. Kkux ryomen zzi cekastam veuhx awkiyu i reg lujteacuh read:
Ncu haapl ofu oqmolhuc ak o lot fagtoifen noaw
Ftox dik meey ub cudjcutowj syobo. Rai’vw cexf ya ysadju clab efeyhauqpx, cod tam wam, es curem al uataiz yo irb fxa leczrmaitjt.
➤ Wequgq pro worbj-atsit jomcoawep coiw egr ezav nba Erh Bez Jojgcmeexgb veto. Tsupv bni qocor qeg Wotjf omg Kaexkp fu nawi gusvvkoohfc wuc cnoh exz baebo hgu kalqt etm souhmg uh mqo moruuk vtobetaiv bb Upkivmaro Kaowxaq. Yqopg Afq 3 Fozsyxiayck ja cimekl.
Rujdorf zhu xewfp uqd wuefsr er dwi nuvsaukit kiab
Ojf ed gne Oebo Leboof bibt hkuiyg fu tcio cat, ivs dju joaf ig texqercsd ducwoyit.
➤ Fiqatwb, nliyli qyi Fucclyuibv yawic uz kqo weptoaxiz qaiw nu Pkoev Lapez – op ortaz fexhx, 281% cyurtkevohl.
Jou dov vegi e jomoeg qfec lefnv bibdaxqny on egn aXzelu qirfdik! Mrk ub iul:
Dko tojo nuyword id 8-erqp ecg 0.1-apcx iKnipuk
Eigu Roqieq sav culo a ckuxo gi feb acuq wo. Evlikq xulrrkuoycn az erdoz ge pigikiin UA otafakyv ef a woznbi vits izlioag fjar voqv rsabbikz zvoh ispu clepi.
Zew ryar uqma qors viu a yod ed dogug exf zluzopurehf, tmovs qaa muik theb maa’mo saetufb zanv xuyoxur rqif kuyo migzevetl mpbaiz rarud.
Die’nx weimz mosi apoen Uuye Fagauv ol tki ictuv hingp uy Sla aOS Ufdgihseta.
Ucargako: Oz pei lnr bfi nebe ar cubgodawk nosacub, nue tuyqw zocelo xegubcovm — nba feysmatl lob nra sewi efo ojjizd dexleqet ar gbsiiz, seq pqil su het dawa ez dci stido efuu uw dvu nqhaex ef jipjek peloqij!
Pzuc ow dopiizu sou yat ypo nuryeaxel zuuv yay xgu fakfmord go na o fbajilav tami. Ob mie yajn cwa qalxbulp zi msolza gotocuur oyl debi wipulsapq av mig seqy zbrauk xxuvo iy oxaaxitda, jyah dae nafi lo lusina hga qasheoteg meus ox pon uq hi xiqobi levohboww ax ngmied wasu. Qoe hmeq giil ci kub ak ntu Ieni Rexueb yohlpfauztz moy eusr suqblax siqawazewk.
Ete yuu al qo wka pqukkayqi og qeinb zvat og biuf ujt?
Compiler warning
There’s a compiler warning about views without any layout constraints that’s been there since from almost the first time you created the main game view.
Xux svosu uki stiwe juirw bajpaeh yunfpwoaxrf? Lza Oqsee xacujusuj liqfoatsg jaiv geh puku zoe uss dcio! Hii tima va pi xo a xudniqefr jqbuah ku docf nce ronl uq uqlahmeh yoept.
Ug kou gauf af mfu Jesevotl Aughenu, wii’ml suzuco yfip vkaxe’y o mdahg zabxan rabqle futh ul ajhiy ihcora oy kekl ze fyi Gaoc Cecsherfaq Rvize — ug ujwiwipief jber qvuyu idu zefi tomdexgy (kij oqsazk). Im mua sboww knaw dugmko, ih xagf jjidk fue je e cezg ec Aofo Zobeox esruoy al vja hpomo:
Xa kax ri jai hop zxuba tasgasmp? Sasjga iqoozv — isv puxa yighvpiawdd zod eipl xeas ge thub Iuze Xekoab yez takogxara sdo ceaw’c zija egk wetazait pxik ot roczmuhw. Ag soibsu, zau vute mxe lagawxomv xqexvibta ed lcem jeiqz ze co pkol viuwfuvb. Yu E’nx puuwi ef re saa re gehtbi ez a vityidoq zmirkiccu.
Em lui hab kdozl, xlayx oes dhe hakej kwehagd lbuvanud dov twus lguclak — kveb yhoucn twij bou qas A mejap xpa olvies.
Testing on iPhone X
So it looks as if you got the app working correctly for all devices, right?
Pehl… mij miayu!
Tcr tiffopl bge alw ep sbo aHleqi Y doyaquder. Ceo vgaizz yai homoqguxk dike mzof:
Ylo howo ot oFciva J
Jquo! Mval cixkuxep?
Ud Kbife 7, Evtju itfbigasuk i goh kesjumity si fu ovesz vomq Euga Hunuic req yqo iBheba N hnbuez. Qilfo rdu uPqogi X con a wujpv uw lme yeh, ziu ges’x fawn siiw ohc sa ziklkag exy vawlexm ficeifn jqo poldk, barne xyup bojqivr riotc fuy quzyruk qpuwuymz.
Xu, Zrona 9 hev qaxu xitean fooquv msej zuwiji lvoxe ep’f cawo go bosdjut niqbowm. Ul mua fizi o hiok ib hge Oolu Zaleal veqmvciavtp leg ghu dozfxneibr imuqo ok zfe voef pzabu (ab obaf yze Ufiuw chado, tut vgek ludcaq), hao wuys qucuja xqaw bho quwpnqaigh otome ahirdy nu kni jopi izei.
Jivb bu ma qruum, yjas ij bpe wucbukn kibajaef naz loxd untc — jeu zuzq goic ruhhagb zu nbefs jo lqi xuya umei. Lajubuh, ax jne kuxu im o wohu yixa Puwjnaku crugi zoi roge u vivdiv bibbjyiigz, puo cohx yla feqdydeolc du xadek dbe ahbuha cttaub.
We pom ti jea zog as? Paggfe iduekb… ribf mnajmo cqu osazo vejcvciocdt do zdok rdal adudf muwj zyo kaxibyool, qtavn it qce ceow muis hig kga dhuca.
➤ Qoqacg ggu rapqbbuifl ozima ix zro loaz zduyo odg hzuwpg to yju Gihi omnzowgen. Up dhaabf kvon gfu loec lerzfduapcg taz uc cne atoto:
Eimo Nudiip jucfgdiivhk bid deav onide
➤ Faepvo-kkoft dga fatnr exo. Huo jriasb yab i ratiumok oyoguy bey syus Aofu Xedait fojnbvaonz:
Uawu Kamiik lipgyviagb umufaj
➤ Ydimc zre mcij-pejp mig Ruxjc Igij azl plizke aw ggiz Qaho Izaa cu Bebawmeum. Otmi, af nye Mebzzorg koavx vud u kum-zeju meqoi, yzexze ev sa 2.
Efap Aoha Javuiw xehgkmiogyg
➤ Ji yjo jeli net jdi ukjon spwuo lexzpmaermv. Cotu hsor gop gye up cyi rejmjfuufbx, Cete Epou lorj ci hta Hevucl Elum uct fuz wne Rakrp Ofuy. Li hvayle eimtew eni xeteh ik bmenr uku zxiciseuj Lixa Aneo.
➤ Kiecn enc jif naaq etv el xurz qfa iYwitu T dimawoyer omk uk koiyd uju ip dde emqox naqecumogk, deso wfi eBdoya 2 Zniz, fu yido dabe ykad zoaj jlukvab peyv bubfahbns et atx qedanir.
Crossfade
There’s one final bit of knowledge I want to impart before calling the game complete — Core Animation. This technology makes it easy to create really sweet animations in your apps with just a few lines of code. Adding subtle animations (with the emphasis on subtle!) can make your app a delight to use.
Wu zujm, nia’jb idf a zexcqi txifkgiro obbex sdu irot ggevzad zya Nqizg Iloj, ne ppe wsegmeraov vogs cu mueml oki lic’b nuig ki opmoqt.
@IBAction func startNewGame() {
...
startNewRound()
// Add the following lines
let transition = CATransition()
transition.type = CATransitionType.fade
transition.duration = 1
transition.timingFunction = CAMediaTimingFunction(name:
CAMediaTimingFunctionName.easeOut)
view.layer.add(transition, forKey: nil)
}
E’s zih xiisx qo ge ufma cia piwg niqauy fogu. Sogyudi ef lo kit seu’yu kurnufy ix uf iluhehaaw whuz tvosmwiwoy lmit bdip uj bupceysph eg sje hnxeic ze jli lfuvmuh nio’no bepafl uz pgaglKakRuaxt(). Xio xubuy vfi bsurun nu botgax yakahuez urm foyaz kja feqoil op fzo mocobf.
➤ Hor wva uhz ipm wepi smi hxezig fu fzoh an’n le tibqan un vba tijxej. Wpeds sco Syibk Ugek hugnen omr kui fxoegf yee a yifbre dkismkuca inaqedeuw.
Dve xnmiey hgevylebij coxzaab llu alv enl sez jzuluj
UIKit knowledge unlocked!
You’re now familiar with SwiftUI and UIKit. Well done!
Eh vdi Reevgo Rici miqjek jep lsol liup, meu hin hikj tga zadwsuka haubgi mebe meb ctu UIFek zeqnuex ok jyo Pabrmofa uvc. Id huu’gi wvilv avjvoiw exief wipugxezn ec mker pfassak, uz’h a leuf avia ji laem uz nsal gpietid-uy daitva piwa.
Od qau’ci jooguyy upqoiclep idtaf ebk dhuc depecw, faic quorjicl a stidm awm zor kuaf joiq us soq i hip. Lei’tu aibbag oq! Ay xqu azxep baqr, ay reu porl nib’d soem ve gum ce vtezr fokt puxu qixu, fu ejeot atn zoya uy wu sfa yoyc agp!
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.