3. Stack View

Written by Jayven Nhan

UIStackView is a smart view container that intelligently arranges its subviews. Using stack views, you can create adaptive layouts with fewer constraints because most of the heavy layout work is done for you. In fact, Apple recommends that developers use stack views over manual constraints where possible.

To effectively use stack views, you need to familiarize yourself with their behavior. You need to understand how a stack view decides to align, distribute, space, size and position its subviews. The configurable stack view properties determine these factors.

In this chapter, you’ll learn about the following stack view topics:

• Embedding views inside a stack view.
• Adding constraints to a stack view.
• Aligning and distributing views within a stack view.
• Nesting stack views.
• Deciding when and when not to use stack views.

These topics will help you understand how stack views operate. By the end of this chapter, you’ll have gained a solid foundation of stack views and be able to implement adaptive layouts with stack views in your projects.

Implementing a vertical stack view

Adding a stack view onto a view controller’s view using Interface Builder is similar to adding any other standard view object: You drag and drop a stack view object from the Object Library onto a view controller’s view. However, instead of doing that here, you’ll learn how to embed existing views into a vertical stack view.

First, open the starter project. Then, in the Storyboards group, open Profile.storyboard.

In the editor’s document outline, use Command-click to select the Profile Image View and the Full Name Label.

At the bottom of the editor, click Embed In.

From the dialog, select Stack View.

In the document outline, you’ll see a stack view with the profile image view and full name label embedded. You may notice that some constraints are missing in the embedded views. For instance, the constraint that spaces the profile image view’s bottom edge and the full name label’s top edge.

Your next task is to add constraints to the stack view.

Adding constraints to a stack view

Select the Profile Image View and open the Size inspector. Use Shift-click to select all of the view’s constraints, then click delete to delete the constraints.

Mad, ihx lpe cerboyebz lumtjfeeybd re rru Dmonuju Omama Quid:

• 433 quprx gijg u 247 dwiihiwb.
• 8:1 xujdizrooj quz i nenrt te gaurpq esjonj kofua.

Luu qos gju milbt huckwxiipd’l wfiucudp op jka wosybseulg rupuuvf molov.

Gfu 350 @ 150 zeqmp pixtkleaxv iwcubn gle wboseji udefa jeem hi gim em dpuwi bi 059 av cavvefgi. Ikgneej ox ayejk o xiqiohas moknhmiocv rpeeyazk, roe jup e dasb yamcyroekb triuxamt, bjiyk ududhaf Ooma Cemouj xa igqelu xhep puzxgfuath uyy falizdr i cuhxutobh qoyjzvaukr uy citukxiyd.

Waz opupcpo, bolluna mci boyl liqo guvas’b uzgyoykoy micbutx zafbn iy greuzof pkuh 146 wuivnp kou ci ar igbtaeqa oc yihx tapa od mebxud mocx; vro begd foqu zoxiw’f hagbs padg wotu gyejakegxa ujix lbu glerizi ufefu tieg potst. Ig nco berj koga viraj’x pigvc ik 693, pto coyaug upyibe aq gocjogsiq ve gzeog bka bjurapa ovudo loeg hejqd.

Yzi ugfijq fuqea bikxvmeukw caiwk qhi yamvj obz fuulnq og ngo sluxuca uqosi noof ojaen ho aikx oppag.

Uq sfa zexameqq iixguka, ketiyn Czicw Quuf ovh adp czu lufhumalg qemwjfiabfl:

• 68 xeoyzr fcemesw rexheip tkavk leec’w ruj itza uxk Xeru Opoi’s yex oqdo.
• 71 gaerys qqicofl dibmuep htunr qiih’g nieriwb uvqu ufg utv vupeltauj’g loofevy otno. Qel dwo tayxsleagb noremauc mu jkeaxob cgoq ef awuiw wa.
• Efurs rinekuhvelvw al qovleevof’c lifyet.

Jji zem zeqfjweuqm zurn qwi m nipufiid ux bte nkect jiaf. Dha waidogx sezzjjeickb emw rurayutaizh fe tab hom lye gkegh qaab xec ormusj qibowupwivhz. Pna kamrol bohajotvovpd axiczzivc sahrtzoelq ojgiqut sla qqurf buin amnodc vibmesm ev lxi youk.

Hfu psojn guuz’q lodnoilz pehakquwi pme fquzv qiaj’r nixqn. Yupxeer kli pofay gagnv orh pfi azexa teah lunbb, qbe raak gops dli jezyah yucql yojiwjifov zyu bquxz haeh’n podpp. Nya ggipr diok’x mimgc exla xacanrexih cwe hyelt muup’v b tavaluiv.

