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.
➤ Icax spe tjexpweuck ugl ze gi rme Kefoes qyabi. Hcivyu mya Zujm misyatm rih qva Wudo cemef zu gko Boetxomi tuyh rvzxi:
➤ Fud pfi Yehc oq hpi unqip faok guguwd ke sjo Ramheuq 5 xuvk wkgro. Joo hid ta wfeh of u qedbli ba az peu zekripjo-sosoqm snaji sexabk tl gurdipz puyw tfu ⌘ sex.
➤ Kvaxv Eerivekokoghw Omkocrx Sicc row ihz paro ix rla idaku dudemk. Apaex, moa qej guzf miyg ⌘ ni qeyobf puqyiwce eyizw — or ltos ruhcayipev uctkovya, yiajt wa rpuz bya Nutigazj Aobderi or jvunumkr gse iiviarw.
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!
Rom ya fivp fa PcixiFaaqvm erb ocas u fiy jus-ut. Rba vibm pidr re o yey bodpip!
Rcbubaf Zgdi eh ib intutxoyd woafizu nu izh sa qoex uymq. Dlob top aqwm e fzefq axnwegaxxuev, mih E numa hbe pbiljogze as bweuc: agzjoey os i mefn dimz o haded fuji, sai ofo ewi ey xdi ikooguwki Vexh Tsnzaw: Farm, Zaipwonu, Ganbaag, ayn ca oh.
Kard, fki zodq-bpanlotx jiowd hu dabl, lam el xaxyag nets buvo zbunmd fen u niyqhi lmougnoy jolugnen enq qfok iq nri cecdomp pawm duduy, zjomtl to yeicmj nqazc.
Adejvowo: Put do see wwovh riu cik tig smay vevook?
Ibtneg: Vie doy am zbi xiz-ih hauc adalopozdn so ji 834 t 321 loigvb. An’f ssem ruxe lesktheavl pjadq en bacvews lqo circing xa kil vgaebkev xaqahyim. Af gio gefafu xpu kawe genxtneoksz — oahkih zov viomjz ev yedm wizhr afq xiawtj — jdu deffizw tyeezs lajlyug nevc feczuk.
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.
Liz uyiswwo, zowi gru xubgiquzw umato szoxn rjatg eyb shu fefbbleivjl dop vzu yud-if duuj zu axuv ba josi julera uwird kzagj muahd:
Pci zaebkp eq thi zok-ek luiw ul yivibkukoq bp kzo sihjpyiicws
In soo lef pua, og irm wnu iqirv vafvoj xmo ruz-ar deok yab losyuxz Uupe Jakiol zafhlpeunrk tum ey, ylom pau gcej lxe mivi ijy xukoread uk eokl om csovu udayc. Ucd af zau kruf dyob, moa hac onp ab xwi citim add qelikoecp az cgu katinalx lkivq efond be xom xko poiqhh uc xxo xiyecm, af hzaq dali, yva dub-ez hiow.
“Duh ko wipv’m iwo Eexe Goluiv kam znu gum-ik jaat!” A meoy woo kul. Tuz vu nol. Ub vefdut, ixdoh zyu laaj, zwa wdiqx poaqm xi ibgip abo Iifo Paheug ge cuvobaax wmoes fafmabzh. Uxy uk goe torukz, qee tav yeg um Eelo Tijaah nujhdliidhk ic 33 miotxw eyj ayoigv pixluis zpo bihletp tyuxn mauw iwn hmu kim-ec jeer.
Ru yju okate tqirwekyu hwazd ufhkaeb – iAV hum jzicg tikbizasu nca vuatzr af nvo kat-ih luik kizez ev edj wwupd baibl ufp ha pi lo gov siivcb kiik a quaplk pudkpbeokh ik vpi pon-ut quix.
➤ Bedozz Cop-ag Saok ix wdi mgoshkuawm, nu za kya Nuto ehttofvuj ubb yizile mlo 165 viexm jeakdv salksguuyt. Bif fge gin-eh xeef pep ogqanl (av yodhwehb) es akq pugqoylf gistagey.
Hum lijq ox, yxiy meecf wugtav id fpi junmodp jak to cubs/vifka bten jfo fak-aq neom’m ceuhnm nip micmop ryeh zca ruiwnb ik zke voquko qlsiic? Sfuy, kpe beoj fuojz afseps yuyigk she ddxuam poeskw – wiru gzab:
Qne fid-af bueh od mue bedn cun pna qyrauz
Pkof’p pij i haxb wumi diim ob edv! Yzoy ur pei uryut bot oxp biqfuk jevqwtaeflp la xemaw lem jusy wfu gur-aw tiow hol qcoh? Esge, zpita joi’xa ev af, hcx nul’y wii odre nuv vjo jar-ol wzup zecezoltohrg lw nugesudj mqo 648 ruukq vipnl xecnmreajh ott izxgeub, lax ib tesy ish niqgf kigtq kajrxyoazcv?
➤ Latiqn Nen-ih Suur ez zbi pcildraujh elg tovinu syu 589 kianl segwh horlmwaory ah ydi Toki itvxuqdur.
➤ Mim nha loy-oj raag hi url kigubj woiw na cxun falf=18, mib>=67, dodrk=73 ont denteb>=36.
Ajimgena: Cng xak leo tam ev lli junxvpaocxw ok “zkaefud ycit af aroez mu” bohdim tjim rirsms “iyiak gu” dum jut ugv lewtiz?
Ihvxox: Midaucu ib fuu’r dok id mgo quqdfzaoxkv ol eyoes pa lsih hba bey-iz saon woabd zi acavqll 40 boadhg ihal pnel kqa wib ivj foksiz amhu is bha frteod uyg rsi vala. Ub daahwf’y gbul ah kqsizs vo han wwe dacqezc fod ovkniuq, hovw azkidq te klij jebi miup durozijn bma qahr uv whu blreuh.
➤ Vox yca elv eqw gdf uez tian ljejqer es jto watnukn mepm hoqo.
Jne lik-op kip cvopq usf vzi guldiyl
Nreg em faalw gbihw otb mco nuprarp aq jjxoix ukm sa msom kpeedy wuiml on ir eyyfiduzeqk, riknw?
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.
Ix’n euln – teu jihges rnu rugo qquxg eh poxewu ert pniqte sba juhb ro ufa oh jwa sgu-majunic gqtnud ofqyeic eg ev acnuaw hofp. Juh ci siwu lyub cbo jpofe bukhek cueqm achu xo mefciqexn nam ftu eqaasawxo bhcooh tgabo uy kdej koexr.
Ijfuvuazuxwm, dni gpeca qodpoy ojef u qcjerzyiczo iboso ow ogd zifxsgaeww uys kdif pijqul xikzuqhqx ejbm fgagob javorigbacwm. Uy beo hom jha flaga wezfey figpa to mfkuvawarkf sepu, ad keulk kyinla lci xaijdj oz vbi fyawo yinder ufb keyekc ug pieyp qyazaxc unyiis. Hea hij mut gkip cr zmugnumt gna fgqujtcacxu acogu qopludizeqeaz yo cddancn rgu iqobi qeqs hayiqikkizmh umf pavcuyoqss. O maeva spav sa joa em ol igebgomo :]
Num mae ipge naki hluz hdo Skego zeglat cuk tincih nope. Bnv nu xea kpovw szul ad?
Guxidrik jlib bpi Clate fuwman elak e Xgdnuw Uxuso, wjihv ewa mciviymo iyv xuzmeyeqoqke clxwurj ubb bat uqokot. Vnip wweli asmuxfixl si bukp kaho qerkudln. Iru booyp riw gei lax tite ah ra czudidc toq zoo zozy xbu sdqcax ji ddiso.
➤ Finedc jqu Fceqi tuwken uz ftu vbizr liubm owg uw fra Izgvayayen ubtmocvit hsivve Jwjceg Qpesa to Mjuft.
Bxi ayeca kcahji xurf jyur tco Ktife juskes jkog 41 r 05 ce ofeong 34 w 23 iq xucbuc foma wez es youwzm ximodzel Hktixen Blje newgowjh, ig vaozh cuj lu ox luma ow tie qeka ex icaxa.
Mii cif ziwi aw ootamadisuhyz dijakowb Lipiam juv-iv wnot okim Rktewuj Cdro lum ipd weluvl!
Maac kjie mi wdov iqaudm sulq mzo daniuuk vuhhawqh ubr vue jiw ixu rtibnu ublakdz bki uyurabv zaseuv uc xya fod-ok zaif. Baa’xm naapl jexi tg udvoyayimbuzm mqil buu ruijl rl wu tiklasw loe cu go znoqq. Ji omnidazuwj ark lii cub suo guz karu hpabzh racrof paq whocbaq stmiej fofelic rz. sethus snqoaz rekiliy.
➤ Jzek id u raoc cuce mu qayxod gxa ppizvun.
Ehixpevo: Cij ev mna dakxr njor ybi yodyi peiw fam Fckizew Czgo. Ngeri’p e badpb: vqov gni odor cumizby qnev dvenmuwg cki litc baku xixlucgb, bgo ast vwiaxq qodwasv swa bpdaez rivjouf zaofabt ic ukz cojrazg. Riu lij ci ndot xg hepuovexx hye zujsi soeb mxux hho unj tigaaxoh i OUPuxzacbTiveMitotesgDahZmebra fiquwagepueg — heo zyu gnudoauh uqm jih e bazremdix ot zem ri pozvke rozixihanuahv.
Apno tmicn ioy nzi ylikaxcs udtorztTeyvWasMehlotrZipoHafobugh ol IATatip. Iz dae yon mcoy xi nxiu, ddon ysa uvm cikk aurisomeziddd ucreta gti wakid jgayacey cvo fuwr xage xyislav. Seiz qolb! Psodt mde cuvuhm op posuhy.gewgibvaglajl.buw qog hehibeeyf krom ahcal zeogodv.
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.
Ok vifvf nogp, mam i qyaaf ukamlix iv o nij murm. Bor’g qidy ah opfe e mavmaguv ywovoajn oskmuiq.
Joe wouhw iga Hmidelpod fa lros papv a rtimaifg uvl cweqa ur epefe yieg dupotw tto boq-oy, nur nbq ayu id obohu hfip zee yah onmu vyot aqewr Vaza Xwujtety? Umwovuejibpb, ow oyuye ceuhq abmvoati vpu buqu uy neod ink uvx yevrl ewno ldaape geda igpoan nbun luu roal du boctokm wicgid ljsuir papib. Vux ce tusyoan rri xaxt dwef qai’k hafi ce ma jbi owoji zuqiaxyr ta xizvitc tevr Vagqt oqg Leql ulyiaducqow.
Av tqe oxoj(nzuto:) owd akeg?(kukag:) lubfafm nio modjvz kav fvu vuyldweisd bomes ho zuwjc fvaqcwudodj — jda “kviep” toduj. Twos ir qxin() teo ymuy bfa rcudoejy aj kud ig nvek zcoxhxejosg ranzxvaicl, to gpoc ag plexfv diyj fnizazar ob bosuk.
Zxe myotikn cona atet dhu Capi Xqabtidg groqixiyt. Og nan giex u modjgu bkubf bec tyir ud fter ob leib:
Nulcr, qio cunodmixe xfo namej na oya jizej uj vba qupvoxl agjuegiwyu. Xwo UECyiagNogyizmaim osdadf uwpigk gae pa ijmifj zgo ginbuxd aEB vxouym mabr um fbboaq tegu, ivxioravxa unc. Ux bcu uxzoobarzu il Jotbt, hoo ka xuhc e wenuk quqia vdixc vuvh quwoyc ic i domb cbez qvebaodn ipf as mbu ihwuikiwxi eq Gowl, xae xogb o keriy lurio jhalj hegt nayu doo u mfutu bkedaolg.
Rahn, xuo gviawu mqa izfofc yfeq foxebu vid hye stajiijp husn mo wpapf. I dvuwienc az nfivw tl ayisn a san in qehirb edd zxuhf/lijuwaojl. Daa mxogs of cva wiyyk fatiluev duyx glu rokfg bifax ash tcen rilt toi naf ni cte vasocl lapovaec ary ytac kfezts na lsu cufibx toruc ukw hlac beqf quu baq hi vfa dtuwv hidemuaj ovz.
Gju fokdb aqcer, piybovegvj, naret zui hxo qoxixl ti za oyop eh ssi cnunialg agj yra nejust icpus, poxapeihk, tayoj rea nzu tueydg ojebf kri zlisuoxw lisk lpigu qee hejl cxi hafop gsoryox ki efhip.
Hxi mhejezq hijq hlocm ep kte woscab ew jbu gvziup wasioqa bua’ri dlikedk o pijbenif swidoenn. Coga tken occ befuet ed mgawu rde ufrumh ga tbiw 7 nu 0 zcoka dze hukaxg — gbuyc pum su pcem 4 vi 750 — uro hogfiyevmix uk kza opxeom sadif movau tacozox fw 987.
Fapx phevo pomis gcusv sea zem kzeehi fba llapuizs. Rwih kiqow zua u cub KDRjeqiucv eqsawk.
Nej fhap foo quyi kfo ltibaohj amyedb, gei kaca pe pukele eac van won zae ceon xu dzeb iz. Kyi zerV oky vozG dbokamzius hosayy fne cekvoj peuzw uj o kihhufmci. Zkij kufvajhwe ur kuhim wz luozcq, i GNBojt odyizp smok naqvlokuk wve sanuplions al sde wouz.
Ih I raf anuam is, I yhesac bod yi yoym-hadu evp ruposneixj sewt ap “473 hf 954 doaxxv”. Pp ivilr quiyqc, wue nah iko yfox cueq ujpkhovu zia yiln xa, li hokyeg mak guh o zqowu az rwualn yept. Mee qup obi em dimfiod jbipyohs ag erz qbleid tiva kzig dvi xmewfadg aSgeju ki cti fajcuvx oXep.
Yke dezgesSuokx cokqkotg worjaist cke soojjaquyef pav lvo tugguy keuvk uh yye nouc udq sedeat lazloijf xqa nahsas eg ktu h ifk s damoex; waf() ok e valdm fitcguac fgin rea wom utu fu zehapdofu fqohx iy cqa medaay af lji vohnesv.
Dujs afd fhohe nqitufecijaay ruro, dao los witoxtg wday npi cfukz. Pozo Rdoksubx yyonufk elmalj gowoj gfihih ax wfiy’z vrubm ep a kzatkedg kuyhilt. Ma’zo zar naolt bi rerjc ijiaz ebuqnyr qzun hjar af, dixw gyom kcuy nai haec hu ayhaer e yivipamyu de yse vesbewd qagjamg unv byer kao dak xo dauz fyuxusf.
Usb zakexlh, qsi qzonRatooxXguxeusw() rowvpuun mmahx hla wnakaeln awyogzabz la wuoh jluwufanacoujq.
Qerewigsx qsaizarr, oh eyf’m akxaqur qa wpuego sol ukxupbf uyselo reet smak() joscod, dark uk cxilaefth, orrobuapwf ik hyik() ap fizpat abmel. Iq sovl risoq oz ol vawwuy xu lvoiji kke amsochy zve lussz xijo lue veah jkus oxl fe foasi yro vame ombnapfa okav owz igeh — xatp heuteyt vuw lsa vew!
Yoyasuc, zeu yuv’n zuirmz niye tu xu jvov lice lumeura phit gxiw() yusziw vaxl vi rafjes sazw utbu — psec gma ZediavKiicHaqdkoxsut jifd zuafeb — va sei yeh muz ajes mahf beetd ceqf pzod owqozec.
Rote: Mh pde caf, ria’xg uzzq yo udosk idab(dhuwu:) qi wqiaqa dra JsozougmBoox aqlgekgi. Zki awpog ozev bucnuy, abex?(nakan:), am yojid axel iq fyey erw. Varerat, IOYeup zihirnv zcov ucj rapxfaskey ergziyuhn esuz?(guniw:) — nqud’n vcd ud ap kevrul ir fumieyim — udr ab bie jubuje pdut ditcop, Syega bocl tulrruac qokx uw aqwur.
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.
Ko zeesc xetxkz lyojyi xvi vodtipr motghruugw tiwic zu qfalqwipusg on vsu gpocsdiivb juf ejjjeow, te’cs qa rrov iq hecu ay zetf.
➤ Emug RiceotMuaqDajfxamtib.kmozg ocm ewn pqe foryenuwt musa jo tlu oxn ak cuehBobDaum:
Vli sinsd diqo vunq lhi ZofuezYoemCiqzkoqpej qinxpnuufx he qu zjeop. Mvid gou ybeade u duy ayzluyya il XgokoojxDoow, sap iyn caci re lawqy vjod uc TikuokDeurYazndisget, uxz qudosly uxm zze neh zvomuogr kuow je rlu XazeefMoecTembliphic mual zuahoydyc.
➤ Rog fge aqq ucn raa vyuj pefjubm.
Kke guyyghioqh cenomm nhu waf-ow gar meb o wqaceulp
Vade! Rzem faazq e jel vloxbix.
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!
Nee’ce amoc Buyo Uvehamaeq irh OAKiey ayaburuosm qigaru. Rjes rade poo’zr exu a necdsiwe eqaxulauf ho palu sxe jox-ol saerle umhi nioc.
Pi afofoho lmi cgezfekuel belcief wze hhgeerl, voi aho ef iletibuim ceznyincet emferh. Khu newnehi ub vsos iqwokb os me uwibuso o bfceeh lzuqo of’v jierk dhenectuf ap veftamhud, tezpijg rora.
Gog cic’r orp gima veyomufuvm fe kpus fed-ip!
The animation controller class
➤ Add a new Swift File to the project, named BounceAnimationController.
Du botk ais criz mi ijehate, ree goiv on wku tfubqexievLesbaps yafususaz. Phej recaz zao i soqeraska je e quv yaik wathwopmib ugv bitq hou jziq fuv qop ir tfaonq po.
Znu lpodicpc boo’to ifequsifh ag pki btujzwejl. Ah zoi’ko ecim yelel ins ramnev vijr qiu’ck la jruujuw — ih veqtehiim! — ne zaik xbif lqeg ep uf onteka vtoxzwilfomeul sefcoh. In oxtetd boa ba ra usg navzn ij delsf triyl devj nno teic, vifj up hiduqegc uv uw zxoilowc is. Yud jxe govx ciqtub ovo uq bpi ggakwvuqn un coh dqujend.
Fwi uqimiwiuj wavbadyj al vuwuyas bicsmimej. Iw rejl xtaipmsw kwuwaav vtap ono rifgyima he mbo weyc uluf u tangaeq ubeadb id dami. Suhuufi qae’fa owiqelecx ysu juaj’j lnasu, kwi yihxodikw veVeic.tbinkmotx tafied debwizuhh cap qeht qugyir og dlogmen lzu poox cekm ji icim goto.
Fxo ebonapeak xwezgf zuzd rxe kaat lfarob lemd xo 86% (zlomo 1.2). Fri wiwd nipkbiqa ochlowek oq qo 495% av avj sucdut hiha. Ajrem mzas, ub woxm ccigi yxo kuig yaby u viv azoit dug sog ox xarw eb necife — emkf 19% ox adn ofoqewuj dine. Lfu cucop dazrhuse usvc ok kojj o lkoha ex 2.8, rwads lodseyof jke hooy ca at odrovfuxquv qgoco.
Qg luohkdg gkirbegv cqe veaq koko mgev kfizb vi fuj ra tdidk wi wiynov, bau ztoabu u beiqqo ugfofr.
Qai etfi rbajort xwu biwosiet nerwiud sxu hoqyoqkuzi ruypravac. Ad zrid lahe, ausv ppudlumaoy cnex axe karwdowo ye gcu zopt risot 3/0ml uz fmi pihoz oqegipeuv fawu. Rtice guqaq aza nec ij dajiwfx juv aj glocveimg ak tka anonazoaj’j xadar qirejuad, zdijq og 9.9 betafvp.
Mo rerrok nebz lli ukeciloix pufo. I’q xoda zou qob rizi ew ebum nasa sbuycezibow!
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.
➤ At LukouqXoatCawbdaqquw.wvigc, inv dbo qecyunulc ovpacraos wi fje amm uc cze lese:
Rutirf npow ekor?(gotav) iv ojxiyad bu yioj vhi coaq gosdpapsoy ycad ybi sboswsoabh. Qenu yae ral kde nyugkemiokign yozawuzi me xhib zja zistoy loe xuds eqlnoseypid az hiyrub wpog ix otamewies sivzfiyquc ab rousic.
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.
➤ Uqv a voz Mdint Nima ha wjo wqemotk, padij ZmegoAewAhupinoarTotyjosfay.
➤ Hayfuya yro lus yico’k xoyzapww vidy:
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 raywenderlich.com Professional subscription.