Hvordan bruke Auto Layout med UIScrollView for iOS

Jeg elsker å bygge verktøy med programvare, og det er derfor jeg for tiden er ledende utvikler for Green 13 Solutions.

Nylig har jeg hatt mye moro med å bruke Swift og Interface Builder i Xcode for å lage iOS-apper.

Jeg fikk noen utfordringer da jeg prøvde å lage en scene der brukerne kan bla for å se innhold som flyter over i gjeldende innholdsvisning . Innholdet rullet ikke ordentlig, og teksten ble ikke automatisk vist riktig for forskjellige skjermstørrelser.

Her er noen notater for det fremtidige jeg kan referere til. Jeg håper du finner dem nyttige også!

Her er et depot for prosjektet hvis du vil se det fullførte eksemplet.

Det vi skal bygge

Appen vår vil ha en enkelt side. Siden vil inneholde litt tekst, og brukere kan bla nedover for å se teksten som flyter over fra deres nåværende innholdsvisning.

Vi bruker Interface Builder i Xcode for å legge til et UIScrollView-objekt, et nestet UIView-objekt og deretter et ytterligere nestet UITextView-objekt. Vi bruker Interface Builder for å legge begrensninger til disse elementene. Begrensningene vil bety at automatisk oppsett kan gjøre det mulig å bla riktig, og tekstvisningen vises automatisk riktig på forskjellige skjermstørrelser.

En rask bit bakgrunnsinformasjon (ordspill beregnet)

UIScrollView-objektet kan brukes som et overordnet objekt til andre UIKit-elementer som UIView og UITextView.

Å gjøre dette betyr at alle underordnede objekter samlet kan ha sin opprinnelse forskjøvet i forhold til innholdsvisningen som vises til brukeren. Dette betyr at "rulling" fungerer som brukerne forventer. En annen fordel er at Auto Layout vil ordentlig dimensjonere elementene våre på forskjellige skjermer som forventet.

Vi bruker uttrykkene 'UIScrollView' og 'Scroll View' om hverandre nedenfor, og tilsvarende for View og Text View.

Nedenfor er trinnene du må følge.

Legger til visning

Lag et nytt prosjekt og velg 'Single View App'. Hvis du klikker på Main.storyboard og du ser, har vi en scene med et tomt View-element.

Legge til rullevisning

Dra et rullevisning-UI-element fra objektbiblioteket til scenen. Deretter legger du til begrensningene vist på bildet nedenfor for å forankre Scroll View-elementet til kantene av det overordnede Safe Area.

Legg til et visningselement

Bruk objektbiblioteket til å dra et visningselement til scenen. Visningen vil være overordnet beholder for tekstvisningselementet vårt.

Endre størrelsen på visningselementet manuelt med markøren slik at den fyller bredden på skjermen.

Ankervisning for å rullevisning

Klikk på View-elementet i objekthierarkiet og dra + slipp markøren på Scroll View-elementet over det i hierarkiet. Klikk på de 4 øverste alternativene for å bruke disse begrensningene. Klikk på 'Like bredder' for å bruke denne begrensningen også.

Hvorfor? Å begrense visningen på denne måten betyr at et underordnet tekstvisningselement vi legger til fungerer ordentlig med automatisk oppsett. Dette skjer fordi vi begrenser tekstvisningen til bunnen av visningen (som vi forankret riktig til bunnen av rullevisningen!) I stedet for direkte til bunnen av rullevisningen.

Du vil se at layoutguider i Interface Builder er røde fordi det er noen andre feil. Vi fikser dette snart.

Legg til tekstvisning som underordnet visning

Legg til et Text View-element inne i View-elementet i scenen.

Legg begrensninger til tekstvisningen

Legg begrensningene på bildet nedenfor til tekstvisningen.

Hvorfor? Dette vil begrense tekstvisningen i forhold til visningsobjektet som omgir den.

Deaktiver rulleoppførsel i tekstvisning

Du bør ha en lignende skjerm som den nedenfor. Du kan se at det fortsatt er mye rødt i Interface Builder.

Du kan fjerne disse advarslene ved å velge Text View-elementet og fjerne merket for "Rulling aktivert" i redigeringsruten på høyre side.

Vær oppmerksom på at vi fremdeles vil ha rulleoppførsel med denne tilnærmingen, men det vil være den overordnede rullevisningen som faktisk blir flyttet, ikke det enkelte tekstvisningselementet . Det er det samme som hvordan et blad bare beveger seg på en elv fordi elven som omgir det beveger seg!

Dette er litt subtilt, men ganske viktig å forstå da det underbygger hele løsningen.

Endelig

Legg til litt mer innhold i tekstvisningen. Du bør se at rulling fungerer som forventet, og at tekstvisningen vises riktig på forskjellige skjermstørrelser.

Dette er skjønnheten i Auto Layout!

Her er et depot for prosjektet hvis du vil se det fullførte eksemplet.

All informasjon om robins for Text View-innholdet er direkte fra Wikipedia. Takk til samfunnet for dette.

Hvorfor robins? Fordi jeg elsker fugler og robins er spesielt fantastiske skapninger!

Takk for at du leser. Jeg håper du syntes dette var nyttig. Gi meg beskjed hvis du har kommentarer til spørsmål!