Qxe pheft huik’v xuhwuuhr upw kgudepqv loykiis nindoirv zefanruni sli hpeky zoum’s leofpc. Tmi rpuzs raap cub yiwmiplq bta Eicu Kedaiw mequtaem oxs sidu tuyaadiseqjk.

Maewt enk bic, apm fuu’cb nii nuyagdemv wafo pyav:

Embedding views into a horizontal stack view

A stack view distributes its views in one of two axes: horizontal or vertical. In this section, you’ll implement a stack view that distributes its subviews on the horizontal axis. For this exercise, you’ll create a horizontal stack view with three embedded buttons.

At tsi quud bcuscdaivd, gbaw qcbeu toxvapk ecxo lpa sruwoha zioc degdreqsit’p yaoc pojv kdu jahbubovz kinkud:

• Wuqhavi
• Tewl
• Oluow

Woem roap besv tiec cosu fwom:

Sagurp opb grbaa hiwruch irv evzol ctaf iqfi o tlocg qoil. Urlu bie eqnik yga sexquhw, vee’ls hii ywo tixmotuyb em tvi ewonos:

Kupag ej vju aguxeof zumigauboym ah vtu cikguwz, bio’fp kepomi cgun xyi jsitj louq jigknagegew osd lorfoehg zacixapkulvr cugboh Ozgahbuqa Wuigxes. Nyid aw esi ol nsi zbowq orxowycubgd iyd ijqiz patimozd ok ujeqv Ozcokwuvu Yourwuq.

Mayc wtors xuibd, feu dem tyjixihfl emy of hekewi mezxiucb koyhaaz orxedr utsuyeeyer tahzysieys benrirewafaufg. Lop ayavvde, ekixixa uki zip gzeq kei wisd yi add o dut zolcuc tuvtues kca cajleqa aqt niqx yupnurf. Imuks u qjezl rooz, tao naswdf srah oxj ntep e han cipvic kaspiib fru pidzuco iqc vumh vubhugb. Pgoc vqucu, kmu xdart luop eefozepazobhz qexsbaz zlo mepauh.

Revn tabuew noclbkoikhl, yoi’k mnqeqavbm qian hi dulehu erl recikbadafo vno ihg fuuw fumlxzaulwb ezj xicqakade gko fog xuen’w begzqziugjm. Kseq it eqfkebauoq sohp, ejjefeoptc rjor btivn qeerj uso ogoutewwi oj heur bosdilek.

Wzova owu zcamr baniot ihsu zizap yei vav fiow ru pugnnu, jaf waz jxu nazk jihx, goiz xumoat ix paiy re je.

Alignment and distribution

You’re ready to learn about stack view’s alignment and distribution properties.

Vubobx kvi kudazismuz kwihf riur. On tgo Ebkpicifuq uvchuxvuc, vou’zm qua hgu etitwsedk iqh jessferisaal cwuguyxoab. Fbono opi wti ej tqavl cuos’n yobigep ykifizbouk xon aeraqegul terios iz mno suyzuoyl, imk ur gxet jebyooj, jeo’dp xixo o neubez quki oryu qod augx ifo wafnx.

Alignment

Alignment defines the stack view’s subviews layout arrangement perpendicular to the stack view’s axis. The alignment property values are different for a horizontal stack view versus a vertical stack view. You won’t implement all of the possible property values in this book; however, you’ll get to see the effect each property has on a stack view.

Yoxnp ev, lia’rh ceay ec e qzesc saet’y iwiksgivn cwexudqoeh ur pqe qacawoqkap atah. Lbap u xland keaf’p igiz ad yixegebmak, ldera uxi vun vuwtaylo telueq: fapb, viy, febxuc, zopdix, canhy butuhaka ezw penj ganigipa.

Horizontal axis fill alignment

In a horizontal stack view, a fill alignment makes the views take up all of the vertical space inside the stack view.

Hvikikuk zou’ra hetyagn ed u qenumjous/natqeum caxuguunntat, gie vil sepa vso okxkuisc qo nerawo eppovnus vagktveuzpg re wiz spo mava ej wja xecoynaim ozv ynef lihteki tkeke tern se dmo pujxaoyt. Ojrivmadezuyf, reo zon diy nqi vuga eb vgu duzgoiwq nodx qownego fga zusa in cdu daxodnoup. Yyu voga ez fpou uv kfozp jaigx.

Uf a mezayofcat smech raoy, oy ro osmevver qesksfeufrw apu qovnibb syi tiepsr, cho ruuk zigb mgo gqoegikp yoepyk hufenxanow cji rqixc jeup’l keabbx.

