de Sam Ollason

Cum se utilizează aspectul automat cu UIScrollView pentru iOS

Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Aspectul produselor Apple – Fotografie de Gemenii Fischer pe Unsplash

Îmi place să construiesc instrumente cu software și de aceea sunt în prezent dezvoltator principal pentru Green 13 Soluții.

Recent, m-am distrat mult folosind Swift și Interface Builder în Xcode pentru a crea aplicații iOS.

Am întâmpinat câteva provocări când încercam să creez un scenă unde utilizatorii pot sul pentru a vedea conținut care se revarsă în curent vizualizarea conținutului. Conținutul nu a fost derulat corect și textul nu a fost afișat automat corect pentru diferite dimensiuni de ecran.

Iată câteva note pentru a mă referi la viitorul meu eu. Sper că le veți găsi și utile!

Aici este repertoriu pentru proiect dacă doriți să vedeți exemplul finalizat.

Ce vom construi

Aplicația noastră va avea o singură pagină. Pagina va conține un anumit text, iar utilizatorii pot derula în jos pentru a vedea textul care se revarsă din vizualizarea lor de conținut curent.

Vom folosi Interface Builder în Xcode pentru a adăuga un obiect UIScrollView, un obiect UIView imbricat și apoi un alt obiect UITextView imbricat. Vom folosi Interface Builder pentru a adăuga constrângeri acestor elemente. Constrângerile vor însemna că aspectul automat poate permite derularea să se desfășoare corect, iar vizualizarea textului va apărea automat în mod corespunzător pe diferite dimensiuni ale ecranului.

Un pic de informații de fundal (joc de cuvinte)

Obiectul UIScrollView poate fi folosit ca obiect părinte pentru alte elemente UIKit, cum ar fi UIView și UITextView.

A face acest lucru înseamnă că toate obiectele copilului pot colectiv își au originea schimbată relativ la vizualizarea conținutului care este afișat utilizatorului. Aceasta înseamnă că comportamentul de „derulare” funcționează așa cum se așteaptă utilizatorii. Un alt avantaj este că aspectul automat va dimensiona corect elementele noastre pe diferite ecrane, așa cum era de așteptat.

Folosim termenii „UIScrollView” și „Scroll View” interschimbabil mai jos și în mod similar pentru Vizualizare și Vizualizare text.

Mai jos sunt pașii de urmat.

Adăugarea vizualizării

Creați un proiect nou și selectați „Single View App”. Dacă faceți clic pe Main.storyboard și veți vedea că avem o scenă cu un element de vizualizare gol.

Adăugarea ecranului de derulare

Trageți un element UI Scroll View din Biblioteca de obiecte în scenă. Apoi adăugați constrângerile afișate în imaginea de mai jos pentru a ancora elementul Vizualizare derulare la marginile zonei de siguranță părinte.

Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS

Adăugați un element Vizualizare

Utilizați Biblioteca de obiecte pentru a trage un element Vizualizare în scenă. Vizualizarea va fi containerul părinte pentru elementul nostru Vizualizare text.

Redimensionați manual elementul Vizualizare cu cursorul, astfel încât să umple lățimea ecranului.

1611913085 100 Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Redimensionat manual Element de vizualizare pentru a se potrivi în lățime

Vizualizare ancoră pentru vizualizare defilare

Faceți clic pe elementul View din ierarhia obiectului și trageți + eliberați cursorul pe elementul View Scroll de deasupra acestuia în ierarhie. Faceți clic pe cele 4 opțiuni de sus pentru a aplica aceste constrângeri. Faceți clic pe „Lățimi egale” pentru a aplica și această constrângere.

De ce? Constrângerea Vizualizării în acest fel înseamnă că un element de Vizualizare text copil pe care îl adăugăm funcționează corect cu Aspect automat. Acest lucru se întâmplă deoarece constrângem Vizualizarea textului în partea de jos a Vizualizării (pe care am ancorat-o corect în partea de jos a Vizualizării Scroll!) În loc de direct în partea de jos a Vizualizării Scroll.

Veți vedea că ghidurile de aspect din Interface Builder sunt roșii, deoarece există o altă eroare. Vom remedia problema în curând.

1611913085 82 Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Adăugați aceste constrângeri la elementul Vizualizare

Adăugați Vizualizare text ca copil la Vizualizare

Adăugați un element Vizualizare text în interiorul elementului Vizualizare din scenă.

Adăugați constrângeri la vizualizarea text

Adăugați constrângerile din imaginea de mai jos la Vizualizarea text.

De ce? Aceasta va constrânge Vizualizarea textului în raport cu obiectul Vizualizare care îl înconjoară.

1611913085 742 Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Adăugarea de constrângeri la Vizualizarea text

Dezactivați comportamentul de derulare în vizualizarea text

Ar trebui să aveți un ecran similar cu cel de mai jos. Puteți vedea că există încă mult roșu în Interface Builder.

Puteți elimina aceste avertismente selectând elementul Vizualizare text și deselectând „Derulare activată” în panoul editorului pe partea dreaptă.

1611913085 468 Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Deselectați „Derulare activată” din dreapta pentru a elimina aceste erori roșii

Rețineți că vom avea în continuare un comportament de derulare cu această abordare, dar va fi vizualizarea de defilare părinte care este de fapt mutată, nu elementul individual de vizualizare text. Este la fel ca și cum o frunză se mișcă doar pe un râu, deoarece râul care o înconjoară se mișcă!

Acest lucru este ușor subtil, dar destul de important de înțeles, deoarece stă la baza întregii soluții.

1611913085 53 Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Abordarea noastră înseamnă că o vizualizare text se derulează doar deoarece o vizualizare Scroll o mută – la fel ca și cum se mișcă o frunză doar pentru că râul din jur

In cele din urma

Adăugați mai mult conținut în vizualizarea text. Ar trebui să vedeți că derularea funcționează conform așteptărilor și că Vizualizarea textului apare corect pe diferite dimensiuni ale ecranului.

Aceasta este frumusețea Auto Layout!

1611913086 441 Cum se utilizeaza aspectul automat cu UIScrollView pentru iOS
Captură de ecran a vizualizării textului defilat folosind Xcode Simulator

Aici este repertoriu pentru proiect dacă doriți să vedeți exemplul finalizat.

Toate informațiile despre robins pentru conținutul Vizualizare text sunt direct de la Wikipedia. Mulțumim comunității pentru acest lucru.

De ce robinii? Pentru că iubesc păsările și robinii sunt creaturi deosebit de minunate!

Mulțumesc pentru lectură, sper că ți s-a părut util acest lucru. Vă rog să-mi spuneți dacă aveți comentarii la întrebări!