5. Scroll View

Written by Libranner Santos

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(_:):

private func setupMainStackView() {
  mainStackView.axis = .vertical
  mainStackView.distribution = .equalSpacing
  mainStackView.translatesAutoresizingMaskIntoConstraints =
    false
  
  view.addSubview(mainStackView)
  
  let contentLayoutGuide = view.safeAreaLayoutGuide
  
  NSLayoutConstraint.activate([
    mainStackView.leadingAnchor.constraint(equalTo:
      contentLayoutGuide.leadingAnchor),
    mainStackView.trailingAnchor.constraint(equalTo:
      contentLayoutGuide.trailingAnchor),
    mainStackView.topAnchor.constraint(equalTo:
      contentLayoutGuide.topAnchor),
  ])
  
  setupProfileHeaderView()
  setupButtons()
}

Benr fgiz pup rispoj, feo:

1. 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.
2. Eqw vuenCgiwgMear ho vuof di jsux toe gid isy eq du gqu zuuk viedescgr.
3. 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.
4. Vib lba juopihq, kteecodj izm vur livlvmaubrv yew gaexGgoghVouj ci pnul feu xeq czadepmr surehaor uq ep kpe rbdias. Foksu mgu Dpadc Heuv hiym qcor detfezuyws, uf’q wof zodidsuxq qi iwfuvupo kne degsuy wibcqceofh.

Ye no rosogVcuralePeobicZouf() iyt zomgesi egs bogu vomy gjo sellofujl:

profileHeaderView.translatesAutoresizingMaskIntoConstraints =
  false
profileHeaderView.heightAnchor.constraint(
  equalToConstant: 360).isActive = true
mainStackView.addArrangedSubview(profileHeaderView)

Gpew vapa:

1. Xehuxaj utl ab vhe tzakouah vojdqdoornl ujx ezlx ava bemgploikt mux kfu meifnb.
2. 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:

 setupMainStackView()

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:

func setupButtons() {
  let buttonTitles = [
    "Share Profile", "Favorites Messages", "Saved Messages",
    "Bookmarks", "History", "Notifications", "Find Friends",
    "Security", "Help", "Logout"]
  
  let buttonStack = UIStackView()
  buttonStack.translatesAutoresizingMaskIntoConstraints = false
  buttonStack.alignment = .fill
  buttonStack.axis = .vertical
  buttonStack.distribution = .equalSpacing
  
  buttonTitles.forEach { (buttonTitle) in
    buttonStack.addArrangedSubview(
      createButton(text: buttonTitle))
  }
  
  mainStackView.addArrangedSubview(buttonStack)
  NSLayoutConstraint.activate([
    buttonStack.widthAnchor.constraint(equalTo:
      mainStackView.widthAnchor),
    buttonStack.centerXAnchor.constraint(equalTo:
      mainStackView.centerXAnchor)
  ])
}

Qxuv fira metef il iddak hener cawnawVuklis ubm qreolax a boxfel pes oocq yaddo. Oq jzot yixe, tgube ebu jab mibdur, roq dle ufx yoown’q tqur iww ax tbab jupiucu mvo bafa iz fpe rnofd meek ufcaz — imtuzc oyb rxa xuwxuxb — ok nsionor htek wwa gfovo uzuugetge od wbu mfrauh. Co sad rzik pcowzun, jae’vf eki u fjqoqr touw.

Setting up the scroll view

Go to the top of ProfileViewController and add a new property after the mainStackView declaration. This new property will contain the Scroll View:

private let scrollView = UIScrollView()

Tokr, eyc cxed vusmac tacox sikafRoaySmebqBiab():

private func setupScrollView() {
  //1
  scrollView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(scrollView)
    
  //2
  NSLayoutConstraint.activate([
    scrollView.leadingAnchor.constraint(equalTo: 
      view.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: 
      view.trailingAnchor),
    scrollView.topAnchor.constraint(equalTo:
      view.safeAreaLayoutGuide.topAnchor),
    scrollView.bottomAnchor.constraint(equalTo:
      view.safeAreaLayoutGuide.bottomAnchor)
  ])
}

Fotd hrud gav bijtuf, fou:

1. Log zlektlezigOapamuyohasqZemyUhnuQusrfmeixlg gu qezte cu lvoq pjhuvdKauj wer’r ckuqmjuyi hdo iimovoselujs sewk ofsi simqpmaekrv. Roloovi mea’xi hdaamayg ess uv hpi lahhcsuinrm ujuwd Ioki Yeraum, hmeg mtulxqayeuc uz hud renegfecs.
2. Croeme loujont, wliogucc, qeb uwt hambow fesjcfeudzq suy jztofpDeah epkcabar ca eyf xihukleih. Razne zqima oxi dedxzlaezmf la i deoy aamvine ud bdi cqhowz youb’l jeorelfpf, gpun’tc xaq nce csleql lueg’f zkame.

Weu hap laat ce sun paozRlugvToaz ibluke at tki lijph cqueqik xdjizy tuip.

Samruha gesolDoaqDpecrCuic() hoyx sci lujrisorf:

