Share
Apple a împins dezvoltatorii să creeze aplicații universale iOS de ceva timp. La WWDC 12, a fost lansat Auto Layout pentru iOS și îmbunătățiri urmărite pentru acesta în iOS 7. Și acum, cu iOS 8, a fost introdus design adaptiv, care include mai multe aplicații API noi și avansuri de interfețe Builder pentru a promova dezvoltarea binarelor universale.
În acest tutorial, ne vom uita la ceea ce înseamnă designul adaptiv și cum să folosim unele dintre conceptele sale. Până la sfârșitul tutorialului, veți putea utiliza designul adaptiv pentru a crea aplicații universale utilizând un flux de lucru intuitiv. Vom folosi noile clase de mărime pentru a crea o aplicație fictivă pentru un magazin de calculatoare care funcționează pe toate dispozitivele.
Proiectul adaptiv cuprinde mai multe idei și tehnici noi, în loc să fie un singur API singular. Unele componente ale designului adaptiv includ colecții de trăsături, clase de mărime, fonturi adaptive, Auto Layout și multe altele. În centrul său, designul adaptiv există pentru a ajuta dezvoltatorii să creeze cu ușurință aplicații universale și localizate.
Dacă ați dezvoltat aplicații pentru iOS de mai mulți ani, probabil că ați realizat prima mana de ce designul adaptiv poate fi de ajutor. Mastile de auto-redresare se desprind rapid, tinand cont de orientari pot fi plictisitoare, iar dezvoltarea diferitelor trasee de cod bazate pe tip de dispozitiv nu este scalabil. Proiectul adaptat își propune să abordeze toate aceste aspecte.
Acum că am identificat ce este designul adaptiv și de ce ar trebui să îl folosim, descărcați proba de proiect pentru a începe.
Clasele de mărime sunt caracteristica marquee a designului adaptiv. Utilizarea acestora vă permite să eliminați codul și logica care au adresat mai multe dimensiuni ale ecranului, orientări sau dispozitive specifice. De asemenea, este ușor să ai dreptate unu pentru toate dispozitivele disponibile.
Există două tipuri de clase de mărime, compact și regulat. Fiecare clasă de dimensiuni poate fi reprezentată orizontal și vertical și fiecare dispozitiv are o clasă de mărime pentru ambele orientări. O dimensiune obișnuită reprezintă o cantitate "mare" de ecran imobiliar, cum ar fi pe un iPad. De asemenea, sunt incluse paradigme de interfață care oferă iluzia de spațiu în exces, cum ar fi vederile de defilare pe un iPhone.
Pe de altă parte, dimensiunea ecranului "compact" înseamnă o cantitate mai mică de cameră disponibilă. iPhone sau iPod Touch, în general, se va încadra în această categorie. Cu siguranță nu este o regulă. De exemplu, iPhone 6 Plus suportă clasa de dimensiuni normale orizontal. Următorul tabel listează dispozitivele iOS și clasa lor de mărime respectivă:
| Vertical | Orizontal | |
| iPhone Portret | Regulat | Compact |
| iPhone Peisaj | Compact | Compact |
| iPhone 6 Plus Peisaj | Compact | Regulat |
| Portret iPad | Regulat | Regulat |
| iPad Peisaj | Regulat | Regulat |
Deschide Main.storyboard în cadrul proiectului. Veți observa că pânza este în formă de dreptunghi. În timp ce la început, în primul rând, aceasta afișează o componentă de bază a designului adaptiv. Privind spre partea de jos a constructorului de interfață, veți observa un buton care spune Orice haină.
Asta înseamnă Orice lățime, orice înălțime, care indică faptul că orice modificare a interfeței utilizatorului se aplică pentru fiecare clasă de dimensiuni. Dacă faceți clic pe buton, apare o grilă care vă permite să comutați între diferite clase de mărime:
În exemplul de mai sus, Lățime compactă Inaltime compactă este selectat și există un punct verde în grila albastră. Punctul verde arată ce clase de mărime sunt reprezentate. În acest caz, modificările se aplică numai iPhone-urilor de 3,5, 4 și 4,7 inch în peisaj.
Observați că există o mică diferență în formulare, deoarece Interface Builder folosește termenii lăţime și înălţime întrucât clasele de mărime utilizează termenii orizontală și vertical. Lățimea corespunde orizontal și înălțimea corespunde vertical.
Dacă ați schimbat clasa de dimensiuni selectată în prezent, asigurați-vă că reveniți la Orice lățime | Orice înălțime.
Glisați o vedere de imagine pe panza controlerului de vizualizare din Biblioteca de obiecte. Utilizarea Inspector de mărime, setați-o X poziția la 0 puncte și a lui Y poziția la 72 puncte. Seteaza lăţime la 600 puncte și înălţime la 218 puncte. Deschide Latribute Inspector și schimbați vizualizarea mod la aspect potrivit și imagine la "Laptop"Pânza dvs. ar trebui să arate ca imaginea de mai jos:
Deschideți Biblioteca de obiecte încă o dată și trageți aeticheta pe pânză. Deschideți Inspector de mărime și setați eticheta X poziția la 16 puncte și a lui Y poziția la 312 puncte. Pentru mărime, setați-l lăţime la 568 puncte și a lui înălţime la 242 puncte.
În Atribuții Inspector, efectuați următoarele modificări:
Acum vom adăuga constrângeri pentru etichetă și vizualizarea imaginilor. În partea de jos a interfeței Builder, faceți clic pe Resetați la Condiții sugerate sub Toate vizualizările în controlerul de vizualizare secțiune. Dacă opțiunea este gri, asigurați-vă că este selectată una din vizualizările din panza.
Din moment ce vizualizarea de imagini are același fundal alb ca și vizualizarea care conține, vom schimba culoarea de fundal a vederii pentru a face mai ușor diferența dintre cele două. Selectați Vedere de la schița documentelor și schimba-l culoare de fundal la Tabelul de grup Vizualizează culoarea de fundal.
În partea de sus a Xcode, selectați iPad Retina de utilizat pentru simulatorul iOS. Creați și rulați aplicația apăsând Command + R. Aplicația pare să arate bine pentru iPad, dar dorim să ne asigurăm că acesta se afișează corect pe fiecare dispozitiv.
Construirea și difuzarea aplicației doar pentru a vedea cum se comportă interfața dvs. de utilizator poate fi o sarcină plictisitoare. Din fericire, Xcode 6 a adăugat posibilitatea de a obține o redare live a interfeței dvs. de utilizator pe orice dispozitiv în orice orientare. Acest lucru ne ajută să rezolvăm problemele legate de aspectul automat mult mai rapid decât executarea aplicației în Simulatorul iOS de fiecare dată.
În partea de sus a Xcode, faceți clic pe Editor asistent buton.
Aceasta împarte editorul Xcode în două panouri. În panoul din dreapta, selectați Automat> Previzualizare> Panoul principal în bara de salt.
Interface Builder prezintă acum o previzualizare live a interfeței utilizator pe un iPhone de 4 inch. Așa cum era de așteptat, interfața cu utilizatorul este mai puțin decât ideală pe iPhone. Dacă nu vedeți nimic în previzualizare, faceți clic pe controlerul de vizualizare din panoul din stânga pentru al actualiza.
În panoul din dreapta, faceți clic pe + butonul din partea de jos vă permite să adăugați mai multe dispozitive pentru previzualizare. Continuați și adăugați iPad-ul la previzualizare.
Plasați cursorul pe iPhone în editorul asistent spre partea de jos. În partea stângă a numelui dispozitivului, există un buton care comută orientarea curentă. Faceți clic o dată pentru a comuta previzualizarea iPhone în orientare peisaj.
Cu orientarea în peisaj, interfața cu utilizatorul pare chiar mai rău. Afișarea imaginii nu este afișată deloc și textul etichetei este prea mare.
Pentru a rezolva interfața cu utilizatorul, vom adăuga unele constrângeri care sunt specifice unei anumite clase de dimensiuni. Acesta este un alt avantaj al designului adaptiv. Putem spune interfeței cu utilizatorul modul în care ar trebui să-și expună punctele de vedere pentru anumite clase de mărime, folosind același scenariu. Înainte, acest lucru ar necesita de obicei folosirea a două tablouri de scenarii diferite și încărcarea celei corecte în timpul rulării.
Vom adăuga mai întâi constrângeri care ar trebui să funcționeze pentru majoritatea dispozitivelor și să le rafinați de acolo. Începeți prin eliminarea constrângerilor adăugate mai devreme făcând clic pe orice vizualizare în panza și selectând Editor> Rezolvați problemele de configurare automată> Toate vizualizările din Controller vizualizare - Constrângeri clare.
Selectați vizualizarea de imagini, faceți clic pe Alinia buton, alegeți Centru orizontal în container, și faceți clic pe Adăugați o constrângere.
Deschideți constrângerea pe care tocmai am adăugat-o în Inspector de mărime din dreapta și faceți dublu clic pe acesta pentru ao edita.
Constrângerea are centrul de supraveghere egal cu centrul de vizualizare a imaginilor, dar vrem contrariul. Clic Al doilea element și alegeți Reverse primul și al doilea element pentru a corecta problema.
Apoi, apăsați Controlează și trageți din vizualizarea imaginii la Vedere în interiorul conturului documentului din stânga și selectați Equal Heights. Selectați constrângerea din Inspector de mărime și schimba constrângerile coeficient la 0.4. Aceasta va forța înălțimea vederii imaginii să fie egală fie cu înălțimea superviziei, fie cu cel puțin 40% din aceasta, oricare ar fi mai scurtă.
Apoi, faceți clic pe bolț și alegeți top și fund distanța până la cel mai apropiat vecin. Pentru fund spațiere, introduceți 18 puncte. Spațiul superior ar trebui să fie deja setat la 0 puncte. Asigura-te Constrângeți la marje este necontrolată, deoarece nu vrem să încurcăm în jurul vederii. Clic Adăugați 2 constrângeri în partea de jos pentru a adăuga constrângerile.
Faceți dublu clic pe Spațiul inferior constrângere în Inspector de mărime să o editați. Schimba Relație la Mai mare decât egal. Pentru a finaliza constrângerile din imaginea imaginii, Controlează și trageți din vizualizarea imaginii până la etichetă și alegeți Equal Heights.
Constrângerile pentru afișarea imaginii ar trebui să arate astfel:
Datorită constrângerilor adăugate la afișarea imaginii, eticheta are deja înălțimea și spațierea verticală din afișarea imaginii adăugată. Selectați eticheta și faceți clic pe bolț pentru a adăuga o constrângere de spațiere de conducere, de tracțiune și verticală, așa cum se arată în imaginea de mai jos.
Dacă previzualizați aplicația acum în editorul asistent, constrângerile au făcut lucrurile mult mai bune. Cu toate acestea, există încă o problemă atunci când aplicația folosește o clasă orizontală compactă, după cum puteți vedea mai jos (la mijloc).
În acest caz, ar fi frumos să aveți vizionarea imaginii și să etichetați unul lângă celălalt în loc de celălalt.
Utilizarea mărimea clasei comutator din partea de jos, selectați Lățime compactă Inaltime compactă. Bara se transformă într-o nuanță de albastru pentru a indica că editați interfața de utilizator pentru o anumită clasă de mărime.
Selectați afișarea imaginii, deschideți Inspector de mărime, și actualizați cadrul, după cum se arată în imaginea de mai jos.
Apoi, selectați eticheta și actualizați cadrul acesteia în Inspector de mărime așa cum se arată mai jos.
Cu eticheta selectată și cu Inspector de mărime deschideți, selectați constrângerile etichetei și le eliminați apăsând Șterge. Puteți selecta mai multe constrângeri ținând apăsată tasta Schimb cheie. Acest lucru va elimina constrângerile pe care le-am adăugat până acum, dar numai pentru această clasă de dimensiuni.
Faceți același lucru pentru vizualizarea imaginilor selectând-o, deschizând Inspector de mărime, selectând constrângerile sale și apăsând Șterge. Acum putem adăuga constrângeri pentru a asigura că imaginea și eticheta sunt poziționate una lângă alta.
Din fericire, Xcode poate să identifice cu ușurință aceste constrângeri pentru noi. Cu afișarea imaginii sau cu eticheta selectată, alegeți Editor> Rezolvați problemele legate de aspectul automat> Toate vizualizările din Controller vizualizare - Resetați la constrângerile sugerate.
Deschide Inspector de mărime pentru vizualizarea imaginii. Veți vedea că există mai multe constrângeri enumerate, dar unele sunt grele și unele nu sunt. Aceasta indică ce restricții sunt active pentru clasa de mărime curentă.
Dacă faceți dublu clic pe oricare dintre ele, secțiunea de jos ne arată ce clase de mărime sunt active pentru constrângeri. Imaginea de mai jos arată că restricția este instalată pentru Lățime compactă Inaltime compactă și dezactivat pentru Lățime regulată Înălțime regulată. Dând clic pe X sau + butonul permite sau dezactivează constrângerea pentru clasa de dimensiuni dată.
Deschide previzualizare editor asistent din nou și adăugați un iPhone de 3.5 inch în modul peisaj dacă nu există deja unul. Putem vedea că am realizat un aspect complet diferit pentru anumite dispozitive în orientare peisaj - toate într-o singură scenă.
Ultimul lucru care trebuie abordat este dimensiunea fontului. În timp ce cadrele reale ale imaginii și a etichetei se descurcă frumos, fontul poate fi uneori trunchiat. Proiectul adaptiv a adăugat noi opțiuni dezvoltatorilor pentru a gestiona acest tip de scenariu.
Selectați eticheta și deschideți Atribuții Inspector pe dreapta. Sub autoShrink, Selectați Scala minimă a fontului și puneți-o la dispoziție 0.4.
Modificarea scalării fontului va fi suficientă pentru majoritatea cazurilor. În aplicația noastră, conținutul etichetei poate fi citit pentru Lățime compactă Inaltime compactă dar nu este ideal. Dacă deschideți editorul asistent de previzualizare, veți observa că "p" în cuvântul "laptop" este pe propria linie.
Cu eticheta selectată, faceți clic pe + butonul de lângă Font în Atribuții Inspector. Aceasta deschide un meniu pentru a selecta o clasă de mărime pentru a aplica un anumit font. Alege Lățime compactă Inaltime compactă.
Similar constrângerilor specifice clasei de mărime, a fost adăugat un font pentru clasa de mărime pe care am selectat-o. Schimba font mărimea la 50 puncte. Acum, deschideți editorul asistent de examinare încă o dată și verificați dacă fontul arată perfect pe fiecare dispozitiv.
Abilitatea de a adăuga fonturi adaptive este incredibil de puternică. Localizarea aplicațiilor este banală atunci când puteți controla mai exact dimensiunea fontului cu text dinamic.
În timp ce clasele de mărime sunt cu siguranță o caracteristică premier, există multe alte API-uri de proiectare adaptivă și progrese pe care nu le-am acoperit în acest tutorial. De exemplu, controlorii de vizualizare se conformează acum UITraitEnvironment protocol. Aceasta înseamnă că controlorii de vizualizare au a traitCollection proprietate care urmărește ce clasă de mărime este afișată în prezent.
Dacă vă place să creați interfețe de utilizator în cod, traitCollection proprietatea vă oferă aceleași capacități ca și clasele de mărime în Interface Builder. Puteți fi anunțat când se modifică clasa de mărimi și se efectuează orice actualizare necesară a constrângerilor dvs. sau a interfeței utilizator.
Un alt API util este UIPopoverController. Dacă ați dezvoltat anterior o aplicație universală, sunt sigur că ați văzut un cod ca acesta:
UIViewController * contentVC = // conținut dacă [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) UIPopoverController * popVC = [[UIPopoverController alin] initWithContentViewController: contentVC]; [popVC presentPopoverFromBarButtonItem: element allowedArrowDirections: UIPopoverArrowDirectionAny animat: YES]; altceva [presentViewController: contentVC animat: DA finalizare: nil];
De la versiunea iOS 8, nu mai este nevoie să verificați dispozitivul pe care rulează aplicația când utilizați UIPopoverController clasă. UIPopoverController clasa acum sprijină, de asemenea, iPhone și iPod Touch.
În ceea ce privește activele imaginii, observați că există acum un a @ 3x mărimea. Acest lucru se datorează afișajului Retina HD găsit pe iPhone 6 Plus. Dacă deschideți Images.xcassets fișier în proiect, o veți vedea sub oricare dintre seturile de imagini furnizate.
Proiectul adaptiv este probabil cea mai importantă modificare a dezvoltării iOS în câțiva ani. Înainte de proiectarea adaptivă, aplicațiile universale nu au fost ușor dezvoltate, iar scalabilitatea în astfel de proiecte ar putea fi o problemă. Sperăm că ați învățat suficient din acest tutorial pentru a evita aceste probleme și pentru a încorpora designul adaptiv în propriile aplicații.
Accentsconagua