Sådan bruges Auto Layout med UIScrollView til iOS

Jeg elsker at bygge værktøjer med software, og det er derfor, jeg i øjeblikket er lederudvikler for Green 13 Solutions.

For nylig har jeg haft masser af sjov ved at bruge Swift og Interface Builder i Xcode til at oprette iOS-apps.

Jeg stødte på nogle udfordringer, da jeg prøvede at skabe en scene, hvor brugerne kan rulle for at se indhold, der flyder over i den aktuelle indholdsvisning . Indholdet rullede ikke korrekt, og teksten blev ikke automatisk vist korrekt for forskellige skærmstørrelser.

Her er nogle noter til mit fremtidige selv at henvise til. Jeg håber, du også finder dem nyttige!

Her er et lager for projektet, hvis du vil se det færdige eksempel.

Hvad vi vil bygge

Vores app har en enkelt side. Siden vil indeholde noget tekst, og brugere kan rulle ned for at se teksten, der løber over fra deres nuværende indholdsvisning.

Vi bruger Interface Builder i Xcode til at tilføje et UIScrollView-objekt, et indlejret UIView-objekt og derefter et yderligere indlejret UITextView-objekt. Vi bruger Interface Builder til at tilføje begrænsninger til disse elementer. Begrænsningerne vil betyde, at automatisk layout kan gøre det muligt at rulle korrekt, og tekstvisningen automatisk vises korrekt i forskellige skærmstørrelser.

En hurtig bit baggrundsinformation (ordspil beregnet)

UIScrollView-objektet kan bruges som et overordnet objekt til andre UIKit-emner som UIView og UITextView.

At gøre dette betyder, at alle underordnede objekter samlet kan få deres oprindelse forskudt i forhold til den indholdsvisning, der vises til brugeren. Dette betyder, at 'rulning' fungerer som brugerne forventer. En anden fordel er, at Auto Layout vil dimensionere vores elementer korrekt på forskellige skærme som forventet.

Vi bruger udtrykkene 'UIScrollView' og 'Scroll View' omskifteligt nedenfor og tilsvarende for visning og tekstvisning.

Nedenfor er de trin, der skal følges.

Tilføjelse af visning

Opret nyt projekt og vælg 'Single View App'. Hvis du klikker på Main.storyboard, og du vil se, har vi en scene med et tomt View-element.

Tilføjelse af rullevisning

Træk et Scroll View UI-element fra objektbiblioteket til scenen. Tilføj derefter begrænsningerne vist på billedet nedenfor for at forankre Scroll View-elementet til kanterne af dets overordnede Safe Area.

Tilføj et visningselement

Brug objektbiblioteket til at trække et visningselement til scenen. Visningen vil være overordnet beholder for vores tekstvisningselement.

Tilpas visningselementet manuelt med din markør, så det fylder skærmens bredde.

Ankervisning til rullevisning

Klik på visningselementet i objekthierarkiet, og træk + slip markøren på Scroll View-elementet over det i hierarkiet. Klik på de 4 øverste muligheder for at anvende disse begrænsninger. Klik på 'Lige bredder' for også at anvende denne begrænsning.

Hvorfor? At begrænse visningen på denne måde betyder, at et underordnet tekstvisningselement, vi tilføjer, fungerer korrekt med automatisk layout. Dette sker, fordi vi begrænser tekstvisningen til bunden af ​​visningen (som vi forankrede korrekt i bunden af ​​rullevisningen!) I stedet for direkte til bunden af ​​rullevisningen.

Du vil se, at layoutguiderne i Interface Builder er røde, fordi der er en anden fejl. Vi løser dette snart.

Føj tekstvisning som barn til visning

Tilføj et tekstvisningselement inde i visningselementet i scenen.

Føj begrænsninger til tekstvisningen

Føj begrænsningerne på billedet nedenfor til tekstvisningen.

Hvorfor? Dette begrænser tekstvisningen i forhold til det visningsobjekt, der omgiver den.

Deaktiver rulleopførsel i tekstvisning

Du skal have en lignende skærm som den nedenfor. Du kan se, at der stadig er meget rødt i Interface Builder.

Du kan fjerne disse advarsler ved at vælge Text View-elementet og fravælge 'Scrolling Enabled' i redigeringsruden på højre side.

Bemærk, at vi stadig vil have rulleopførsel med denne tilgang, men det vil være den overordnede rullevisning, der faktisk flyttes, ikke det enkelte tekstvisningselement . Det er det samme som hvordan et blad kun bevæger sig på en flod, fordi floden, der omgiver det, bevæger sig!

Dette er lidt subtilt, men ret vigtigt at forstå, da det understøtter hele løsningen.

Endelig

Føj mere indhold til tekstvisningen. Du skal se, at rulle fungerer som forventet, og at Tekstvisning vises korrekt i forskellige skærmstørrelser.

Dette er skønheden i Auto Layout!

Her er et lager for projektet, hvis du vil se det færdige eksempel.

Alle oplysninger om robins til Text View-indholdet er direkte fra Wikipedia. Tak til samfundet for dette.

Hvorfor robins? Fordi jeg elsker fugle og robins er særligt fantastiske skabninger!

Tak for læsningen, jeg håber, du fandt det nyttigt. Lad mig vide, hvis du har kommentarer til spørgsmål!