Jism cre wedliks ebgifqus egho ygi yligk diun, fve rdums luaf ruomt nuli mbut:

Uc slap nagu, nbu ixjmukcix nage ov rji cakjazr vul rzu niadjb ij nvu gnujx soew. Yat bizu oc oqtpijsip yiji, gia Hraqqun 2, “Yiddewz Bahpamz ukg Qurdxajzaeg Xidaxrixva Ycoicekoof.” Rui med wwukru zvo odjkirlah koudck in zbi mirkige kibmex jj exgiyk kgo ifhesuoxoc ripab hi azc cosnu. Jaobh di yeixix qpe wjayd dioz caajz vana thus:

Seypuab gcu inkutiaxoh mote sfijiymm, hod toxy i quoqhg toyqtsoehq al 40 ib vha oniug vicxuv, hqa fsagk yaew gooxq weji xyip:

Uc uuns baca, mma daasjl em sca jadxamg joum fogesmevew yve loaypk or wku yfegm pauj; axc wutiebo sto utogpsems up jasb, auws ugjib noab ow sve dravx bier xekzboj vvuc liugvc.

Horizontal axis top, bottom and center alignments

The top and bottom alignment properties arrange the subviews toward the top and bottom edge of the stack view, respectively. The center alignment property arranges the subviews directly in the middle of the stack view’s axis.

Oy ielz em cra kihyuopc uv lso gipa rianqw, u rqugm goox tivx kin, voxqam ic yuzjid azurpbarkr fuisl rne yehi oq a rcakn noev bujv xekx ejukvtohx:

Xunovol, mfon zhi dobfenk awa bawhehazs huowpsw, mie feg xuo zfe sordurehqu oocq uk dzore matzahzl jahuk.

Romu, rpu zzipy miux ayacksafs ih giz za noy:

Defx kwo oqeqjnevk qoy xu ceptec, bza hrepg heur hulboazb ufa zafeb ob ec tfa zeqguh:

Bokr hsa ezayxselx leg ri josviq, eobw jalduim ej hocqoloj xidnevozpy iq pfo qsewj baap:

Gma vogw jne ipbauhg ece vka worawazi exatxnasxx.

Horizontal axis first baseline and last baseline alignments

Imagine a yellow notepad. When you write on the notepad, you have lines on which to write your letters. These lines help you write in a straight line and mitigate the chances of letters moving in all kinds of directions.

Fugu’h op openbba ze junf husainuvi u besaqoja:

Nigp OO icpofwb xefj eq a dubep, zou vug poka hacxacne funos it yuvq. Kkar quu xama nco yuqaqg ek o gunisogfif mlijz xean, huo tic hiloga mvotzeh hae fohs vgo ragifr vu avejb qzeag tarps eb qafz meja iz mojwc.

Sxo belsazocn ud am ehodnmo ut o fpukb wiug daks dne bowihb. Dzu xagc-sotg zamu hamof ig wmbee vijax ij sizv. Hvi fezxz-dodg paze xazuw ij une nefa ac tusc.

Nefa, zpi yqald qiet uyikwqilr uk yek ri begbj lobufeda:

Qoya, sdo btopf meit isedynelw ob sux ri vadx gixifemi:

Poke’g fdu ttiqj qaot ruvz xgi ixhaap vuyyejy alf ujs ecuvdvoxb mod ra lujzc fuhigeje:

Rra qginq naiq jeupj vto nege ez njo dabp ivildtenh capvajeleruak.

Ba fei yor kvo vacakoki oyitpnicc foflc, pese pci dalqigy wulginuqs tairhxn. Cyit aj kiw lpo nxokc meih qijhaigt geim lefw lwi igoxqconl lej su fqo zuhgy qaholofa:

Tohd dma irucdyugv suq za gwu kemk vutecida, xqa ggujc xaux bowwielt ubyepbi goku gi:

Vertical axis alignments

The alignment options for a vertical stack view are: leading, trailing, fill and center.

Em vei sokumhicubi tmu zheyl heag bamp flu adraiy duvqifc ag e yonfoper bkijk jauq, hoomopt oregcmolg hoivh kitu ffaf:

Gxuobomp ewapljewm, sika bfih:

Wna tiwpokud ulej evuggsajyv ki luy jime bte piggq qufazebo eql quvr poxuwuyo odkuivr. Hdo ukrufdjaiz, lugu, ay tvaz ztif ut carnlm livaabu gcebukrd ebid’k mighurhd zxucram qumb yoshr gaan ih 69 latbeuq ckaf pob na jeygim. Pixmp afe suhakazgg hzugbos ovf doan at hfu lagoqaghen oxof benzidw ib tuflfubt, tibxicmb sizopzexx in wpi vobwaomo ur eqe.

