Articles

UIScrollView autolayout pe un storyboard. Un ghid pas cu pas.

  1. Începem prin a adăuga un UIScrollView la vizualizarea principală (care poate fi întreaga vizualizare sau o altă vizualizare, mai mică, pe care o aveți. Oricum ar fi, de acum înainte mă voi referi la aceasta ca fiind „vizualizarea principală”) și adăugăm constrângeri de sus, de jos, de stânga și de dreapta.

Constrângeri de sus, de jos, de stânga și de dreapta (cu privire la vizualizarea principală)

2. După aceea, adăugăm un UIView în interiorul UIScrollView (această vizualizare este un pas esențial pentru ca autolayout-ul să funcționeze corect). Am numit-o „Content View” și am adăugat constrângeri de sus, jos, stânga și dreapta în ceea ce privește vizualizarea de defilare. În plus, am adăugat, de asemenea, înălțimi și lățimi egale în ceea ce privește vizualizarea principală.

Top, Bottom, Left and Right Constraints (regarding the scrollview)

Equal Widths and Heights (regarding the main view)

3. Următorul pas depinde dacă doriți să aveți un scroll vertical sau orizontal. Dacă aveți nevoie de un scroll vertical, va trebui să setați prioritatea „Equal Heights Constraint” la 250. Pe de altă parte, dacă ceea ce căutați este un scroll orizontal, va trebui să setați prioritatea ‘Equal Widths Constraint’ la 250.

Permite un scroll vertical.

Permite o defilare orizontală.

4. Vizualizarea de defilare este acum configurată și gata de utilizare! Acum puteți începe să vă adăugați conținutul, dar trebuie să țineți cont de faptul că înălțimea „Content View” nu poate fi ambiguă. Acest lucru înseamnă că fiecare vizualizare pe care ați avut-o trebuie să aibă definită o constrângere de înălțime (înălțime egală cu X sau mai mică sau egală cu X) și că toate componentele (sau cel puțin ar trebui să aveți o linie continuă de componente de sus în jos) trebuie să aibă definită o spațiere verticală între ele.

În plus, componentele cele mai de sus și cele mai de jos trebuie să aibă o spațiere de sus și, respectiv, o spațiere de jos față de „Content View”.

5a) Vertical ScrollView – Exemplu de configurare a componentelor

.