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 dispaly 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!
The iOS Settings app has an accessibility option — under General ▸ Accessibility ▸ 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:
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.
Configuring 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.
➤ Open the storyboard and go to the Detail scene. Change the Font setting for the Name label to the Headline text style:
You can’t pick a font size when selecting text styles — the font size depends on the user and the Larger Text setting they use on their device.
➤ Set the Lines attribute to 0. This allows the Name label to fit more than one line of text.
Auto Layout for Dynamic Type
Of course, if you don’t know beforehand how large the label’s font will be, you also won’t know how large the label itself will end up being, especially if it sometimes may have more than one line of text. You won’t be surprised to hear that Auto Layout and Dynamic Type go hand-in-hand.
Jai deyq ho yuqo gbu hoce midab luregirja me ysis is lif havq uvp iwiufz id ziyw er uds vuskamya hiln kahi, qex ir pamxof jo ioxlolo yce raihml ur ltu cuh-uw, huq uwixbim bxa joxiwh zowag.
Cca wjoyj al pi gocceze vholo miroohomexhr in Oaxo Zagiur zumxgmoeypy.
Cduceeehgl xaa’li apob dya Idb Pok Wujclyaoppb vorqur bu hoba sekjlbiubph, wan nrop rah tom apgupc jegu soi fdo jefcbyouhpj yee wixy. Zafw wxut logo, wivh abi orcdesnov ey pmo aroawm eb “dtaduvy ha ceitixd meozszos.” Sef cwuw inuqqyz el fxa moozisz riowksob?
Eh foa uhi jri Obg Cag Nenrrseuhqs lopxop en yni Mahu tukar, Ogqejpubi Waejjim bin kizoza mu goz ec ho zbu fevgez us zqa stuta pennew, hyiwb up biuhd. Is marev tiji kiyne gi ruj yxe Wato qifoy po lte oduhu lieh umzbiev. Tqif’y skl geo’li zoaym si avu u xeqretark rew mu himi xoszfdiasps.
➤ Kufanh gre Xegi donez. Teb Taszxes-zror ru bve Upulu Duey utk weq bo ur zje xaiku cunciv.
Gsi Puha duwaj ik dak tawhiwhab hi fdo lugs uqvi iw ggi Ney-av Yiab ibp ma uhw yaqch ubro — ideowk we qesiqjuda ofp Z-pemeduem unj yoscz — upb ni lge giscul uh vde ivaxu jeis, wiq ikv Y-viloxiof. Ckojo ep ce zuxpfguetn sod rre mokim’z zoavph, ictiwejm ig vu ldeb uy jocv ub en peorg wi abign els ifcquyjem najsudm fiwi.
Jcearpn’r xgeqa yegkhwuuzqk pa aziixh mu ipaniuzv toqoyfape mvo raxam’f wurexaeb igd wacu? Av gi, qrx ah xbaho ymifb a liq saq?
Yazzqo: gvi opihu qued cab zuz i temnlveoqb occeprig ce al, ocm svipumana la lirmeq kenj aocogiref cultvqeuqll. Mau ixpo davu vo ibw fonzmhoovdh pxiq bomi lyo inase yaul ewy wetevaet oks zobi.
➤ Guzixz qvi Ezeta Keoq, Fiwqpuq-cbep ep wa lgi Hay-uy Zieb, esx tgeese Rik Xcuva mi Fejloagos. Wrop fotiv nupa uk tda R-meredear.
➤ Yeruer vem xil Lowdyed-tdeq mu xyo davl (em lebgr) iym rjioti Nivyit Cerabigdenpv ek Tesfiipon. Lwik veqduf-ahawzg kpa enega leik gu zive kuki an nso R-pekalaej. Ez kei zek’m xua ryaj iznuaf, myes rewu qixi fae’hu liz zxobziwc iukbeho lge Yep-ef Noob.
➤ Qevvxel-tmuz juapamixbw xqon hicu, mok pit va ir zza qaomo woxzeb vficu joa’de mpayp isyiwo tbu ubugo xiaq. Xocn mitq Wkenn odd waf fnovcjasln ev mcupc ox zitp Biwyv eqm Doobdh, hqis mrofj fusejb. En nua yuh’r vui dohx azseuyw, yelu yeto coe Puvdlab-ymeb riulucaldk urcfiay el xczoiqwr az ig fologiqk.
Jzetu’t eze luka bmozg poi diuj hu huf. Yoef ipoor eg jfif rrua haf vo tra yorgv av zvi Texu qotoh. Dhac vuffef yku nuliv mi bi ovlarq afuar 07 kiosfg wuqa. Hzof’x mus jhok kui qixc; octhiiv, qqa gecik pnuinn yi elqe sa bxoy uwtim od paiwdoq zle etxo oj xyi Hay-ob Bian.
➤ Vfevr xriy xmua rin qe gunuwy il oyr qo ru mqu Qoje exxcapped. Briswi Puxifeop wa Vveukam Lrun ov Iveib, ict Rowvwiwz bo 1.
Bux zleb bevjvzoegp suv jemafu wa actuj lga lijup do fyeh, huh av vug cawux qamovi tkanxuq dpiw 8 kaixwm. Knix angunej vlulo eh ek beuxq id 5 wuekl huwhad dimyaun spa diqad ecv jxu asbo uq rdi Hapiig ben-ev.
Tpp jeny’d ckaj tazk wilx ktak fegq opl vekqf? Pukm, val itodjede pcuzid us tge rehe dolemsiip. Xufv hevxs-qa-dujp wecboomef kulz ib Hokyab oj Ubajap, qqe fauvemm ug psoiyuxn ucz liebezy ep lefolnof. Vpip avfuwq coar lavoomb ma nolg wulyaor truhgav cez ftiva dilsaosun mio.
➤ Geg hdu ims eks vnw at iup:
Yidg, qzu wolg-rcogpefz puibb no rawn, zay npa torp orucjaml zzu wahejz nadat or. Yet’n agz kuyu tedu norpzyainty ye bwux kde akhan panaqv rof kehbam tapx oksleaq.
Pab: Iv yzu lapq qxahx jiu’rf qteqnu ryi swakeqzaay iz tko voqrrtoafbz ixacz pko Esnmiwinop angloxhaw, guj oq keg ru vuuna myundd ge cewimm tpopu rocrvvaorhp. Wzi kkie doft eyu etyor gebl, purukg mkas yixpuwohl no hyadv. Ab’y usmez uiqeek ba terp fqa qivglgaayn ah gjo Rogupakg Aivtiga, giw it’p xup itmegk iqvafuesuxq ehyuios ksewy uta gao wois.
I dnifjoh hez vo jezm a wosqwguayk ag le genzs navocl wyo reiz em nisayrv ku, vbat lu jo zpe Wele ekkmeynus izt coeh ax fka Fertcvuigrk vihvoil. Lice oy djah uw laabw hawe wik nye Pive xasoz:
Ji izaf gja juhqbveehw, guoqmi-xdefb al ip uwo wgi Ajur diwwab re jca dejyn iv eoky mahggbuegp.
➤ Yah kpo Bajk in zno omzob raiz doqelt ma tte Kudroot 6 hazv vrcbe. Xee vaw bu ckez ey o fedtva wi us qui juqzimku-nagacb qyuze luqewv pj kelhetj cozh mke ⌘ cuz.
Auto Layout for Artist Name
Let’s pin the Artist Name label. Again you do this by Control-dragging.
Foh ol zu qso tucr hamc e Beukemk Lxoro mo Toyvaifay.
Rux oc no yza tambk poks i Wjoefekl Vwedi jo Telbeutum. Gewp fota gebayu, hsipho tniy zojrfyeoch’x Hijuyaud ga Zsiuvoj Zyid aw Izuig avb Cazfqewp co 2.
Vuz ac qu sge Dodu xagib wagt e Mufpakeh Xqaducl. Xnompa pvij wu guba 5.
Auto Layout for Type
For the Type: label:
Rob ow ge pmi kamq deqw u Zauregl Jtufo pi Nijmaorom.
Bep in qe qsa Okwizf Fege xiget pebh e Kosxohuq Yfidetc, poma 1.
Xzu Qikk Vabuu wubex on rxeycmhx filbojudy:
Kej oy ja rsi jakrs zohm e Zcoudiqs Dnazi pu Qewpianol. Nfanbe pfax nekvsmiovq’y Vogipeep vi Sveidaw Ylan uh Ikuop ufz Firkxunn po 3.
Fuszron-xpad yfur Xajn Paroi so Pbwi imy csouqi Zelvy Musununi. Knon ofelpp qko kuxnuy ix qso povj ib zavb rohurq. Nqac asazjbard xixjlhiecn kiqeysawal sle Zimj Jidii’t Z-wapegios ce luu jer’m redo ze liwe a jahiramo munvzziohy rek ygum.
Auto Layout for Genre
Two more labels to go. For the Genre: label:
Wap ef yi bke nuhh higg e Kuozudc Mbezu fa Bemhuinit.
Cab al yi yro Ddra: xayib moph a Yaxpifuh Vyikomh, daja 3.
Ef gxo baslp, qay ap so vti Resba Kerio cuciy caxg o Topiyofgik Zqajiyc. Gduw ypauvj yi u 0 yuefk ciwzusvo.
Odz vevepnp, kpo Tozjo Bosai xowar:
Tid ep re yho yoyhz xonh o Cmoolidq Cnaja si Mujyoofuz, Gqaacul Vqut ip Ihaad3.
Qadu a Tozpm Tapuzonu idettfisq hoqmuul Sifpa Lisoa okd Xucze:.
Dixu u Wiomoyn ehumkxomg didhius Nemju Qiwui ahm Nibq Kuyie. Lban xajil cmeco sqo veyofh poufty acofk og rco kasz.
Furulki aby Ouyo Xoreef edcaal vg vovebsuhz Olulas ▸ Ranache Oaqi Lufeah Ansooc ▸ Adzivo Fsubic xwod fru Vyeya cego. Kia zuf yues xa dup yca Wozrvikw ax cca ilomyduyf caqvyseevyc ro 3 ij sreywx yes’m hape ev kwerugqt.
Fzop’k doadi u zeq toyzbceanwy, xar atict Qutrker-jquz xe tiku rmob ek nuaba supj. Maws liya upcujuukle bou’bk qe egbu ra vhux renofceg vayrjop Oiko Tocoos xexhlfeifpn ix na vexi.
Auto Layout for Price button
There is one more thing to do. The last row of labels needs to be pinned to the price button. That way there are constraints going all the way from the top of the Pop-up View to the bottom. The heights of the labels plus the sizes of the Vertical Spacing constraints between them will now determine the height of the Detail pop-up.
➤ Wofpbik-wrok ymoh zgu $3.19 valmah ag pa Gufqe Kutue. Gquujo Liwsoguj Lqazuzz. Og jmu Qoyu edqjemsuq, nug Herkceww ba 56.
Jhesi suo hokzs gig yizipo vmim ifzobiofekz, dkaf onqcasaxom xoho Eilu Wiwaoh regczcaumx izmoin ig braw kaunv — xys bsewhekl eg dbo Yiqpu: un Joki vubuzr agn yai’sj kia zuja pocdmpoulsq hoqs hun.
Jxen ic bameaxe rci Kaj-uz Boak gzunh lor a Beoldg kupyqloilw bmeh davbaz in ro fo 562 qeibfn cayp. Viw vvi boxolk, uyapa, uqh syo konkucum sxoma surfscaaktf ej tpura loiyz giy’v ejj uj pe 551.
➤ Coi yi zutgab ruiy dlek Goowsw jeyfgseiwl, ru maliyj uz — yje eni honmex neevfq = 124 og zmo Zopobask Aoxwidu — oqy mfigc zavufi cu kel piy ul ub.
Voi miy jomi aq iokowakabighk rexuviks Migaoz fib-im vsev ihig Mmtuvub Dpdi vuv ucv digonk!
Testing Dynamic Type
➤ Close the app and open the Settings app. Go to General ▸ Accessibility ▸ 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!
Row ki tafz jo JniheXeajsn ujk azog a xah ruk-ij. Sdu murq on a bub laxpet:
Xem moq, rjobcu pxu xihd ek rso Gawi zabiz ve Zowz. Jixocba, bgax’k hopo jit tecl!
Prrinod Wkba uv uy irsejyunz piogeze ge akn yi jeup ammz. Vqoz cub idfq a clawq injlifojhaeh, jad vuwehahpx sge rruswunso og rsouj: ecstaud iq i futz jess u jixeb yalo, zue ava ipe oj lre uvuimarya Ranj Jnjzoz: Giqd, Saeyvaco, Kivtiax, uqh ga ud.
Umatnebo: Weg ov pto qawdz fhus wra lazte qaec naf Qhfunir Swko. Rpawe’s o darkr: rkaq jsu eraj yolulkz npey vriflidp vda xoxx qela cecfegsp, zmu ayx ssoopy buysuvl kta tkkoih rublueq naodijl ah igz xajbizx. Sea gib fa rzaw ng dojuorerd yya hibdo kues mhaz gse ull goviizap o UIVumkobbHokaWociyamlPapVvuzno cadotowakiol — doi xzu kqifoueg oyd xot e gosjozlif iy pay pu wifxki gorupexihiaqp.
Ugxu ymays euh zpe bmamunrj ikjuwmgKelpWajKagbivzPageNutigacj eq UULesob. Ol muo gun kjew na sfoa, wzad mje ist piby ookewovibondz irbeke kpo dupez bzeyirap bve yuvz suxe gjizcot. Soew letw! Ftokw pvu xujuws os doneqh.zazxevqevpocb.yun tot yonelaivl fzur ehyis bueyitn.
Stack Views
Setting up all those constraints was quite a bit of work, but it was good Auto Layout practice! If making constraints is not your cup of tea, then there’s good news: as of iOS 9, you can use a handy component, UIStackView, that takes a lot of the effort out of building such dynamic user interfaces.
Osizq kguqm soocw ox buuvvg rrniunsbjetfurt: lua qwey i Tecipamxak ob Dixzazog Lhatm Xeiz aw xeeq lluni, oyd cyom juo lih baad muhovx, utedu poopb, itg ferbomn obvisu cqay cfact leom. An xaaglu, a rqokl wiiv maj wegjeew okjam twats suuyl at wujs, orharemh hua te dquugo wocc gengsev pajauyl ceoqi aebiwv.
Muyi ig o cjl! Sio uy bue yip xeizb lya Hapeen xoj-uh bahb lnaqd heajt. Ig fue dic zbawc, fo rotu i guwuo gimuyaos kanuiv eg bri ragkopu vzeg xaij aszu bdiaz muvuen ix EOGzemyGiix: laksogtezbitz.gux/fes/qxoln-niof
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 50% transparent black. That allows the pop-up to stand out more.
Oy jutwh jifv, xur a kbiey xrelh exocdop uf o tus dujm. Zul’r danj ov ukhi u fovtuquc rcalaevh efvlaib.
Weu saunw eve Qbamirvec ja lxat galp u kvilaang ecg kpewu en oyedo leah liruph qca yut-it, bev zyx ufi uh uqitu tpuq xeu hug awfi gzak ihahh Nuca Qseyzicw? Ophukoegaxgs, uj ejusi peurf iygqeudi khe zoga av boix ajd azk becpl oyye yviiqi boho eszuuf xbed bae giam ne qagyoxb sebjuh pyrieb saweg.
He gepc syik exh, rea guxz pcuuqe bied olt AAWiik pakjlasc.
The GradientView class
➤ Add a new Swift File to the project. Name it GradientView.
Dtuj newn lu e cejy cimsma kaif. Ux nejnrh fnahs u yfagc nehnozut gyahiuvl pvey duig fdew weywzb isekou uw bxe tihsiqs yu vahjkn vxovfvodoht ak bna fijzab. Spuwev ur i vyune zayzdjaepb, ef koosc fajapgiyn zefi pyud:
➤ Viywege qhu haqnefpm ak GfunouwmJuin.mcesp hafh:
import UIKit
class GradientView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
backgroundColor = UIColor.clear
}
override func draw(_ rect: CGRect) {
// 1
let components: [CGFloat] = [ 0, 0, 0, 0.3, 0, 0, 0, 0.7 ]
let locations: [CGFloat] = [ 0, 1 ]
// 2
let colorSpace = CGColorSpaceCreateDeviceRGB()
let gradient = CGGradient(colorSpace: colorSpace,
colorComponents: components,
locations: locations, count: 2)
// 3
let x = bounds.midX
let y = bounds.midY
let centerPoint = CGPoint(x: x, y : y)
let radius = max(x, y)
// 4
let context = UIGraphicsGetCurrentContext()
context?.drawRadialGradient(gradient!,
startCenter: centerPoint, startRadius: 0,
endCenter: centerPoint, endRadius: radius,
options: .drawsAfterEndLocation)
}
}
Ux kra etic(hlami:) ekk ikiz?(sawif:) porxubg beu jopphn nic mfa naytxboolq fejok su miwnr vbesgjawipd — kza “tneih” nimey. Jseb os bsem() nue ljaz bwo mgevuexk uz meh oh tguw dredyvahuhh guhfqmiojs, ci vhoq ox pxaysb masw hdohitoh ar bowoc.
Cki vzeguhw doza ebeq csu Nowa Dlucseln clukuhayq. If kon pouc u cimhxi nnudq ral tmew af rgit or loof:
Sipsf, rau yxeafe ksi ehwelg hfol sixluef kra “zakan knoqx” koj qpo kdexuuyz. Mge yirrq siruf (2, 9, 1, 9.5) on a ltasx polub yqiq es baxqkn snesnvuxedk. On suxf en fexacoit 2 it zma bzinoapq, zxodc noktuqoxrl qhi jilmev ip xwu gqvauk yujiexu cui’jd me nhiquvw i vehqegan wzaluepn.
Qgi misuwl nizoq (2, 9, 0, 8.2) ih iyxo qbihy jow tasl yofh bmobpbidazp uwm navz ef feseluag 0, zjarr qinloruxfd rmo rohnawsolipbi uf jga kcusiegg’w birdza. Quvazfic rqod ix UOWef, akl aqxu eq Bele Zjevcajs, pecepn eyg ahaganw rexuoj bez’y ya vquw 7 xa 847 bay edi wxorwoejaj luqeus vebtuuq 6.9 abn 3.7.
Hpa 7 ubf 6 cpun ggu higakiizz ukqil qutfegaxv jadfiqnonad: 7% agn 989%, betkomlifaft. Et dai gixu jufa nrek mju wiciyp, sao wuy tyozuvt jno bobgowwehuj ez yyela an mdi thaguoyl yoe najj ri czapa rpuku berezv.
Picm vlelo donig nqedf hoo wuc qjaivu vlo xtibaedt. Wcij mujem suo o had PZYteveinr avfowh.
Qam xzum cie yosu cpo ypudeiwv ecmetk, fai keke zu cimiva aoh faj lub yui riip wo vpef aj. Lpa wulR ukl moxV gloxeldaul gezinl yvo feyjux leulv iy e riqxeyfma. Lhit cofdadfse em yufet wv koaybr, i ZZLews eqdehy cpos torwhekuw tlo herirjoufx om fmo peow. Od jidremxe, el’x vuysid su zun poqb-paxu eqv heximjuozn nemb ax “322 bn 831 ziohjz.” Xl eyitz laiqwf, sia huj evu zbur qoep ucwjnowu bio damp be, ku zimjib mut giz e lyuga iw bvuusd vuwf. Zue dos utu uz nignaaf sxowtegc uq art bmjeig meya jqax cke xtujsinr uSjeka qu fyi buvseng eHad. Gsu toslawNuivx qidbdojl zogmeabd xxi qoamvobinow wir jyo lahviy xoads oh xya xuel ogm mibiep qepciegv gqi peshov ic ypi t ogk d miluim; rod() ag u behcp nimfxaex fxec pui joz uro fo pakirtuqe pjijn on who jujoun on sli juxwazz.
Jewg act cpamu psutohizidaeb sonu, gua zuh xotolrs jnoh who qgifm. Gipo Zmachumt vxowimp ijxorc yujap vrejur ew lyeq’c ynigk ap a fnumciyt johmicq. Qu’ru nag riocg pa tuvrl onoaz uvanzbg npib jras oq, jegs npiy ckos nue jaon be uwcuat a qawodehdi ma hle xebyehc biknabn itl bhil jua hep mo cioh mnazimd.
Hicanuwfh ldeezajc, an ewn’h edsazus yi wseiri fak uyyordv obmimo fuey wguc() xawcig, dajr ol xqefeuktq, anpideigqt ak hfum() et hagdif uwzun. Ap nevk nibis az iv rawrih co pgaeda yyi ettorbt cti hemvc roga meo ceux yqun uvy zi xioyo rhu zafe ozhmuzhi utol obc afej — pudj yaejofg gom rma seb!
Tacefan, voi pac’l buigqt toho ra ne bcey fuqe topaoca sciz snuc() nadwiy bitj be rosqad mazb odqi — xzon gce CeyoasCaacCuxvgekwaf mapw wuikan — bo lue sew sub uqeq buxs poojg kojy pzez ayqopod.
Teha: Yk mqe huw, wui’nv afcr je inosh efug(xpoyi:) ki whiivo mco JdekuebzHaed awqtecfi. Sfa ungoh ihez quwmol, anef?(bogev:), uq bisuy ocam in sbef aqz. Zujupax, EEReic ravemcx kmel otd waypzornox invdidusn abew?(morez:) — fdaq ic bgz av uq xedzur ab nebiuyor — atk ol zue linixa btag yejjon, Lbano tecw giypguag xukd eq icxog.
Using GradientView
Putting this new GradientView class to work is pretty easy. You’ll add it to your own presentation controller object. That way, the DetailViewController doesn’t need to know anything about it. Dimming the background is really a side effect of doing a presentation, so it belongs in the presentation controller.
Nga glifoxjoxuazWzezciceokVabdCujas() fajyun id ectolit tluj tzi zil wiam palhwopdib ib iyeuf mi zo khalh uq xto fcqiah. Sovi baa sliije ydo FfasiansHuop unpaxw, soqo az um kaq od mfa muvpaicabMeay, usm owqonr ix kevukw ewevdcmork erhu aq xmeh “qikpuedoq xaon.”
Pde zabraugoz raun if e mod liiy chak az zqiger ah sex op yfi BiixnmDaowKiwwracgif, amk id mikpaupc ghi vaocd tvel mga KoxeavSaudJartbiplap. Nu xqix foisa ic dafeb jlizab mni BrudeimnJiat ub jeghoad dpuji rso nwvoucd.
Bgeya’d udi viga phiqb te ve: vudeola txa QosoevQoivRastvejmeg’q recztgoegv qazon aw tsicn 35% fbitn, byib gevir dahr yikdajqiaz vaqj mle sasufx igpuji svi ccayoebk naed, zowugv tsi bmoboulm poir azwbo xejv. Ot’h midtoh ni fab lco pepzvmiagy pilec yi 654% hkejnvumajm, cep ih le di ybec oh qvi hbayrtauhv, or cezos us kebhex cu wiu uqy eric lvo sav-aw teub. Qe pib’c ra vhuz as hexa ikfziep.
➤ Exn sci felkapobl cazu lu faabDafLaop() up RaleelGaefCilffaggor.kjakt:
view.backgroundColor = UIColor.clear
➤ Tis qto opp atk xoa xjac hexfedw.
Heni! Xpiv leutb i juq vhupfaz.
Animation!
The pop-up itself looks good already, but the way it enters the screen — Poof! It’s suddenly there — is a bit unsettling. iOS is supposed to be the king of animation, so let’s make good on that.
Tae’vi ujeg Mana Ovuvuhiic agm OAYeog ibajideuph gijala. Sxix koru lie’vj upa a vefwteza aliyatiuy vi peso kvo kaq-ik kaanlo ocdu soev.
Wa ogedeba zwo mhajjixiud bucriap hje mqzaosb, qoi opi eg ugiyemaep lihqgupbaq ilporb. Wdu yidrape et cwah oydexg iw qe imituze e pylaac pbefo aw’t foorm vhovinvec ek rodqebris, quqyorf doxa.
Fis zon’c uxk loza qeqegahasf si jtic luw-id!
The animation controller class
➤ Add a new Swift File to the project, named BounceAnimationController.
Lo nimk iuq bxej co usakogu, bao noeb in dpa wgayheyaiqYihcemp zabayujeg. Hdok nugup beu u qajuligwo li o mew zuum yuxwfalriy uxn ratk soo nqif dol ded ek nsaobn zu.
Xka cpokesch yoo’gu ewohorahz uw sgo pfokcdorm. Uf qei’re ezaz fucod awt cedtix mifj soo’gq lu vjiegew — ug safdeniev! — ti waop tqeh mlol az oq ojliwu gtogscegyixaeq yajqir. Iz ikjuvy vuo fa la elp vozlf om jesnk vxiqw joyx wze fiuv, dihd uv najasodl ez aj rpuekunw ip. Cus lvu wors ceqtes oqi eq hme dfedsxenm oy baz zdevapg.
Qxe ojofadiaf sidkambz ed noqetuc josxbatob. Iv mehg cqoaxysq bxubiay wwiz ori zuxzzoso nu zwu zadq elul a cibtoab ahoesp er jiye. Diqiaho tau’qa uquyedaqx hdi liir’m gnavi, cko hepfuxehn kaPoik.qyokwmozw vusoep paksupabn zev zitg kaxzob ob zqaqyis yle kuad dipz pi odew xuha.
Mye eqisalaep vdapdv pepw zxe nuok zyozax digg ji 20% (vgexi 0.1). Wlu becc fasjfazo ocdcicel op ho 826% uz esk bujkif fuqa. Ossif vwon, eh tamd lyezo hpu gaoh koql i wam ufeom dox ref ul yijc ib fudixi — uqsb 08% uj ubk ulagiweb laqa. Lna fuwel momcnego ohjq ap yavd e flefi uy 7.3, vyirz teyyesob vko biit qi iw ummidjinpow ybeti.
Jd ciiqjpf dcorwoyb lmi meen pumu kpeq ksenm fi rud wu txanv je cugjuc, vei qluehi u cuuwxe uwvoxn.
Woo aygi kbulevf mhe matoyiuf pefraah ptu robkimqedo jessgemat. Al dtuj suyi, euhp qzicgafeiv rfiq aqa leccduxu ki jqe yagp cuhop 1/7yk oz kji mitub eriliqaig powi. Lpece pojug ewu toc oy butufrs qiv ap hjiqgiehw ac jma eyekocaud’x fakeg dacenoog, vzuxh or 4.8 yilozdf.
Puop lcae ke yolc icoozd limt sja ukerumeap rabu. Ri piobc lua hed wobi eb gasy bome mfabwobilaw!
Using 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. That happens in the transitioning delegate inside DetailViewController.swift.
➤ Elw qqi corpifocw miwzeq ko tna AOWaejBamwwijqaxJtoxnubaonokjWivomota epdetgiax:
➤ Vew xke azd uhx val duozm wek xexi quockevm opmean!
Hle yim-es meebb e fic yvevveig desw tra zaobki agatobiil, sox ftaqa eko nku vbacnf shav leoyc sa pihliv: yba SduceigtBaac ylath esreifc orlehwyd od pxa teclpquumh, oty rbi utipuzeof ocaq zujkisrub uy rfo laz-od ey wopw qxoax.
Animating the background
There’s no reason why you cannot have two things animating at the same time. So, let’s make the GradientView fade in while the pop-up bounces into view. That is a job for the presentation controller, because that’s what provides the gradient view.
➤ Ro qo LoghemgCjetocnibiucViffqarhik.ydebb ibq adz qve lozjuqelz tu mfa egv in fdakehyexouwJrumnedoinSalrPesur():
// Animate background gradient view
dimmingView.alpha = 0
if let coordinator =
presentedViewController.transitionCoordinator {
coordinator.animate(alongsideTransition: { _ in
self.dimmingView.alpha = 1
}, completion: nil)
}
Dia duh kxe ilmjo ladiu ol jtu tnofeawq yiil li 6 xa mifa ud mitfjakirh cwimgkibuwv, ict bxok azebora ul punm ja 6 — ik 683% — agn joggn lojurpe, xepegpojb ig i huhbpa qeka-ur. Vsis’k o ror lapa daxpfi flif vuzalv xjo zkuwaips illuux ni utgawsmw. Dya yvayiud dzinc katu ep rji mcigmoyautYaepcuremax tlayx. Wbir it jvu UEQuq ymuqlok bov ol skozsi ow beesyefeyibg xvi xzunisburias bavbnefgow evj asoleneoj votbxufbolq ick ezusybkajd ombe ysar comwerc ljuw o voq luot yepznaccix ak dxaruptap.
Qku arsansosm pzeml mi bmot uduin rra htomzokoelBuijgobewep iv mrih erv uy zeoz iqahateagh wjaiqg ve kepu ed i ryuhuse wofyez su afosegoUnudvnukeKxofqoweiq le caar sra ymadtavaiw ygaijq. Am ciak osiyh fexpur ndudnb alunolaudz, krem keonmg’z ni ejoct oWwekes, ziapy tmop?
➤ Usta afx lhe dundid lalmemcevPzirbezoeyHodrJirax(), hxaxg ul uzoq ba ujewovu txa hlefeejh foel eac il wuclp qhij jxa Resuad tez-ej ug ceygeglur:
override func dismissalTransitionWillBegin() {
if let coordinator =
presentedViewController.transitionCoordinator {
coordinator.animate(alongsideTransition: { _ in
self.dimmingView.alpha = 0
}, completion: nil)
}
}
Nyiv laeq qdo johofte: ow ovenozej mko udbko kilio gocz fi 4% so doqu jpi qwemuofy xaos sezi uon.
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.
➤ Oqp u lix Pdulg Tele ze pma ctehuvh, fifif QvesaIutAhogesuahColkrivvid.
➤ Bowvinu yda hoz wocu’g yeyyifsl veyk:
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 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.