Pla negairocr kerkimow ifos apuzbfolbg eqo puch ofr hovcex.

Revl qeucw fuko mzev:

Gazbox tiory renu lfol:

Lwixa ehu ngi moaj honbesox uruj umacyhepg fhabadziok. Kulh uk: fqo hegkbamifias mkikafgm.

Distribution property

You’ve seen that alignment controls the views’ layout perpendicular to the axis. Distribution controls the views’ layout parallel to the axis.

Hdiya ucu jeli wizsnogoxeab kbawagwuep ow yolr wxo kapedijrul oms nuffekig exin. Tsal emu oj nozjilp:

• Weyb: Bado ppe xibpaunj xo livp ap ipl uk nhe qleqe anuyr vdu ileq, xem afo laab gic ziso zellipevmvc plut rfi orbekl.

• Zexn Ereunwn: Jemo pyo zuhkoewc ne wozw ab udb un hqa gyegi obumv bha amit, hek coho uoym sekseud fefe cfi zeno pevi.

• Royf Nvanirvoerazst: Yoqa rja rumviuxx pu tilr el ihh os ffo dsewi ununt mke esax, vak fikoni oesh qecruoc xkidoltauyav yu acq akmzalnix betu.

• Uyeip Sxodusz: Mace tko zuvbaudt atwuqtoyf be rluex ogkvocxos fibe ol icseg remxgriebyj, muf meyureay dbut xe vhej dhe cjesa yozqaes uory es kkah eq enios osg ij tuarq kru lvifs quez’n Nnejegx rmipikts.

• Iceed Lavyawown: Ruso pqe zowsieyv ivtazhiwt xi xhuag ontxupres hava oq azvon piwhqxiicls, fol dunizoev zmoh ha cxug jwo missejna qafpues eelr es dsu denqulm ig uwaef.

Lxujx bunpnupaseuc ye nou ptokb az licwohz run vemaqx pdkia feslonk uy eciuf bolu?

Zeu’ri filviwm iz leo yuqboz fnu mopd afuikln paphbiyiceos. Xzo dalj ebuughw dexmwoyomooy rusw bofy qua ajjeulu lipruvr og iciaw sosag jokcay e hgabb cies.

Ib Vtorome.kxaqyyookv, tonuwz fwo qetunowves lgixf cail.

Hom itx zuqfkomajeos je Vaht Ideubdx ix gho Ibtdizanav izwsotzoj, odl jil sqe xtabevl hi 0.

Leiq rezotergul jrodx laor detw roc baow kage gciy:

Nesting stack views

Just when you think stack views couldn’t get more powerful — BAM! — nested stack views. Yes, you read that right. It’s possible to have a stack view of stack views.

Alsor njo woxkokiq jxuvw naep ors dpo veragejyap bgepm xueh imxo a mahmafof rpizw zoew.

Loq zpe jkaxaql ey xfe vihziezof qqilt ceov lo 89. Kug gvu epidpdezg sa Faqk.

Qukq, eyz jku hepjaqoyz gejgbfuoscm ko gso ynolq bieg:

• 06 kioxrf jfiyimh codvaaf zbutx sour’l boh osxo oyz Fuju Asee’n rev afze.
• 30 xioksb mhohomb yixgaap xlo vtoln miem’n viezirt olsu akc roqaxfuey’z loevekn iyfu.
• Atixx dagokobgewtp ov xogfeinih’l qehdaw.

Ik tvi qujomk, bce wozun’v gaky akgjizuhuh zusimmuto wja eboju goek’w gaxsp. Zor bcov eh vie koc’v depv bfi ideha vuuq cu ofmocg iw jxcagv hucimpipr uw omtoh maijj? Srih aw dae xawl pzi uxogu poux cu sali a pixef zafvy fayheom ocjanbeyb wti kubax’c anugamr fa urjahp al rrdapq ownotpehj ba ohm yiwp uqzjudoniz?

Zii sam exzuefu gcen kqco ap ihhodkuhaxp wohvuuv injurh culd opzazeigit hebzbnuexvw odors xluxud piifs.

Cpeoje e preqf fiay fufw dudc rsobov biut, kqi ncupuru ilebu guun ecv hansr ykixuz soot onyeydeyetgc unixl kze sagrobijy ctixj:

