Creați o vizualizare Scroll cu Swift: 9 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Acum câteva luni, nu știam existența rapidă și Xcode. Astăzi am reușit să dezvolt o mică parte a aplicației pe care vreau să o creez. Am reușit să creez ceva mișto, pe care aș vrea să îl împărtășesc cu voi.

În acest tutorial vă voi duce prin procesul de construire a unei scene de vizualizare scroll, în care utilizatorii vor fi redirecționați atunci când vor să înregistreze un cont nou. Pe parcurs, mă voi asigura că vă voi oferi câteva explicații teoretice ale lucrurilor pe care le facem, astfel încât să puteți înțelege de fapt ceea ce facem.

Înainte de a face asta, să vorbim despre ce este Swift și Xcode:

1. Swift este un limbaj de programare puternic și intuitiv pentru macOS, iOS, watchOS și tvOS. Scrierea codului Swift este interactivă și distractivă, sintaxa este concisă, dar expresivă, iar Swift include caracteristici moderne pe care dezvoltatorii le adoră. Codul Swift este sigur prin design, dar produce și software care rulează rapid. Este proiectat să funcționeze cu cadrele Apple Cocoa și Cocoa Touch și cu corpul mare de coduri existente Objective-C scrise pentru produsele Apple. Este construit cu cadrul de compilare open source LLVM și a fost inclus în Xcode de la versiunea 6, lansată în 2014. Pe platformele Apple, folosește biblioteca de runtime Objective-C care permite rularea codului C, Objective-C, C ++ și Swift în cadrul unui singur program.

2. Xcode este un mediu de dezvoltare integrat (IDE) pentru macOS care conține o suită de instrumente de dezvoltare software dezvoltate de Apple pentru dezvoltarea de software pentru macOS, iOS, watchOS și tvOS.

Pasul 1: Descărcați Xcode

Xcode 10 include tot ce aveți nevoie pentru a crea aplicații uimitoare pentru toate platformele Apple. Acum Xcode și Instruments arată excelent în noul mod întunecat pe macOS Mojave. Editorul de cod sursă vă permite să transformați sau refactorizați codul mai ușor, să vedeți modificările controlului sursei alături de linia aferentă și să obțineți rapid detalii despre diferențele de cod din amonte. Vă puteți construi propriul instrument cu vizualizare personalizată și analiză de date. Swift compilează software-ul mai rapid, vă ajută să livrați aplicații mai rapide și generează binare chiar mai mici. Suitele de testare se completează de multe ori mai repede, lucrul cu o echipă este mai simplu și mai sigur și mult mai mult.

Xcode 10 include Swift 4.2, care vă compilează software-ul mai rapid, vă ajută să livrați aplicații mai rapide și generează binare chiar mai mici. Comparativ cu Swift 4.0, cel mai recent compilator Swift poate crea aplicații mari de peste două ori mai repede. * Combinat cu noul sistem de construire Xcode, fluxul de lucru de editare, construire și testare de zi cu zi este mult mai rapid. Optimizate pentru cele mai recente hardware multi-core Mac, Xcode și Swift fac o platformă de dezvoltare rapidă.

Pasul 2: Să începem

Deci, ceea ce vom face este să mergem la Xcode și să creăm un nou proiect. După ce facem clic pe un proiect nou, aplicația noastră va fi o aplicație cu o singură vizualizare. Pentru cei care nu știu, o singură aplicație de vizualizare înseamnă că va trebui să porniți totul de la zero și că va exista o singură vizualizare pe care o putem programa.

Denumiți produsul TutorialApp. Dacă sunteți un dezvoltator experimentat care publică aplicații în App Store, probabil că veți avea o echipă, dar dacă sunteți nou și nu aveți nicio aplicație publicată, puteți sări peste acest câmp. În numele organizației, puteți scrie numele companiei în cazul în care aveți unul, în cazul meu voi păstra doar MacBook Pro. Apoi, Identificatorul organizației este considerat ca un identificator unic al proiectului dvs., prin urmare, puteți scrie orice doriți. Limbajul va fi cu siguranță rapid.

