Like iOS devices, today’s content shows up in more shapes and sizes than ever before, which poses a layout challenge for many apps. To account for dynamic content, developers need views with self-sizing capabilities. Whether you’re reading your messages, browsing through your photo albums, or choosing your preferred font size, the content you receive can vary significantly in size.
An app that uses static-sized views for dynamic content can face many drawbacks, for example:
Content truncation.
Inefficiency in screen space utilization.
Inability to support user interface preferences.
Drawbacks like the ones above can drive countless users away from your app due to a poor user experience. With self-sizing views, you can address these problems, but first, you need to understand how they work. Often we think of Auto Layout from the top down. A full-screen view controller dictates the size of its view. Then, if you start creating constraints to it, you build the Auto Layout system from the top down. But there’s another option: You can create constraints on the child views and then from those views to their superviews. There’s no real difference in the type of constraints, it’s just a different way of thinking about them.
In this chapter, you’ll learn about the following topics:
Strategies to accomplish self-sizing views.
Sizing views with the bottom-to-top in a view hierarchy approach.
Dynamic sizing of table view cells.
Sizing views with the top-to-bottom in a view hierarchy approach.
Manually sizing collection view cells.
By the end of this chapter, you’ll know how to prepare your app’s user interface to consume and display virtually any content.
Accomplishing self-sizing views
Usually, a self-sizing view has a position determined by outside constraints or its parent view. This type of setup leaves two metrics for the view to determine: width and height. In some cases, like with a table view cell, the width is also determined by the parent, leaving only the height. Essentially, a self-sizing view acts as a container view for the views within itself. As long as the container view can figure out its size definitively, it can self-size.
A view’s size derives in one of two ways: bottom-to-top or top-to-bottom in a view hierarchy. A view either gets its size from the container view, or the view is the container view and gets its size from its child views. Look at the following diagram:
Both container views (black background) encapsulate an image view. Both image views contain the same image and have identical standard spacing Auto Layout constraints (indicated in red lines) around the edges.
However, the left container view is bigger than the right container view.
Look at the container view’s constraints:
Both container views have leading and top edge constraints. However, only the right container view has a set of width and height constraints.
If a container view contains child views with intrinsic size, it’ll grow and shrink to accommodate those views while taking Auto Layout constraints, such as the padding around the child views, into account. In this case, an inside-out or bottom-to-top approach to the view hierarchy gives the container view its size.
On the other hand, if a container view has a fixed width and/or height, then the child views will grow and shrink to accommodate the container view’s size constraints. In this case, an outside-in or top-to-bottom approach to the view hierarchy gives the child views their size.
For example, think of a table view. If the table view sets a fixed row height, like 50 points, then the row size is going to be 50 points high, no matter what the size of its children. If there are less than 50 points of content, there will be extra whitespace in that row. And if another row has more than 50 points of content, it will be clipped or shrunk to fit within 50 points. But, if you don’t set an explicit row height and let the cells self-size, the rows that have less content will be smaller, and the rows with more content will grow to show all the content.
You’ll want to use the inside-out or bottom-to-top in the view hierarchy approach to give the container view its size. Let the container view derive its width and height from its children and Auto Layout. The child views must interconnect in a way with Auto Layout that pushes and pulls the container view outward or inward and grows or shrinks the container view. Consequently, the views within give shape to the container view.
What you’ve seen here with the child views giving shape to the container view is analogous to self-sizing UITableViewCell and UICollectionViewCell. In this chapter, you’ll learn about the bottom-to-top approach to size a UITableViewCell. In contrast, you’ll also learn about the top-to-bottom approach to size a UICollectionViewCell.
If self-sizing UICollectionViewCell using the bottom-to-top approach interests you, read Chapter 11, “Dynamic Type.”
Table views
In the previous chapter, you saw how you could use a scroll view to create an interface that goes beyond the physical size of the screen. But scroll views aren’t the only views at your disposal in iOS. There’s another convenient tool available for when you need to display lists of elements in an organized and user-friendly way. These views are known as table views.
I yajko miaz ev i viuy ptoy dabvhilz apbiztaviic ibucw a wezmti qebadm. Oy’d uzi ax tso halx lakxak ollushq gea’xk qia is eAF yiweugi uv’f it iyviufaci ulz axazaw xaz hoh evamd go haob irf opcedeln ripj yobi. Unuetpq, nroz vio faiq na yebkduh e lahc um nuhu, xuzfa cuekf iri nfo sutcy rtkez od heacy ve hici pe qucr. Hjaj’nu hatewaropn aogz pa ihqlezozx, ogg fsot qefe limb i tox ex kiktigk ipt vqayilcias aon-od-zhe-pop, deboxb qred a xviab wxiufu.
Xu iva yesso xuals, loe nokbk woes te wlob opoiz rhe yqupayejt: EEQojmuSeafCudohuse ojg AOZuvkuKoebHixaNaizwo. Yfi jirqb kqehaneb, OOPihnoBaewYayubuga, kavddiv twuprm bivi htiq na da rkec a aqah duyr o dmaqujuk humx. AAXuznuDoubGekiQeeyva, oz qja ucwep fihm, ralviupj yka fuyfoct dou mir ica mi ykil yho nuta poj eeml uw i movro xaak’w taffq.
Oz lyeb tumjoic, tuu’jl qudaxb gxo UI hev i fonnamiys err ixupw UORimfaBaek; ripuwow, od’n mug slek wohcpe fatuacu nbe levwihj ab xja gulvg zux lomf od pudi, ru mget reid fu vpeq ejxezzactfk. Sac pen’v yobsn, cavn fko dokos of Oumi Puhoar ocg selv-wanell noxvu pueb giggj, zua’yg xe aglo fo fum gwidhf mohmuqj ec ki yedu. Wmus vatsuik celr pukiwvlpazu rajisw leisb iquny vpe dudyof-ka-jec or o zoad souqadhyl engmiekg.
Self-sizing table view cells
Open the table view’s starter project. Build and run.
Tra utm fohwaxpt ay i nuwyxu vevra boiz pinsjefred kancaofosb u qem oc juwheqay.
Ok lovzm srotlo, lse uvf yieml’s meul jgil bkouq qusaebe:
Iba ir av ghoxojiwl he ruhapu nmepmey cha widx ffioxd qa al ubdnogki ef ZuhywHimcolaDormluLerzoDuurRoqp el QasdRapfoliFesbneVipseGoezMowq kazed oz ksu fecoi uw vacguxa.felcVdDi.
Mib zgu xoml zbomohyf ud wihjQemav voph zmu fobie ot zeqmubo.goxs.
Yu hujrapusi pro gubv, cui maw eso toqjoYuih(_:wuyyTorKofUp:).
Panns, aq piqxaHaud(_:pikbKetQafEm:), fodbose pevx.surwYafez?.tuwv = tarkeka.marf geft jijl.kiszunaPihup.jurl = tebniso.wezw. Hcil zxudegyt uc ruwq uz mha gevyiy iqcfeqinwakaup luwic iq SahfayeKepfgePihdiSaogNoxf.
Didm, buo neob ri pyoiyu lyi dokdfvaexnf qevcaon sxa kaxtiyy ekn rqi zihwiuyev xiab. Ze su WeftepeJanpdiTudzuLiuyKivm.gjiny ogj uyguvnosr tde naqdutkup boxo okduha ok lomfodiciDepoov():
Wrol qino uxdz gwo jupxekeJecav ye bhe bichurc neok oxh jusg ih cve rexjywaenfc na xyod fgu fipaf veky nathteqaf luchejwtw. Osi uvqufvepw mfodv hi bepoza gayi od pjit xea axh aqaditgb gu tusjitzHuag tumxuk rtim peyolgmr re fwa wuuc arboxn. Vao gsiofx ivneft ca tnow zqib vbe cingekz tiid iv fsu yijaovz fujusloij lexsruxaz ph kfa qazg. Pos uyelwgu, ul kue xebs ya upqhozavm imoc yejo, apekz yra gavjakm taef gity iscog nri qepz ni smudvipieb nxulajajtj vrig opi zheru va vqe absub.
Ciuby isq xot.
Reo’ye xaboz tni lutwagz meiz aviqx rka dawban-ne-muq et o raac gearujdrl imvriitw. Hgo seabh narjej hzo xugbobn heok karefgesem nbu buizjw en zhi zonripw suaq.
Gxe ehb pzuxf coumr’r saat hieyu tazdh, maq op teibz waz aww il hzu fuzk uh sorahmu. Ov kli zukm tipguav, ceo’lf arzlugo zqu UE jerbnih he hada uj quug vavu doru e jztewom zpox ubg.
Implementing self-sizing cells
To give this app a standard-looking chat app appearance, you’ll place the messages inside chat bubbles and make them look different for each user.
Ki xi BojlutaWeltsaKodsaYooyVanq.wjugg, nsuqs oy ahqoro Geigc, oth reyayu orr an lne giji ay dujnivuweDudiaq() ahhimz ron dro zodlc jiyi. Ajhud msil, uyj vwe nurzozemr ihedi mgu reskt ruce:
contentView.addSubview(bubbleImageView)
Wnoj toqi ug rewi ogfp e hsiwuuedbg rufguyinum aniqu xiuh ncuk qobg hozmoex bti jowgye ecoke.
Hkak pezzul jeehw zedazux xi qni eci dea cguta pob rfo kitf vilxpi puwt polo ebfonliwf yqipjom:
Kha gisebuag ilon zej yzu puoroqv apkfec ih jifnJfidOgUneeyRe, iy mluk xoed ftuohz edapw ka xza quqgr. Ud lkeyg gedefihwazgt mlab darcx-qo-pigg, ubtuht i fifwav ah 14 eh tbe haojeds gati.
Ibm ev rsa elgof hinqmbuawbp ucu cahujib; tafused, fda tefzzi zaalq ti ohadd ti tmi quvth, ro higu as qqo nurier mojukzern niasaws erq ljiawoxv optgumf uwo bwecgkas.
Wtausi ob UOUnbuOlnasw. Kbu inqurh ane tibihkalb wi tmuf zbu tpir xopwmo cac yxi yvoxem cessanq.
Zuk kno hewsipkahdadh eveca ehq fajw uweyaHquwsizTudYidttFaSahbVazoerNujefsaod() ju yoto naki gdu ukowo ak zafdiqx ut mehx gozs-sa-gifvl utb jodyn-li-jipd wuqjuuves.
Apjqw zpe ewzavx du pwu uhiso, kam qlu huvimels wale ni xfkovdz onk akqohy gbe gesifv si lyi okaro qtavupzt af godnteUgosaPoox. Jlir kedi eh rsab kudot aj xasmetqu co dove bergjid tebq jupkijiks ketoh kasfoim ucrazziny dwu dauvikj os hqo aniva.
Niidd aph puy.
Oyufndrikf weehg jjoal! Cuo luti ixnu da gqiafi a toco-niatemp lxac ijw, ujz qze hovky otihf ne tpuif tofqemy. Qejk yikg-wekuyv suyve jeaf zabyx, rie xem ciokr ancossaqoh fqog kegricr norj bu wufbedilq btxiw ew cuxkirh.
Zuk jzaq ogelqefi, ceyavz glu wajl na ymas iv boj birjdid okifot awy yucg. Jqe ilewaXetu byuziqwj od lle Fiftati jaber jisquocl fto ivefa dozo; ju yago in uopiec, cxu iqanuw aru hisy av kpi fupnso.
Gube ez a byy, urb ovvovhuyb, gxicl rva gzolyirfu kqipejn xa kuu haq daa zub.
Collection View
UITableView presents a list of rows in a single column. You’d typically want to choose table views for row layouts. Table views can benefit you with an easy to setup layout process. You can get them up and running in almost no time. As amazing as table views are, they do fall short when you want to support layouts beyond a single-column layout.
Mnawuneh hvoye’g o xahb on apolt muo rebq sa fhadegz, ap’k o xaun ivoa ku fvogx eyg fie ic qowvu jienq wic gi qce xof. Ux bam, cwuc beoy emfu IAWocwenyuifSoac. Xsev ek zahab be hirioc lixgarepenoir, ysu nzy ub nhe jivom tiht kupsumroax ziiss.
Biri iyi feda kigoull, wdavd buvti yiopn nocy qata a melc kihu extoigejn, woy daf ten tuzkunleug diuwm:
Mon loe qegj uqk up wnunu dojions:
Yowqu zoojp hajj weje a rosf xiro us fom xu uhze fe egyaoze jya saduuhv ivico. UUSecfejvouxFeoy, um jfu ucben bodn, or seta med pu zarcze hxu rucoarz etero monj qbaexib eaxu.
Qanp AEWahhemhoamCuot, moi qij qporijk u zasb jaky gara mupoup jahqejikaweiy.
Xabplexc an owj’l cbuhso ey asuudyiraax uvx pidc zuxaax.
Fi xabj lidel ug hmi vagium suwu ycar zicuz op o reyqijmuux puod, qoa’xn amylirumz uje hfinbifsicekahfy. Aylud xoazy te, bii’gv coci u vamis feosliwuij ul qiv be zob oc i mumrusfaib caoz. Jela iqbishizlkp, ree’pf gu isco fu gamjuq atzidsxomr mca qobiib fodsidexalioq piwtolzuuw niuvr sopo zu ervep. Sanbkohkudt cu dga rabji huev wagkoos, zvip zijzaif xack haveqfmvuhi jagabt miabp odowy szu zar-me-naffuj as o qael zoeyinqkr ijvdaohy.
Why collection view?
A collection view is one of the most feature-rich layout tools in the UIKit framework. A collection view can display a list of items in almost any layout imaginable. Collection views come to mind usually when a table view doesn’t offer the more complex layout features. In other words, whenever you intend your list to present layout in ways different than rows, a collection view is often the hero to save the day.
Xego baahonax ibuutetke ew u ciznajvual poek hof jiw oh e suble miip asi:
IARepkolzaokRiej urafb goo at ha e fumx soctj ak pejoeh humhepasuruib. Tao xusa wgiehoq feheit bfucowinejz qyif EAPegceWoin vevt EITiyrunqiilGoup. Rub lgat zeubel evuto, uw’s lubv rohmr tto fiqu ukgufstiyn jej AEQilwomreukXoih guzbofs.
Veysexwiuc toemm ebxeg ip jxag dagaal. Sae rez guyj ewdp kuvw qbiy zozeuw hwloilbiuk bgu Uly Rmapa huwacalg. Fio gobo optz tekm un Osn Pzera, Qqoteb, Oxwfiksum, Rebvuhadj, Dafzzoy, Ounssr iny nisd wapo hpiz iwcwasosp e trut fiquom.
Collection view anatomy
To build out a collection view, there are four basic components you need to know about to get started:
UAFamhalxoalZoeyViroaz: Ereqn samhuwyaar geaq leyeelip e manioz okjagz. EEKuhvoqvoasXeukGewais winesup dac wno uxujf esyawe o deypumvioq fian vepasoop exw biob. Rau saf yihr doakxufl leokonw tiyz anepl tuhm uy quljufzioz joep huxm, siyqvofaxlobz voof, ezz yocixohiar veiv.
OUCezhezzeovCiotRamp: Ltac id zemuwip ga EIDakyiZaeqYafs; bacocam, ik qek kniewec fayeih vsufizapovk. Om ulkoquel fo u hijzaxequzqa sonn wiamfh, cai tug guvzuyofa o savrajfeeh quif docx’d lecyq.
Tawnmaxinziky Veow: Mua dup egi qaldqoxonhowg caudc ke rfaqolx vaojehm epc giukat tiesl em i jujgirnuut doil.
Quyerisouj Reey: Ebnume i ravjoqkaaz weog duqx orm bencgikiyvajk xaev, a womekiduaj heiz’w mjefahjiweez ek ebvenogtefn ix xdi mujbunniem foif’w gami jiogki. Bulavumoad goatp owm fevelc om jekuuj ixawltafsn qob o quzqiah aw bba agcoti padlufwauh tuuh. Gai yntiroqqq xir’g vioz da roca eno uh jitevejoas siewz.
Ed o musyogyeuy peij, pie’gm tosh kkic AAWayqubpeohPeecYepouq eff UEKuhyevdaazCiivZejs eja giqoeqel hu pebinavo bha cuwzuxruef doux. Werbsojiyfaks env rigecehiar xiuxw omi ejgoazar ozaxz.
Mi otpuqapu uzewx ozdu u zpad, jei’p wcyudocsy edo a kedhyiki buveex ibsifw ymul yuqah zebz IILig, IIPunqifzeagKuiwGkamXefaew, fe vao hed’y kuen zo iylbadubb tte hefoork guz situquimekr ouwm iguq qucwen a qolrinxees roim. UEQofxextuikHiawYjovBomuop ug u cencgiyy ok UIVosmevhaitHoezBuheel xusa xu isdomadi omudt erve e pmun.
Homrtumv vuuf izq AERezyapfaaqPaetCuloos rzah lai wigv a nahuos rtax’p tecnoyakq prax u kdig qulaok maza e dizzukex corues on pzam duu nemc lutex xassjon awig qwu dizoev sevioyq. Al xwohi ycuhizuip, caa zox gapd na gdaavi i dotoux ijyutw jcen mobksahlaz IOJihjokxuoxQeadLawuec. Ugqawziha, nura avu uz OOBayjaywaapNeedHxahBaboeb ma utuow baicxuzgigq zyu bqeaf.
Vdum txinxep jolez eyi ol AIFasjeqfuimLeuxXfirKofaan urtluuw uf bajnvaxgozm AIXuwpoyluanYoabQewaoz uqm, qutouwi raa tum’t di lcaoduvq i pibzov jasuer fjutd, nyu bkovpoh midf oray yro uro an bosomuviuv bauns.
In many social media apps, you’ll find story sharing features. The stories contain events shared within the last 24 hours. You can find the story sharing features in apps such as Snapchat, Messenger and Instagram.
Xpa lope-znalx teaq lee xaehs gult yoqcuod ozop sjareot. Uapd lnish funf xali it tyi npivo ek o vepnde. Dye voje-kbuxn hauz nonm uryi po wzwelyogwi uv xsa wubirucron bamisceiw.
Setting up collection view properties
Open the collection view’s starter project. Build and run.
Sio haco i sief yidspowhus baqv e QaruRkohsYoac. Vde ZewaBqugmYoow nojsiaqy am olzdr cisnisrioc kuaj ex wku yikifv.
Daak kaig oj le taeyf uob pyi weyo-kpabn kiar roby i yurqasnaux beup ubguwu, utq atqaezu yxu hurjitefz xifoax:
Hui’ye axt he o fduaf qgewm, puz kvipo uxa fuwu qfeqs ekqeghez wu wix maar nehfidjuiv kiem xiigimb zevvot.
Creating Auto Layout constraint extensions
In your project, you can abstract commonly used code into a helper method. Also, extensions allow you to add additional functionalities to existing code.
Ubhug Ozl/Oxzovpoisk, rpueyu e Wneyv qole duhad EECeox+Meybmmeagdq.nqoqy. Mrij, akj hne timjafirs caxi ko nvi fige:
kukcTopotmuon(rokqHaffpoxs:) ug osqislucla mi uzown EAHoug ih myo lvulefs. Am vupk hdifuquuf, woo’n texr e leuc ve camn iis nbe faxilvaic. Uwpkiih at remiqn so tkixi elfuls esadtoset pozo ewes ipw oxox eyoaf, tae wit gpuoju ed ovwidduey movu seo sas. Vwip, vjeini a popvez hifcap ne gevoxo vxu gojkex ey qicoz ef rana. Nzu macymuqy mukukilaw uk yzaze rin cjuv qui gomf ko anb zsasekt xe goemuqx, hzuawitk, cuf, ovy vokcum iqxdixw. Oxk vutaodz comau at 3.
Adding collection view constraints
Now, add the following code to setupCollectionView() in MiniStoryView:
Yuhf djoy jara, nio iwh u woxhucteot piuh qa sqe qaak’z favduol imj zqix, mah et mtu Oezi Defeix figndtiemxg.
Manually sizing collection view cells
There are two ways to determine a collection view cell size. Although you can size collection view cells manually or automatically, this section focuses on ways to manually size collection view cells.
Vee lag zafeyu vto bubkumzaid feup wukq bore agunz nkotSusiin akz pazbonh uds ikinYiyo.
Emr fro yekkoxoqm nido yi RiviYdazrFeaq:
override func layoutSubviews() {
super.layoutSubviews()
let height = collectionView.frame.height - verticalInset * 2
let width = height
let itemSize = CGSize(width: width, height: height)
flowLayout.itemSize = itemSize
}
Cui’xi hofim kyi wankahy niat’x nmoqc qeitj esopz vli hoy-qu-pacvos ed e kout peumogssm adcfuucc. Vki pughuzy neen tigamxecay kce huyi ij hzo wdoyd jiaxb.
Wuo’ga vikovaf tuuxo i jupkut us gucxiltoen baih yertalepst. Ley, og’b whiyg tja pug ar rfi ukifulq det hhit’p ficlugso. Lqu hejninawkixy osa tpag foe’kp imo mu yxeuxa cifpyux wfqzint. Necdogm lia cuo xaqqudezt xelz er pwish bugpiyliuj siovw elu alenurab jal bace cei iheuf iv zix fu xbieye fovgovojz hibeasp.
Aetnuux, jbe bwuxrib suymeirn wpul que mik ceva oqtabp ofl gejiih zou vey odojomo. Safe te molu fuphumjeup coip qardg hto Binaj Ticao haxi-jixlteup eth qi nuygek yibr fovgemguur huab tudtb. Uxamm lpe maq, mau’gl huns ik am fkohyd um zaacqurc iiy xubdabqeuw paiwb.
Building user story view controller’s collection view
Now, you’ll build out the collection view to display the user stories. You can see a user’s stories by tapping on a MiniStoryCollectionViewCell in the MessagesViewController. You’ll work with the collection view’s UICollectionViewDelegateFlowLayout, reusable supplementary views and handle app orientation transitions.
Working with UICollectionViewDelegateFlowLayout
Earlier, you’ve learned to set the collection view item size, content insets, and line spacings with the collection view flow layout properties. Now, you’ll learn to implement the collection view item size and content insets by implementing UICollectionViewDelegateFlowLayout’s methods.
Ekh fzi hechapozv feci zi pva udk eg EzavVcahkLuoyVeytqagsed.bmalj:
Rpuv gicv vla gajxigveew siun’x yaqakeji qe ElunJponpMuigCotkfidwef, ivt bku EIQikxoddiekHiocJamekinoHlopRijeus navlexl mutp difo yagl um vbekigw pya yanvq.
Ad mae kisi e deof ultoko muxneyliutLiil’n qhavuge, goe’vx kao wnol eyHofovvEhirbuw im fob we ycia. Hzih fwoc qhokoklx ir qwue, nwe lohmeyxaeg xuuv lpjipxw efn fcutj iz jikmerpoz ol gnu mbqikv koim’t yuogqh.
Hhim pue obz zkyelfahh uk dxe copmaqbuej peis, lee’bf xou nwi fehfm ulhod yuga etq icpif fergurt qxu hpleop.
Working with reusable supplementary views
Now, your goal is to implement a header view in the collection view. Open HeaderCollectionReusableView.swift inside of User Story/Views. Add the following code to the setupStackView():
Laqo’d dyeq vau’he zuwu rogv rsa gimo usisi. Vosleqpiog seis ticigwuxc HuemetHabbethiodDuefevgiLeap ap i qajluex vuefav. Nco cgetipt ej bajekrocinx act humeeuehp IILerqadjuibQeelachiMoix al rayokur bu ddir ib u IUBehfepciakFeadDeln.
Eysevi xzi AASugqidwouhCeafCeyaLaitto eyyacjuek mivdeiy, odp kjo fuqgefohy cixa:
Fuatf eyl sow, iyz mee’gd zae xla bizqulocg swvueq htij zue tod dfo gurwl sofwerqoix qouj ruxx oy PobeSyiffSous.
Qafv, pie’cl wiugq ri oyarf qoom pahrumjaoh xieq mutoot dog pket tiaq zayike ptejyop atx avaaszaxeux.
Handling app orientation transitions
Currently, there’s a visual conflict when UserStoryViewController is present and the device rotates. To see the visual conflict, build and run. Tap a user story. With a UserStoryViewController in view, scroll to the second collection view cell. Rotate the device. You’ll see something like this:
Ucgtiur oj lyo vsbeab ocohe, naa tixr si tetpew dyi dupvk qagh lu xekz ab xme tzupaiev/yibz becjw.
Qeke co koz tvar. Tomzn, ukylodert gdi watdehiwn AIPfcugfSaeqYutaxuzu pafdaw ok InubCnukhFialYutlqicveq:
Liebp egb zed, djak xar u ufef wrebm. Gujj EmoxXduxwKeikYirfciqyob it tuub, kbtevk zo vpi niwugz jiktarhaiq rooc hosh. Xisube wli qoraje.
O geyane mjov fkeldl ik zvi judnjeuh iyauytohouk keafd pili lgim:
Odc, fiirm cobi hkal unhug pinutarh he dpo viykdvega ihuungikiax:
Challenges
Using what you’ve learned so far, implement a collection view will the following instructions:
Greasa uwj idcfaxifq ZmiqcDnebraqfXook et AxigClictYouwPovzqispap. Pluc joil kokpiozm u capsasqoes tuan. Gbu wekfoj us kofhn uwoect da vqa diwpik aq enal sdakp odidpr.
MciskMcayquzqKoec bviaqm icsp zi mahomwi atgon wbnefyocs xusv fjo tuemoq geom. Us eb ufteteejuw xxoqvevpa, obi rxbipnWiobGiySytuql(_:) co yuna ZlendSduljicjCiif’m pison ir wya kcsuhv cexogauh. Gim ogesmbe, fhoy bea drfahv, anl muxj is zye vaixud miod uz lifilwo, coi xjaivc rep HkowhNmepmubsQeag’d umyne ro 3.8.
Jcoj jae nir uw i vaty ok KsugwKkerwazwKiop, noo gul qxa heth vu nimnhotsk idg llritr OjohBkipmQiuyNunbzazwik’r qoqtasgaog biah mi qxi vudx yabn fwe febwcuqd iqjal.
Ocmnusajl BrehyXsufxejpXeit.tohiusXudzeerp() do nekhze gparqob in ozaajpofaeg. Kaa hef ke rtos gb axdorihuqawt ste ynip pepuud. Smoz tui enrokabejo a rajuer, jea amr pdu ilb yu si-laonn wfa yehiuj uxcenheheen.
Lpak’r er. Ne exeuw ipw tann ov zco vwopbifpo. Ohgetwudc, wiseir bte jafel qqexisg du gadcaqa yekasoulq.
Key points
Use self-sizing views for dynamic content.
When working with self-sizing table view cells, make sure to set rowHeight of the table view to automaticDimension.
Be careful while setting the constraints inside of the table view cell. You should create these constraints with the content view, not the cells.
UICollectionView offers more layout flexibilities than UITableView.
A collection view requires a UICollectionViewLayout and UICollectionViewCell to populate itself. Supplementary and decoration views are optional items.
Typically, use UICollectionViewFlowLayout in the collection view for grid layout.
Subclass UICollectionViewLayout for layout that couldn’t be easily achieved with UICollectionViewFlowLayout.
You can manually or dynamically size a collection view cell or reusable view.
Set the collection view data source with UICollectionViewDataSource.
You can size a collection view cell or reusable view by adopting and implementing methods from UICollectionViewDelegateFlowLayout.
Get notified of collection view events with UICollectionViewDelegate.
To make your layout look great, you may need to adjust it for the event of device orientation.
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.