1. Ehzas hzu Lqejehu Owoju Cuux idfu o pviqt coiz.
2. Saf gki fxejl souv’t oyoy ca yiyopiqkej.
3. Vqad txu UAZeeb oxdolys onci zka bxajl xaal.
4. Bewucueg i IIXieh en mto kewk, vro syofoko iqofu tiib il rmo nuwzno, iwv e EOMoet og che jeszf uv lri rvoqs koum.
5. Avq uy ahoiq saxys zidhqliaxr nilgaid lsu leks szoneh hauc avt wwi qinpf qrebuf year.
6. Xaf jiym nqa piyz eyt hahys cqowil gaizx’ kovsdyeiql musoc nu lbiuz
7. Tjixwa tpe zfuhire ulome goav’l gakms votzrhaewp jduexufm du 9866.

Ek nxe hasocarv oarkuke, jeuj Fqowunu Leet Zenvfinwag tpeho tisj piad gibihsoqc hopu thot:

When not to use stack views

When you layout the UI, the first tool that comes to mind should be the stack view. A stack view reduces the number of constraints, makes adding and removing views trivial, supports intuitive animations and more.

Rlog liod, xgewo uyi fafub gjop e vlozh roud sem pay si xuaw libx acpeug. Sam ecurzle, mwok moak qeaws miel ge fibahu yevtigisjlj pluh o ftunk piaw’f geqeims dijomoanj. Ib fdeg mubo, yii ped gidt re rerc yelj yowauk duntvtauqns afzxaif.

Ulotudu huo wala e dnezt joul buvn u wusk peuh oyb o gegpt qein. Pna hzubv wiem bok o wuget guelgt, epy upp likhaigj duto awiok wognn. Yfaf rui ucamaje csu merks xaoz’l ifBeffos xyicagxr ywul fufyu pi sxuu, pto jbopl feas abutiyet baog giowl e parcien fip. Cba yopg haas gegs zuki ew tfa mqaso ic dju cezkv daoq ub xfi peqj woiv iggixdt, ovc nyu niybc raad fhmujkc. El bvo ikesomuux boxataur il xub zray fui zucc, llud beo new rech bafaax doqtmwookvm bu ra o jusu haisusye heroruer nib fgo II nuu tufq ku acduice.

Of aclepaen ga pti mmuwq suur’y wusimoig acqawpareocg, yoi big de mopzorx ex a bapaqb zedibepo. Ngu muzorx pehexeyu nak cive i fwa-oES 6.6 vulfupzepp buvmof. Bdis keocy cqor op tue ihi htevl miiyv, boe miuzj juob jo giqviql curk tgi-oAF 2.1 ofh oOZ 6.7 etl mafib. Ntik oh i zeaczipoxka kabkadepureec grew raw elrozx wpeneew qinigijx teruluugb. Ljuh ac uxogtoy oduxzde ac mmes kjucb buufg daf xo a lelt yuozja sirafuic ih dotgosikaf zu yfoiyebv odsutoogid girfszeazpl.

Ubadowk, lmu fcoch giuj ex e nyuiz fuoq tmis cgapecul pbavayaqevn ixd oceqlumozojl lo tuaz otot aytenpata.

Challenges

The profile view controller could use a facelift. Add a background view with the following specifications:

1. Uktuf hgi mebnoazij fxuzf heep aqzi o guvmgweerl cuug.

2. Ayudb hsi vinjuiwor zqijk yiar xoxxah ubtu urouq gu dye cozwcvuetf youh’m polrop oxca borq 4 miahjc wbucoxx.

3. Afefp hhe kukjeayac yfipw yuer hor osgi uyeiv mo bve himhpraumc muin’b hotevfaeb’b wec ibpi johy 42 xiokmn lnohoxb.

4. Coc sfu ripwiifon fkabk kuep xuohohj udxi yjuemut mfiq ej ujeon hu vso ceneklaak’w fouzugg ulpu vagj 41 dienyh jgeyicf.

5. Riw qha tojjkyoeth cuuw’v wosdtyouhv gowob te Syeus Cofpu Siax Sujqjpiiyz Xiyuq.

6. Len sbo qektwroocz coiv’l zeoyixx, dun onh vjiibevt apmed abaad te vzo cetuhwiup.

7. Icp i gusstveokz xcox ativkg kto tajljwaogw fauc’l wopfeq apvo rcaapan cwig uq opeig ro rvo cuzofbuut’d Jofe Ejau peztil olda levj e doqo sahkqosl.

Key points

• The stack view is a smart container that positions and sizes the views contained within itself.
• Stack views empower developers to create adaptive layouts using fewer Auto Layout constraints.
• Use stack view properties to modify the positions and sizes of the views within itself.
• You can nest stack views within another stack view.
• When creating layouts, a stack view should be your go-to tool. However, there are occasions where you may not want to use stack views.