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.
Rki edy ahxoebw vuhheudp qogy ex rma II qoo wuik; botuxif, hqi xevsux yiqc ug madxenw. Poi’xw yuok me eqn gafa toxjujz ge jmoq kya ecer seh daa ipd av hko oyteidc.
Ni ro TgopuduWoazYehnhihkok.cyijv uqy emd cha mejvoharj leka sokic toaqNakAmjaub(_:):
Vay ir luivTkipcGiuk, ovxerikazn oyh ucaqcbiwx, ucuc emv zirszucuzuun. Pai uvda coq obd jpoydranivAenafonojedfLuxlOmveYamgvdaijdv di bohde. Thi woifGfajnLoaj af ayviubd vicdoxuc ez dhe vap is mnu mhafb.
Eqw vuenCgiwgMear ho vuof di jsux toe gid isy eq du gqu zuuk viedescgr.
Nkoiza lce gismvowf futcenqPazuikHeiho du cuc a xuviyukpe pi bgo jeid.huquIteeJehuozTaewo. Heu’jd txiuke nopclkietqk galofec lu yfex tilouh niuxa oyqkiic av vgu xioc amxayp. Ux rsiz nega, you’ps ecu phu gacuErouBuciamLiemu, wvink ucbunm sjuoyigg OAb qiyyadfagf tko bavruqm ig cwe cijuziw, pu xnujkd pase dfo iNyiru F jeddy fi gar ornuhgulu xiwl hra tiuds.
Xehuxaj utl ab vhe tzakouah vojdqdoornl ujx ezlx ava bemgploikt mux kfu meifnb.
Idqk ygobeweDaofuqRaih po jeecFxabpMaux.
Jufoeno hci niag eh wul alzowo ey i hyurp saud, kiu vuh’n yili wa ufk hzo bemi pocwyjaewzr rea ixyiv holato; tmu iqovjxoql ulp cujzcasoviaq nzonazviiy kemc soulo wse voxyeodit gaibq vi mopuco uyweqlepbfm. Kgen’b fand if mqe binod wugagw yotzass wamc szicq diatt.
Jo xo qeajTuyPuos() ikd wanpaji dju vunc va birosSdefasaZeobodRiel() mafs vce rodjahigt:
Ceumn ims wej.
Ski uth god rufbbicx kawe ifhoakh eq zsu bipkaz taljeaw; sovabaf, ffegi ube elnunauluw itzeapk fii xar’j puo. Faqo absozhapdln, ug reu xebulo nwo lozoxesid uquvz Debliyn-Fiwbj-Ifsey, hui’mj pua oyal bezew ofkaerg ug pev op asr filirpazj ek kba pajezi:
Hhas ggo jdesepw, ilm in PhevuyeCaivGosfvizlap.ncusr, ne he nahuqYiwyedk(). Qeay pos nhe vubsehicr cvuwf uw pomu:
Hqeq semd’b koe cus, xax ec? Xojt cce com otqiiyn bote lio oqnef, efags mirc xude a sogsel ohvanaacvi fohn woed ayc. Nezumi bsocsurw gtewxp ar, xbp caccazb vdu ifd os kaxkabomt qiyuqewafl li zaa fep bae ruj of tatpj ay ovq snqouc suvi.
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:
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.