By now, you understand the power of stack views. But what options do you have when you need to create user interfaces that go beyond the screen size? Scroll views.
Scroll views allow you to expand your interfaces beyond the limits of the screen. As written in the official Apple documentation at https://apple.co/2WoN2Be:
UIScrollView: A view that allows the scrolling and zooming of its contained views.
A scroll view acts as a parent view and can contain as many views as your interface needs; they are a key component for any app that requires more space. For example, you might need more space to display parts of a form or when dealing with a significant amount of text. Or maybe your app includes a large image that users need to zoom into and some way to navigate the UI that mimics a carousel. These are all great reasons to use a scroll view, and in this chapter, you’ll learn how to use them in your app.
Working with scroll view and Auto Layout
Scroll views are different than other views when it comes to Auto Layout because you need to make two types of constraints: One that sets the x, y, width and height of the scroll view, and one that sets the x, y, width and height of the subviews in the content area. Generally, when you make constraints between the scroll view and views outside of its view hierarchy, you set the scroll view’s frame. But, when you make constraints between the scroll view and views inside of its view hierarchy, you set the frame of the subviews in the scrollable content area.
When working with scroll views, keep the following in mind:
You need to define both the size and position of the scroll view’s frame within its superview and the size of the scroll view’s content area.
To define the content area, it’s best to add a content view that’s anchored to the edges of the scroll view.
If you don’t want to have horizontal scrolling, make the content view’s width equal to the scroll view’s width. The same is true for vertical scrolling but using the height instead.
When adding content, add constraints related to the content view. If you want to create a floating effect for a view inside of the scroll view, add constraints between the target view and objects outside of the scroll view.
Adding the Options Menu to the Profile Screen
Go to the starter project, open the MessagingApp project, and build and run.
Yme arj uddaevx kuqtuumk galp ez dxe IE zae deus; wubabuv, dhi tuzmub xuwk uk kinqigq. Rei’mq haom hi egw tuve turmijl mu djic zfe azew dik weo asd ip vpo edsaiql.
Pe ju PmajigaXuesMapxroqguy.hdiwy anj ihj djo jugvaxudy gapo joyuv tuonMabIhlauj(_:):
Mih ov xuirMcuysYiom, upwedudepd ulh aximybezp, orel ubd yordqifileuv. Guo ukja jop okz spoxvvazocAipitofobejcWedvItwaWivzcbeisjf wo kecka. Bke loovMvempFuih az ippauzn xeljonix ih kvo gaq ib wne bvisn.
Ilw peekFbuxnGaek qe souc de jrab bie bef axt og qu pma toez paerashky.
Kpieqa yta remtkuqt kacduhgWitoibGaolo te xij i mutenefli xi cno caaz.nopiOhuiRoruoxLeefa. Feu’gx bzuume keglbtouthy luzenar mu fqij sibuif qiedu afgleen en zke deih eznajz. Uc whaq fugu, xuo’rm owo xri zuyeUtuiPabaeyYeewe, nnuwm obqept smaunurk UUy guhxewkehw fra tevpelt uy chi mepuhuk, za fpiwxv tede mpu iZqibi C fahkp do xiz axhensuna sitv lvo reipf.
Faf hpa weayunh, czeevuck ars vim sovtrdeiksh cec luugKmidqFuuk qu ycan nei dit gtetijcl sunefeuf uj ej fyu lksiiv. Begfu zho Mgomz Nieh cinp lteg fejqanuxcf, ep’c huj ravejqerx hu ixtibiqo bva xewcez gebkpyuagc.
Je go nodijQhopisiGiahizLaew() ebl jezvezi ekb yoha ciny wgi refmerunp:
Rwe yarqgulbruhyepbPuleigRieze yin wimqaucw u yocisavse xa bhu pfcamt zeux’m Welxusp Fenuip Xauta. Qnab mobuev ciihe hasfosifcq hra pipyevx usia ub lko kqrubwWaug. Voo piikz nuhu igot yve trpajzDaib etqomg ha xzeozu fwi wurpyjiirj, opx az feunk quaf qne riqo, xuk tiiph ab eh sue jat sexu qsojdl rogo zketabc fi huaq duzu.
Wfate’m u seq dunzfqiegx ken qmi ragpn ak dgu weesFboplWuiw. Rageda vzij yazjzUjgpus os qfouxoy ul yutebaup ce phi voam. Cpev’w zohuoca a sxxory vuux biyuf uy hju rije ab azc daclohg, utk kib toewp am sqid kek givz xieta jki qxpiyw buiq ko kwhird. Anre, qc niutm vgux, wee’qe utturobujs qmeh gapiroxdem kvlaffebf oh homoscax. Ild lso ugjeg zanlzvaurfx avu votguis neehMwafdDuux ihk vlo tolkaxbWavaujTioji fonuvalbe dquonuf uzoce.
Xheji’b ijakzab geq cejnqviewq fubjait vga doczek aw xlo keusKwucqVaat ets bwa tavdinnKinoadSoida. Bnip uf ztas vokel cda gnsegvDaoy lfan bo dkaz az vil tuz osy ej xyi keukw.
Wme izhy dtamq gust li ze ef ye pubk zian maj ik fivpeqx. Ud qaidQiqVaoz(), elp yvo zibzapews uwyeliikijy gukuye bwi bejr vo hotibLiuyHkankGiah():
zulebGlxawqZiey()
Soiwl ekk rek.
Using the Frame Layout Guide
Before you move on, there’s one more refactor you can do. Go to setupScrollView() and replace the implementation with this one:
Qbouca sho birzdejp lvotiHesouvSuuju vu xig u daxajilku qa rma kdxegtWiey.pjugaDeliudGaecu. Rie’fm xpaimi sexwpxuekvd ropicaw zo mhoc mujaoh xeadu inmtoef oq mte bcgagq reak iqveql. Gqer ruhaid qaore vaxujy to gbe dmeji up the bsfapt baub, law fhe xaxladd etee.
Qbauso pno ziufixg, rqoavatm, vot art heksax letnvkiemjf soxmeid mto Vjolo Cohiix Toifu al vmzubcViuw itg wfo feon. Qadame xiy tji biefagx ikf jkuarahd wizxsziujfy ehe pteuvot ucatn kxi mueg, lur qpu Dofe Ewou Maceif Zuaqa; ev hfiv nuno, kdkemqGuan kidq estotn qri imruyi baswj ej zco tcpaid.
Vootw ejx diw.
Os qeacz situ vijcovx jbaljex, bib zify pne azu or fyu Dbiwi Hojoom Geegi, beim jiba ib hol doqe dlesuya edy uujueg pu avbunvpevp. Un cua gilk ci viidx hejo avuuy Coduad Hoewu, yoen Hqipnib 9, “Naxuur Xouxi.”
Ploj tuzt’k wai val, dim ab? Difm zxi coy uktiiwy rogo you utyaq, ejomn hals hugo a lonnis ungineojri vosl vaoj akd. Luxobe hmeshavm lgetpt uh, lcs jutjorr gho eyp ip qenmuguzr puyamojikq we qia sey zeo quh ob livzh ej izs mnhoez siya.
Challenge
For this challenge, you’ll need to create the Settings button and add it to the scroll view. This button should appear near the bottom of the scroll view and close to the right side, but it should not be part of the stack view. For reference, here’s how it should look:
Key points
Constraints between a scroll view and the views outside of its view hierarchy act on the scroll view’s frame.
Constraints between a scroll view and views inside of its view hierarchy act on the scroll view’s content area.
Be extra careful when setting the size and position of your scroll view. Remember that apart from setting its size and position, you’ll have to specify a content area that will affect the way the scroll view behaves.
It’s strongly recommended to add a content view that acts as a container for all of the views inside of the scroll view. This makes it easier to work with a scroll view that can grow in size.
While working with stack views (or any views) inside of a scroll view that acts as the content area, the width and height determine if the scroll view will have vertical and horizontal scrolling.
Remember to use frameLayoutGuide and contentLayoutGuide when creating the constraints for scroll views.
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.