Deci, apăsați pe următor și să salvăm proiectul pe desktop, astfel încât să fie ușor de accesat.

Noul proiect constă din trei fișiere, AppDelegate.swift, ViewController.swift și steaua acestui tutorial: Main.storyboard. În Informații despre implementare> Orientare dispozitiv în setările generale ale proiectului, setați Dispozitive pe iPhone. Deoarece aceasta este o aplicație doar pentru portret, debifați opțiunile Landscape Left și Landscape Right. Deschideți Main.storyboard în navigatorul de proiect pentru a-l vizualiza în editorul Interface Builder:

Nu vom face modificări în configurație și vom merge direct la storyboard-ul principal. Deoarece am creat o singură aplicație de vizualizare, am creat o singură vizualizare simplă, goală. La asta trebuie să lucrăm.

Pasul 3: Lucrul în interfața de utilizare

Terminologia oficială a storyboard-ului pentru un controler de vizualizare este „scenă”, dar puteți folosi termenii în mod interschimbabil. O scenă reprezintă un controler de vizualizare în storyboard.

Aici vedeți un singur controler de vizualizare care conține o vizualizare goală. Săgeata care arată spre controlerul de vizualizare din stânga indică faptul că este controlerul de vizualizare inițial care trebuie afișat pentru acest storyboard. Proiectarea unui aspect în editorul storyboard se face prin tragerea comenzilor din Biblioteca de obiecte (vezi colțul din dreapta sus) în controlerul de vizualizare.

Pentru a vă da seama de modul în care funcționează editorul de storyboard, trageți câteva controale din Biblioteca de obiecte în controlerul de vizualizare gol, așa cum se vede în videoclip.

Pe măsură ce glisați comenzile, acestea ar trebui să apară în conturul documentului din stânga.

Puteți crea interfața de utilizator dorită. În cazul meu, l-am folosit pe cel pe care îl vedeți în imagine.

Pasul 4: Dezvoltați un controler pentru a doua vizualizare și inițiați segmente (tranziții)

Deci, în aplicația mea, când utilizatorul apasă butonul „Înregistrează un cont nou”, vreau ca acesta să fie redirecționat către pagina contului de înregistrare. Deci, în acest scop, fiecare pagină este o scenă nouă, un nou ecran. Din acest motiv, trebuie să creăm un al doilea controler de vizualizare, pe care îl puteți găsi în biblioteca de obiecte.

Tastați controlerul de vizualizare și plasați-l lângă controlerul de vizualizare inițial. Această scenă va fi responsabilă pentru controlerul de vizualizare a registrului. Redirecționarea către acea pagină se poate face în două moduri:

1. o putem face manual când facem o conexiune de acțiune de la buton la celălalt control de vizualizare
2. o putem face programatic

Ceea ce am ales să fac este să-l realizez manual. Este simplu:

1. Faceți un clic stânga pe butonul dvs. (în cazul meu, Înregistrați un cont nou)
2. Țineți apăsată comanda și faceți clic stânga cu mouse-ul pentru ao trage pe scena controlului de înregistrare.
3. Eliberați-l acolo și alegeți „Prezentați mod”

Pasul 5: Creați o clasă de programare pentru procesul de înregistrare

Deci, acum vrem să creăm o clasă dedicată de codificare pentru noua scenă.

Pentru a face acest lucru, trebuie să parcurgeți următorii pași:

• faceți clic dreapta pe folderul proiectului
• faceți clic pe noul fișier numit clasa tactilă de cacao
• în clasă scrieți: RegisterVC
• FOARTE IMPORTANT! Asigurați-vă că subclasa trebuie să fie de tip UIViewController
• limba trebuie să fie rapidă.
• faceți clic pe următor și salvați clasa dvs. de cacao în rădăcina principală a proiectului dvs.
• Faceți clic pe storyboard-ul principal și accesați noul controler de vizualizare
• faceți clic pe butonul galben care este plasat deasupra acestuia
• în dreapta, mergeți la inspectorul de clasă și faceți o referință la Registrul VC (Costum class, class = RegisterVC

Pasul 6: Construiți glisarea orizontală a paginii

În iOS, vizualizările de derulare sunt folosite pentru a vizualiza conținut care nu se va potrivi în întregime pe ecran. Vizualizările de derulare au două scopuri principale:

Pentru a permite utilizatorilor să tragă zona conținutului pe care doresc să îl afișeze, pentru a permite utilizatorilor să meargă sau să micșoreze conținutul afișat folosind gesturile de ciupire. Un control comun utilizat în aplicațiile iOS - UITableView - este o subclasă a UIScrollView și oferă o modalitate excelentă de a vizualiza conținut mai mare decât ecranul.

Ce folosesc subpagini într-o glisare orizontală?

Ei bine, dacă aș crea 6 pagini diferite, ar însemna că trebuie să creez o clasă dedicată pentru fiecare dintre ele și nu este atât de convenabil să transmit informații de la o clasă la alta. De exemplu, când îmi scriu e-mailul și apoi fac clic pe următorul, dacă am un controler de vizualizare diferit, voi părăsi prima pagină a controlerului de vizualizare și apoi va fi prezentată a doua. În acest caz, informațiile primului controler de vizualizare trebuie transmise către următorul și apoi din nou către cel de-al treilea controler de vizualizare etc. paginile și trimiteți-le la server. Deci, acest lucru ar fi cu adevărat complex.

Deci, trecând la crearea acestui controler de vizualizare, în cazul meu, am avut 5 pagini pe care am vrut să le creez:

1. E-mail
2. Numele complet
3. Parola
4. Data de nastere
5. Gen

Aceasta înseamnă că controlerul de vizualizare pe care îl vom crea, trebuie să fie de 5 ori mai mare decât cel pe care l-am creat înainte.

Selectați controlerul de vizualizare și mergeți în colțul din dreapta sus, faceți clic pe pictograma riglei și editați dimensiunea simulată. Veți alege Freeform pentru a regla lățimea și înălțimea. Lățimea implicită a ecranului care este potrivită pentru iPhone 8 este 375, deci dacă înmulțesc 375 * 5 = 1875. Și iată, aveți un controler de vizualizare extins.

În mod similar, urmați același proces pentru toate telefoanele și dimensiunile ecranului.

Pentru a face ca vizualizarea scroll să funcționeze, avem nevoie de un obiect de vizualizare scroll. Vizualizarea Scroll oferă un mecanism de afișare a conținutului mai mare decât dimensiunea ferestrei aplicației. Faceți clic pe acest obiect, trageți-l și plasați-l în colțul din stânga sus al controlerului de vizualizare și asigurați-vă că X și Y sunt pe poziții zero și întinderea corespunde controlerului de vizualizare.

Vizualizarea Scroll ne permite doar să derulăm, nimic altceva. Apoi, trebuie să adăugăm o vizualizare de conținut, care va stoca alte vizualizări. Puteți găsi UIView - reprezintă o regiune dreptunghiulară în care desenează și primește evenimente - în biblioteca de obiecte. Pur și simplu, faceți clic și trageți-l în vizualizarea de derulare și, din nou, întindeți-l în consecință.

Selectați ecranul de derulare din panoul din stânga și vom apela alinierea 0, 0, 0, 0 și vom adăuga constrângeri. Faceți același lucru pentru vizualizarea conținutului.

Pasul 7: Dezvoltați interfața cu utilizatorul pentru subpagini ale glisării orizontale

În acest pas, trebuie să creați interfața de utilizare a paginilor secundare. Ceea ce am ales să fac este să fac un prototip în Sketch și apoi să îl construiesc în Xcode.

Pasul 8: Implementați proiectarea în Xcode

Următorul pas este implementarea acestui design în Xcode. Pentru a face acest lucru, trebuie să creați conexiuni de ieșire pentru toate subpagini și să creați alta pentru „vizualizarea mamă”, adică o conexiune de ieșire pentru întregul controler de vizualizare.

Elementele dintr-un storyboard sunt legate de codul sursă. Este important să înțelegeți relația pe care o are un storyboard cu codul pe care îl scrieți.

Într-un storyboard, o scenă reprezintă un ecran de conținut și de obicei un controler de vizualizare. Controlere de vizualizare implementează comportamentul aplicației dvs. și gestionează o singură vizualizare de conținut cu ierarhia sa de subvizualizări. Acestea coordonează fluxul de informații între modelul de date al aplicației, care încapsulează datele aplicației și vizualizările care afișează acele date, gestionează ciclul de viață al vizualizărilor de conținut, gestionează modificările de orientare atunci când dispozitivul este rotit, definesc navigarea în aplicația dvs. și implementează comportamentul pentru a răspunde la intrarea utilizatorului. Toate obiectele controlerului de vizualizare din iOS sunt de tip UIViewController sau una dintre subclasele sale.

Definiți comportamentul controlerelor de vizualizare în cod prin crearea și implementarea subclaselor de controlere de vizualizare personalizate. Apoi, puteți crea o conexiune între acele clase și scene din storyboard-ul dvs. pentru a obține comportamentul pe care l-ați definit în cod și interfața cu utilizatorul pe care ați definit-o în storyboard-ul dvs.

Xcode a creat deja o astfel de clasă la care te-ai uitat mai devreme, ViewController.swift, și a conectat-o la scena la care lucrezi în storyboard-ul tău. Pe măsură ce adăugați mai multe scene, veți crea această conexiune în inspectorul de identitate. Inspectorul de identitate vă permite să editați proprietățile unui obiect din storyboard-ul dvs. legate de identitatea obiectului respectiv, cum ar fi din ce clasă aparține obiectul.

Creați prize pentru elementele UI Outleturile oferă o modalitate de referință a obiectelor de interfață - obiectele pe care le-ați adăugat în storyboard-dvs. din fișierele de cod sursă. Pentru a crea o priză, trageți de la un anumit obiect din storyboard la un fișier controler de vizualizare. Această operație creează o proprietate pentru obiectul din fișierul controlerului de vizualizare, care vă permite să accesați și să manipulați acel obiect din cod în timpul rulării

1. Deschideți storyboard-ul, Main.storyboard.
2. Faceți clic pe butonul Asistent din bara de instrumente Xcode din colțul din dreapta sus al Xcode pentru a deschide editorul asistent. Dacă doriți să funcționați mai mult spațiu, restrângeți navigatorul de proiect și zona de utilitate făcând clic pe butoanele Navigator și Utilitare din bara de instrumente Xcode.
3. De asemenea, puteți restrânge vizualizarea conturului.

În bara de selecție a editorului, care apare în partea de sus a editorului asistent, schimbați editorul asistent din Previzualizare în Automat> ViewController.swift.

Faceți clic pe subpagină și trageți în clasa corespunzătoare din cod.

Pasul 9: Integrarea gesturilor personalizate

SWIPE GESTURE

Un gest de glisare apare atunci când utilizatorul deplasează una sau mai multe degete pe ecran într-o anumită direcție orizontală sau verticală. Utilizați clasa UISwipeGestureRecognizer pentru a detecta gesturile de glisare.

Implementarea gestului de glisare

Pasul 1: Adăugați gesturi glisante în metoda viewDidLoad ()

suprascrie func viewDidLoad () {super.viewDidLoad ()

let swipeLeft = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeLeft.direction =.stânga self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

Pasul 2: Verificați detectarea gesturilor în handleGesture () metoda func handleGesture (gest: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} else if gesture.direction == UISwipeGirureRec. left {print ("Glisați la stânga")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Glisați în sus")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Glisați în jos")}}

În aplicația mea, am vrut să folosesc swipeRight, dar am fost liber să o folosesc pe cea care este mai potrivită pentru aplicația dvs.

Acum, să implementăm acest lucru în codul nostru.

Mergem la registrul VC.swift pe care l-am creat înainte și scriem codul așa cum puteți vedea în imagini.

EXPLICAȚIA CODULUI

lăsați current_x obținerea poziției curente a ScrollView (poziție orizontală) lăsați screen_width obținând lățimea ecranului, deducând această dimensiune lăsați new_x din poziția curentă a scrollview, revin după lățimea ecranului dacă current_x> 0 până când nu este mai mult de 0 - 0 este prima pagină.

Și am terminat!

Buna treaba baieti!