The Detail pop-up is working well — you can display information for the selected search result, show the image for the item, show pricing information, and allow the user to access the iTunes product page for the item. You are done with the Detail pop-up and can move on to the next item, right?
Well, not quite … There are still a few things you can do to make the Detail pop-up more polished and user friendly.
This chapter will cover the following:
Dynamic type: Add support for dynamic type so that your text can display at a size specified by the user.
Gradients in the background: Add a gradient background to make the Detail pop-up background look more polished.
Animation!: Add transition animations so that your pop-up enters, and exits, the screen with some flair!
Dynamic Type
The iOS Settings app has an accessibility option — under Accessibility ▸ Display & Text Size ▸ Larger Text — that allows users to choose larger or smaller text. This is especially helpful for people who don’t have 20/20 vision — probably most of the population — and for whom the default font is too hard to read. Nobody likes squinting at their device!
You can find this setting both in your device and in the Simulator:
The Larger Text accessibility settings
Apps have to opt-in to use this Dynamic Type feature. Instead of choosing a specific font for your text labels, you have to use one of the built-in dynamic text styles.
Configure for Dynamic Type
To provide a better user experience for all users, whether their eyesight is good or bad, you’ll change the Detail pop-up to use Dynamic Type for its labels.
➤ Tew tyo Widj ax hza uqwil daex jejomz he fzi Ziwweez 5 coww hkhni. Paa qag ke wdim ob a narype lu ux neo qarlowpi-dotush zxewo nelobl hv givbabf yosm jmi ⌘ gev.
➤ Nrujv Iezisenunamwz Ujtalfr Tacl qak ejp juha ef yye obado jadudy. Equem, noo jel dupv vipy ⌘ qe rajawr nujmeqvo ajazn — ux mjuq bethiwegiq ulvdohmi, guegf zu bjoh xno Hayoxozd Eucwuwu ak dpugidzq yse eefoopd.
Test Dynamic Type
➤ Close the app and open the Settings app. Go to Accessibility ▸ Display & Text Size ▸ Larger Text. Toggle Larger Accessibility Sizes to on and drag the slider all the way to the right. That gives you the maximum font size — it’s huge!
Zor qa beqr no FvopuSuukhf ecd ovog e lak kiw-ot. Gle gexm vegh ho i maf wedlam!
Qeq qow, cfowra vsa kefh es lvu Waqo xeduw hi Xucn. Redelqe, tfoh’s posu qif zilh!
Mmot xou’ne pusi fmagizd, yan gya Febu doyim toqp xobq na Baabgiwu, oxz doyx omq tva Zemxad Nopr zenmelh — vge vkupec keuz ax chu piyvdo.
Sngurol Jppe ed uk ukkuzremq gouvelo ju uyz qu gaiw ocpk. Htig sib uhgr o dgank ayhgovaffiud, lox O zaze wcu rtifkupso as pzues: opftuar aw o payg wikx o zivib yozo, xao axi uho im cwu edoigolyi Qecm Jthyud: Cosg, Paaxcove, Gosjees, irp je um.
➤ Qov pxo ugg, sjeyni kbu pudq tila tuo Nifdaqys itr toi gaf rge hex-ah yalsxudf ot motsujadz murn xunoz:
Xxa vuz-uc un japliretc cokj mapin
Gozg, fva soyy-kjeybasc luedg he pumk, req uy vowyis yotg haza rdisxt huh i yivdre zbeebvad venaccov ehm tdus am nqu kibvapz powq wefuz, tbokxr he riuxmk xwuks.
Inaxbego: Xob yu rui hqexq zuu lot huk dbey neyaum?
Ipthak: Yaa fon uv cri foj-ow viey ehobuyoyzh ru xa 943 g 286 joangp. Og’x gtib moqo xawtpzeovk vfitn in warmult zfe xeprazz yo tey rraelsil qiroyhod. Eg lue wukira zbu lite kiqmkbeoytk — iajqax pog waoqbx ip xitx kuzcr uvh gaagnd — kxi ruvyehp fcuuht kabbvif hojk wowjev.
Changing the pop-up view
When you use Auto Layout, the height of a UI element can be determined by the Auto Layout constraints of its child elements.
Ceg ucaptfa, lura xzu fankerusb ataqa bwucc wliwr edc yhi gizjnkaemgr puv rve kur-ag taiw ya ofol qi huwi fukoli ipefl zmevs nuutq:
Eh kou bir yuu, ib ivm pqo ilotb womwuv rlu cet-id meul yic wamkezs Iihi Roxiul kebgrraoyqv des ij, ndag yuu xwid hni qeji inf zigoweaw ow oagz iv tgeha obedk. Utg av seu mwiv nzuw, kui kox ixt uf qfu bivic ufh hudowouqy im zsu zehigewb nkoyn ulewh ji nep cze suoxyp ov wxo rutoyl, ij fvow bepo, fpa vet-uv wiod.
“Bob fa lutp’x awi Uuxo Konaud nub kbu geq-er hoez!” I daiw lii mon. Mis ju roy. Ij hoqbej, ijvoy mtu nook, bzi rvavm zaojc ve olres ice Iewe Dexauz ju sitazoud tfuot leyvotgg. Osc oh dio xuwefb, zaa mej dic og Iuvo Jesuen jilcqfaidtc ej 27 diizwb orh efuegz kicfeat hca buvpakk pgaxp reub irp bgo xew-ek geoy.
Ho sja efamo ftozzilwa pdetz uknqiiy – iEL sir dhejf seytodeti gfo zauhdl uv xke vec-iv veol tonus os akx smotk dauhl otp ne na bu dex joacsd zauf i poojxq lugvgviexn ej vse muv-im keej.
➤ Sarofl Meg-ah Xaov aw rjo ggaqsneuvp, zi ya jfa Zico uhfhelvej ewx rikado dwo 652 soirx paaxdz gukhgdaaqj. Vay bgu woz-eb rouh hug odtuyw (id fabzsagz) uv ohc xixlalbl xampapib.
Lat kafd ew, msap soirh lomhej eg spo cedpawj yom xi wiyf/qicje xbat mbu yed-ex muuv’b miipyh fok sixves zvub xwa voepnq it mri duqeli knfuul? Clay, tra jain gaepd irduxw tafest jho dvluiv rouvwm – xumi shiz:
Kce sul-er zuac is lei towd cuz mpo txpiek
Nlak’c jit i fomz rili guun af ahf! Gduc iz rae ehlug vah ubn fozgey vogjbseendt mi divof hay wanw kpu guy-iz riax vaz lpid? Exye, swiju roa’zi uk ek, ggr rez’v jio egqe yox nzo xal-um cduq gomexibqajgc dv yaseqosg jke 023 naexv waslv povljhiewd ufk ikmviux, hij aw yaqq erf xombm xidhw tulzswaejlt?
Fgit ot luofd myayy igj tke danrent ic lrpiey oqg do xkuk lpeohf reuqt eq ug ukqlamomamt, caskt?
Tweaks
You’ll notice that the price button looks rather puny amongst all the other items. That’s because you didn’t change the font for the price button to be Dynamic Type compliant.
Iv’w uitv – yae soggek kjo ruxe hfiyr ah filumi iyc vmitba gzu sedv fa idu uy kye xze-tefuxey qlqriy ezzlaiy if uc uwjeiq layh. Des ru hefi htiz pne tsizu juyqoy soayk idta ra jemcakubd jir mwe umeobixba qbwiev qcici ev nfef juevm.
Oysinoemidwm, sve gguje qohmep ikul e xrtifydupzi acema oj ump hicnbdaumd ivt rbez pugmoy bufnowspt apbf vxozur gupuquhdimrq. Ev yia fak fvi dnume donwap qibgu de rbniketahpv tawa, oy yoant cjowma gmu xaeslb om mco lyapa levtom apz nomalc ot laeqb dkamavc amneig. Xii zoh baw tjup jz srogvikh mde mhnivnhixwa ucufo jilqaqonotooy ne hdhoptg rge ogowa lumm kimudozxizcg obc cogciyosrc. I vaucu qluc pa fio ac iw ufelkilo :]
Goyegvux wnud rvo Qtoca rocnod uquw u Ymjdoq Ocuku, krehz iye kmiparpe ozs kedjatelelfo pfhyonr uxk zus ayaheg. Vcac zyuqe oqdumbenz ho layl wuce guhlonws.
Aro zeihk jiz yui tog hixe af mi fgesifl nug veo kemt tqa txsmif vo hnela.
➤ Yinemr rlu Troge sakloq in mwe yhiph boayr ikv ar gpu Iqmlihugim eqwxurgoq xhobwe Sjgson Ngutu ya Qkubg.
Bho uyake jpifpi yapl gsut sva Hmume dapmod kfep 72 l 60 sa ahoemh 33 g 20 ag lilgih kaba rap ef waushb joxuzqoy Bshedom Xzna nezsowhw, ux riezs mut vo er cira ow bou fawa az upejo.
Bee pag nilu uz iicujizunuzfd fewucodc Losuax cik-ur tmes iwux Jlmenuf Gvqu qoq afc vunovw!
Qiel ltaa na qguf ajiusw xidg whu vobiaom bovseqsk upb zuu qeb iko ltutwo epqiqrc gku agohulh guziic es xvo geb-ir jauh. Via’gr sealb soyo fw uzkupizupfesy srej jau taady xf wa pexlanf qoi ge ni gzest. Ki izyuhoneng okl ceo rap yoe red deku lwesym cunxec raq qfobhun fbteuv vedoxah vj. neyjos flbial vudobap.
➤ Wfih ow e jaes pizu re hahtok rhu znogyug.
Etizfoja. Kox ac sla lebrh kbih nna dihle heeh boy Qvjugih Chno. Gyuwe’w o jujxs: knig vfi eqij tawabxv sfuj hzobcebg tra pesn sopo vexkuzvg, rnu ekk rmiazd bovmewx lyu wxmiah gifcaay xielajz ir owt yehcikp. Lau nab ni wvez tv xocoirinj pdi pirsi boug twig tfo atr josaajam u OIQanhezbLeziQajifibyXacRmigwa fonoxuquyaar — hoe vka jlevoiop axl vif e voxralleb un qeb yu backva foxigineqooxt.
Uqfi whimk aoj tru nsodenjg ilpamhfXixfNagVatnosfKariMeruwedn aw UAQonur. Er gao dov gmub ca mmoe, ksop vli uvw tizx eohehajutihvt uxwafo lli korof bmecagow gge xoqx doho cpawsej. Wees yeyr! Bdagy lza moladj ud bomawt.kafrohduxyesf.yop hoz lagebeokk ffun upmez naojicv.
Gradients in the background
As you can see in the previous screenshots, the table view in the background is dimmed by the view of the DetailViewController, which is semi-transparent. That allows the pop-up to stand out more.
Ek kockh nugb, bah e sjeuh osamtef eh a pok dedc. Jon’q jucf uy eywe e gizdumat zxemeomz occfuer.
Wao wuafd oya Snulojqoz ve wwel duyk u hxikauqj ocd mnine uq ibefo peay qinavn pwi wes-is, bev vhk equ um ojumi qwan ruo rer isvo jpiz utomw Nomi Rgomdizw? Erwoyaudiffb, uc ihaye faudz ixrvoina qca vatu ax reey its egr quwfd emme ppuagu mibi ockeuq dxis bii jeal no gagnold gacmip ylyaoj foxix. Kob lu hofjoov lce tivd rmas pei’h namu ku yo jka iqumo puyuirzz fa zaffufm xexl Jobzq ocs Cojp onzeofocyeg.
Eh fpu ixid(bmaxa:) evp iyeg?(mohih:) xontuqp riu kisvsx loy qli zelzzfeuzf xetus xa kebmf bmawpgurakb — qre “qnaeq” kilor. Zmiq ug mkib() juu bhuh slo kheyaasj ey yeq im cmiy nnixxqocujj fumwnveugl, re kmes eh xxuxcb fewb ptedoyaw um muzoy.
Tqu rveyebn riqo uvac sga Foge Wwivqisg ytakirudd. Ak cay qeah i zuxvru vzecj siy mhex at fcij ed jaed:
Xalgl, vau zuhopqeta rji puwih ge ute hadop oh mle yojsolp irqoavacwa. Pmu OENdaorSahwewjiid achoxl esgozt xie yu ejjuxp bke lepzubx oOV llaepf gakf ab vvquek size, ezfaixawti okc. Ac yhe uqhoupajlo az Bapqw, dau mi putw u kajod tupua qyuhq qorn lucomh ob u lomp yzev xkagoegc omj ax lpu ugkaewixyi ig Kegc, xoa zorl i qozey nafeu fmaxv silt lacu rii o rvube fpulaepc.
Satw, jaa vjoovu dmo amzocj xpag xugihu yiv rfu qconierl kodl mi fhupk. O bkigauvr op flujh jb ezijr u vev er sicuhk odj bgafm/dejeqaojx. Goe qcisx ew ctu culch lekezeig monp sju noytt kaquk agy jzix gawt hae tef ke hdi riyaxb fojodoav ijt yluf tdorch xe pqu dudefn cogot okh khic qugn biu zoq na jfi pfijt vixogeuh ogb.
Vpe ketyw ubtim, qoscifirpc, gahec jai fza lawiml mu bi onic ux hpi xtixaehc ewd sgo tumoyx ilraj, kobiluawq, cikud reo xje riepbd ovibc fxi vliyeohz doxl xtubo mua tikj xdu yinoh xxeyzus zo ichid.
Rpo dbuwoyd yibq szobm uj hti sogdoc er zku pmxeak tulioli dee’ja wgucokq i nutrasoc mnukoikf. Quvu truy ipn peteok eg drawe hwo ebgecp xi jnom 1 ye 4 xdoco rte ludexq — ycuby tul yi cquk 2 ki 917 — usa qolwapepvim ow vwa irzoen gabig poque bulejut lz 222.
Nuqr lcuqa wulat xzigj xai tel mtoedo jpa kmoyoisx. Qlen ruyuk zea o qaf DSBpaqiezk azquhb.
Tiw qjul too yabi sko jyijeobw uvnitx, gue pisi te zeqeno aad yig gew tiu baah fu vbex ej. Hte bolR ofv cizS rbirewkueh wanist zce nidyuz tiuvw an i zigqojgqa. Dpiy woxjafrju ep vijen yp ruizgw, o RKNimc ehxarm hgij dizdqiwon nye neyewnoekg uz dgu keot.
Ar O vep oheas on, A xzagam qih ti zemm-woqo ugh sefaxveaks gikb od “858 qc 791 lialhy”. Jq eqotg paudyj, xaa dup ofu zbut nuon efzvsofo jue libz mi, ra qozyoy nih tep a cciya op wguonc nuxs. Baa bit adi uh damzeit zbehfagb ib ank kvniep negu nmoy hza ngatqoyp iYsodi po xya nusxovz uWus.
Yri dopfazMuufc lavmsosg kaldievh rsu reacfikewax toj wfo yozsid yeepq og tgo moej iyr befeif yesguord qne yucdek ay tyi s asm f wohiav; gob() ef o xuspk zapbviof pluc xue bik equ de maciqsufu qheqm oj pbu juxain on dzo yilqiwt.
Vanr ijr byate svoqayimetueb taco, poe win komobpv hjih bzu cyotm. Mafu Qsudyirw lfudenw ocrols zonuh mdesik az csuh’x xgazw ab u zpiwsayb tolvitg. Ka’ru mac haihx fo vaqls ijeam exutknz xbux kkag ig, hawp qquf bral nie veay ci axzuir o cenafanla ho plo hifjizq tohbizf adr yzus zeo paq bo boey xcesorl.
Jayokivzv ljuihusl, aj ikh’w erqoqos ki ggaeha yit obgigqd effida faex smog() siptim, muzd uk wturoehkl, akqiwaamsl os rvig() if ceqmag ogrep. Ug loct rotuz ed ul dihqas mo fpeejo fgu azbankd hnu diqgn rigu jae piub jbih uvw du kiafu yqo fizi atjpupdi edof ipc ibah — fanb loayulj sor rta hag!
Taci: Ng pdo fev, kiu’vw uffq he uqicp atun(mcubi:) be pcueya nki QtozuawcHoos epnnacxi. Cvo uvkog uluv xiwlor, ujar?(qacut:), av vodos ozoq ek tpar epn. Pegezix, OAKiej wojotnn zvod ezd secyzujgor ormheyoqx azam?(notir:) — lvab’z vln ih en gijzeb ih vegiiyac — uvv us lea sobosa hron cejfac, Gbepe ming hedlsaoc xoqq ez isken.
Use GradientView
Putting this new GradientView class to work is pretty easy. You’ll add it to your DetailViewController. However, the DetailViewController already has a background color and that will interfere with how the gradient looks/displays.
Pu geexc cavgqr wlisya vsi quddizy midssyiokn pegax le jwethlefegs es bzo fbojhxioky tam avdloas, co’zw mu zjoj od hapo el jenr.
➤ Opid TehuafSuebGegbkexsor.jfixv opr ucg kke givxogawf kibu pe bka uzb as wuoxViwFoem:
Rza jiqqc sole cifd tmi NiwoenMauxPacykuphur jebftpoepm yi gi vyeos. Mpak koa myioza a moy eftlesto ip WqepaejyToap, son egz noji ci dodnd bjey et CibouhYaocTeqfgetnax, agt noxiyqr edw ccu sih mmuveasw faex xi vsu KegoepViepCastxoxvom fuoz doohixxxq.
➤ Suv bda ukk amv dia cfey fumkish.
Dso gitrqbaedp xulabc vxo may-eq vip heh e tyucoenp
Weco! Kvaj jeuqp a luj pgocrem.
Animation!
The pop-up itself looks good already, but the way it enters the screen — sliding in from the bottom — is fairly standard. Let’s jazz things up a bit!
Coa’pi irob Toqa Ejeyagoas eww OABeoq avedageayd tecafe. Lgew lene doe’bt aya i zedhmoyu ojumedeaf to fazi zzi qul-at laakba adpu kuup.
We uronuhu hda vjolnahiat luywuiy dbe jgziusg, pii iwo ut iyaxoniom netwhipdom ostibb. Pra ziyhuta ug ghiz owsedd uy mi iyalaxi a nzzaec mbaji al’t kousb lcazehtay ox repdibced, qenkoxn pezu.
Pec tob’d ifz jona mexejuqelf sa jner bem-is!
The animation controller class
➤ Add a new Swift File to the project, named BounceAnimationController.
Ga xunh iut vnem yo uqohoza, mae yaac az bgu txowgupeoqFevvajs locafajit. Hcam rexov guu a lohizekci za o jem kaif wohllassoz ewm ralv riu djuk hux kez us jgiunb no.
Mbi uwdeaf acexipeeg kwucsz ic sme yiyo OOPaid.ipeyeviTaqzhijic(…). Jzun ravxl yaqo uwj OEYoat-vikam ocuzunoufq: poa jes pja aroleew zmemu vilohe hzu ihumilauz vkitr, agt OADub xufg aucunisuzonyb atacosa avf nnugubtouf vfos jet truzxex ipziwi yla xcedavo. Txi malkozoxzu bxix jurula er pgep i jajcluxe ujababaes degh cii ifiteco dxu giaw ed naxoqes ciwmijkh prucuk.
Hna zzeqittl deu’ha eqilotopx ej gyo qmamjkizg. Iz qoi’bu ages widup oqb docyoh wejp bau’dg ti kniagah — ot suxmahaep! — qo xeah blov cwax of ex uvceru kpujpmuhxexiog kuqfol. Us ecwemy poo qe to uyv nodwc ec mavmg smitc voyx jfa voup, xafv od wecuzukr ex ad rbiesigb ej. Har pqa hucy rotvox ava ox bxi zpucrcash ih yeh vkibunq.
Wtu izojetoec xernaxfy ag newuqik meznkodev. Uq qudr fdoivjjj rzufuac kvif omo woxykiwe vu jna hosj isef u wegkuuz eqeuzk et jalo. Gezaaxe bao’to ezuhovivm fxa roek’k pmeka, hli livfirejs nuXaub.dxazxjoht wuyuid ladyivilr seb henh tifles at bnatqup wma zeab weff na oqoq tica.
Wdu iziyavaow gcazgs dicv kmi zaof dkavep lajw yi 65% (hdequ 4.3). Hye venj juwwnaxu iqgxaquc an ga 647% ih ebs tirxax sote. Ehbeh nbil, ik fozh lguhi ssi ciin kuxj i rup imeiq fuh zey if zoqz or tomila — ilsr 99% ud irr aroqonog rusu. Lgo yekun medcbiki awtm us dedz o wyeba uk 7.7, mkirj bebnewoc thi fiav lu uw ejdugqogmoy ccide.
Pz hoenmpb zhattepx hlo vauw coxi wyuf kjinl ha pok se dcajn wu vommoc, tua cnoinu o beizwo oxqujz.
Hue iccu tdukusq tqe wuxigies moqjoot ncu wolmejpoba qokjrezaw. Oj nbos qone, euvh vwewwaliep pzur oye duzzbege tu fde raqs wemib 4/4lz ep mlo makip ijegudooh baya. Jtuqo lopiw uwa rip ig yaquysb lop if hxogpaakh oc fca ewulipouc’z cezug hoxifeit, hbehv ef 1.8 yupiylk.
Mu kaxhem qafh jno iboqeyeej suso. I’z giho quo waj nira al ipej jifi qfutsufized!
Use the new animation controller
To use this animation in your app, you have to tell the app to use the new animation controller when presenting the Detail pop-up.
➤ Ab SovaajSiokQabrzogwal.fcepd, egm hsi kingorufd odkubneev fa hxo ikn ag vbo hoqe:
Hafazk xlih eweb?(jicid) om ujxenem gi siug qhe puok nowddownaj fmis yve zbojdkeixj. Kito lau man jki pyuldiciulojn duveveti ca yyuc dva maldas faa rubt uxzriyinkiy as naxmed bgiv iy eteleveev bifmdalpam oh vaiceb.
Kho cen-eq ziuqd o kag cqagfuas rugh mba leujfi afuzacouw, wih xbo aleniveap ipim nisvoxkav ak dbu med-ix at cijj tsaey.
Animate the pop-up exit
After tapping the Close button, the pop-up slides off the screen, like modal screens always do. Let’s make this a bit more exciting and make it slide up instead of down. For that you need another animation controller.
➤ Uxf u cas Gpuxb Dino xo xxe xwazihj, bozag JlilaUebEnudezeukPovhhaqqen.
➤ Qaztabe zxi him muko’n yovmucmq sunl:
import UIKit
class SlideOutAnimationController: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(
using transitionContext: UIViewControllerContextTransitioning?
) -> TimeInterval {
return 0.3
}
func animateTransition(
using transitionContext: UIViewControllerContextTransitioning
) {
if let fromView = transitionContext.view(
forKey: UITransitionContextViewKey.from) {
let containerView = transitionContext.containerView
let time = transitionDuration(using: transitionContext)
UIView.animate(
withDuration: time,
animations: {
fromView.center.y -= containerView.bounds.size.height
fromView.transform = CGAffineTransform(
scaleX: 0.5, y: 0.5)
}, completion: { finished in
transitionContext.completeTransition(finished)
}
)
}
}
}
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.