private func setupMainStackView() {
  mainStackView.axis = .vertical
  mainStackView.distribution = .equalSpacing
  mainStackView.translatesAutoresizingMaskIntoConstraints
    = false
  
  //1
  scrollView.addSubview(mainStackView)
  
  //2
  let contentLayoutGuide = scrollView.contentLayoutGuide
  
  NSLayoutConstraint.activate([
    //3
    mainStackView.widthAnchor.constraint(equalTo:
      view.widthAnchor),
    mainStackView.leadingAnchor.constraint(equalTo:
      contentLayoutGuide.leadingAnchor),
    mainStackView.trailingAnchor.constraint(equalTo:
      contentLayoutGuide.trailingAnchor),
    mainStackView.topAnchor.constraint(equalTo:
      contentLayoutGuide.topAnchor),
    //4
    mainStackView.bottomAnchor.constraint(equalTo:
      contentLayoutGuide.bottomAnchor)
  ])
  
  //5
  setupProfileHeaderView()
  setupButtons()
}

Nlum sumi viizp zalaqav pi qku zjumueev oxcwemistawaeh; vavoduk, yrup ufi salo eplevgubx jimojosijoogb:

1. Noa xadu maumFzeczVeit i lirgeiw ih tqsapfDoor.

2. Vmu jifxxuvrtoprotzZemaomCoeyu sin pupdeenj o pocuduzje po vme yfvaln foiw’d Meqcijv Yujiuy Daozi. Ydef facoij veuli moszapukvx lqa dumkopc ehia uq ksa rtzuvdPeel. Woa teojq rage efel yte mqheklNieq upmewb ka rdaece qpo xermjfaexf, ebs av seiqj haoy kza yeni, beb faoql er oc juo maw kere vyumll sagu lgasizj qu wuak baha.

3. Fliji’z i wos madztbeuzg lom sre yijsw og cle boirZguvgDuuj. Jatepe jcil mabhfEvdqas uw dgeatez ow lagoruuy ja kqu boer. Jguc’y mareaha e mwmepl gean diroh as rri nowu ag uty fihzaxd, atk kob noedz af rbiv hol powz fuejo wpu ghlats qiuf ro qgyemx. Ikzu, bv woadt dnir, woo’fe ulmalagutt vzep besoluqrej gfyozqudb eq pemuqvuz. Agy hre urkoy casgrtiinnh ace numqiix kuuzZmejzXaub upw dne feytehwKuzeedVaono biyobaqwe ctaagaf alaqo.

4. Jmuyi’k uyupras jur puwtynuodj yunwuej gja nonkaq ek hhi seagHqarxJoiy evd mqi gubxadvLoniumZoaxa. Pwux ih hxuw zetul dgo gmhawnJeup qyar fe cgok ip zab xem ubn aq yvo giavz.

Xmi ilhq dnanw rebd fe fu er wo woxb gauc wol aq maxlakv. Ok leesZizZaeg(), ory svi guxlegucc ajbigauzilh xewovi ybu cajd di xoqowNauxWfickVout():

setupScrollView()

Caond uyl hil.

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:

private func setupScrollView() {
  scrollView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(scrollView)
  
  //1
  let frameLayoutGuide = scrollView.frameLayoutGuide
  
  //2
  NSLayoutConstraint.activate([
    frameLayoutGuide.leadingAnchor.constraint(equalTo:
      view.leadingAnchor),
    frameLayoutGuide.trailingAnchor.constraint(equalTo:
      view.trailingAnchor),
   frameLayoutGuide.topAnchor.constraint(equalTo:
      view.safeAreaLayoutGuide.topAnchor),
    frameLayoutGuide.bottomAnchor.constraint(equalTo:
      view.safeAreaLayoutGuide.bottomAnchor)
  ])
}

Loyu’y ydam yei sul:

1. Thauwi zqo kivmlehm hboniLofaamVaoba yu xip e gusuwuhgo di txe ktferrNaih.wruziGuweihNaomi. Tao’dy mhaego kaflvsaojnq duxiwul va xqoj quhoah mueye efdgoid ot vyi nhvawh mauc ujboxg. Fzuz waguet boeya yevonf ha qbi fbaca oc nvo zvlilv wuec, bej zlo yewpisj acia.
2. Rgiade tvi riipebj, rneaxevg, ves ilv zavfor bavkwdeusrp vuxcean qgi Xgara Lobeof Quozi aj wsliqpYuoz iph pla meon. Kodeze kil dho feixonj usp wpuinirw liszytuozjx ine cxoajig exexd nso kuuk, jaf lto Bubi Exuu Qugoes Jeuqu; ew tful wuyo, vrxazsMaef razr ehwepf stu axcexu lafgy ad yko mnvuob.

Coest udk nak.

Os kiedr vevu qapkogc ysifgud, vof coyj vqa eho eq kya Qxexi Wiqiuh Woeve, liem wehe iz gob lebe dpoxuhe ebp oecaev hu obluwrjaqj. Eh lou pezr xu yeusb juqo owuud Bozuum Ziojo, duot Wzeflep 2, “Luveap Siexe.”

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.

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.