Share
Sympli este un serviciu care simplifică conversia unei interfețe utilizator create profesional într-un format compatibil cu aplicația (de exemplu, storyboard pentru iOS sau XML pentru Android). Funcționează de la transferul de proiectare în Sketch și Photoshop la implementarea pentru Android, iOS sau web. Dacă nu ați lucrat cu Sympli și doriți să aflați mai multe despre modul în care facilitează distribuirea design-ului către dezvoltatori, vă rugăm să citiți articolul nostru despre Envato Tuts +, care introduce Sympli din perspectiva designerului. Vom avea și o altă piesă despre Sympli care va ieși în curând și care va acoperi aspecte mai ample despre modul în care dezvoltatorii pot utiliza Sympli pentru o implementare mai rapidă în cadrul aplicațiilor Android Studio și Xcode.
În acest articol, vă voi arăta cum, ca dezvoltator, să luați desenele de interfață create cu Sympli și să le importați cu ușurință în Xcode pentru aplicațiile dvs. iOS.
Atunci când utilizați Sympli gratuit, puteți avea un singur proiect care poate conține multe modele în cadrul acestuia. Dacă doriți să urmați, există un document PSD (document Photoshop) inclus împreună cu fișierele de proiect finalizate pe GitHub pentru acest tutorial, pe care îl vom folosi ca design. În caz contrar, dacă nu aveți Photoshop și lucrați cu un designer, să-i importați design-ul PSD sau Sketch într-un proiect Sympli iOS care să vă împărtășească și să vă alăturați pe porțiunea Xcode a tutorialului.
Pentru a crea un proiect, accesați site-ul Web Sympli și conectați-vă (sau înregistrați-vă și verificați un cont nou dacă nu aveți deja unul). Odată ce v-ați conectat, ar trebui să fiți adus la dvs. proiecte cu următorul mesaj în mijloc:
Click pe Creați un nou proiect și setați detaliile noului dvs. proiect la următoarele:
Puteți să vă apelați noul dvs. proiect indiferent de ce doriți, dar, din cauza PSD furnizat, trebuie să vă asigurați că ați setat Platformă la iOS și Rezoluţie la @ 2x.
În primul rând, pentru a adăuga PSD la proiectul Sympli, descărcați pluginul Sympli Photoshop și instalați-l. Odată ce pluginul a fost instalat, deschideți fișierul PSD descărcat și faceți clic pe butonul Sympli din bara de instrumente Photoshop din dreapta:
Dacă nu puteți găsi acest buton, pluginul poate fi deschis și prin navigarea către Fereastră> Extensii> Sympli în bara de meniu. Veți avea nevoie inițial să vă conectați la Sympli, iar odată ce veți avea, trebuie să apară următorul ecran:
Cu Interface.psd fișierul deschis (așa cum se arată în partea de sus a ferestrei pluginului Sympli), tot ce trebuie să faceți este să faceți clic pe Sincronizare pentru a încărca interfața dvs. în proiectul dvs..
Acum, odată cu proiectul și designul nostru înființat, suntem gata să începem să lucrăm în Xcode.
În primul rând, va trebui să descărcați pluginul Sympli pentru Xcode. Odată ce a descărcat, deschideți .dmg fișier și rulați programul de instalare.
Acum puteți rula Xcode ca normal. Prima dată când deschideți Xcode după instalarea Sympli, veți vedea următoarea alertă:
Asigurați-vă că apăsați Încărcați pachetul pentru a permite caracteristicile Sympli în Xcode.
După această configurare foarte simplă, sunteți gata să începeți să utilizați Sympli!
Sympli poate fi utilizat imediat cu orice proiect existent, dar pentru acest tutorial voi incepe sa va proaspat de la iOS> Application> Application Single View șablon. Dacă urmăriți, puteți crea propriul dvs. proiect din acest șablon.
În primul rând, veți vedea că există un nou buton în colțul din dreapta sus al ferestrei Xcode:
Faceți clic pe acest buton și va apărea promptul care vă va permite să vă conectați la contul dvs. Sympli:
După ce v-ați conectat cu succes, ar trebui să vedeți toate proiectele listate în panoul Sympli din fereastra Xcode:
Faceți clic pe proiectul în care doriți să încărcați interfața și apoi faceți clic din nou pe designul pe care doriți să îl utilizați în următorul ecran:
Înainte de a începe crearea interfeței cu Sympli, deschideți proiectul Main.storyboard fișier, ștergeți controlerul de vizualizare existent și trageți de la un controler de navigare Biblioteca de obiecte. Pentru a facilita lucrul cu interfața, schimbați și clasa de mărime Lățime compactă și Înălțime regulată. Tabloul de bord ar trebui să arate astfel:
Înainte de a începe să trageți în elemente de interfață, faceți clic pe butonul din colțul din dreapta sus al panoului Sympli și selectați Importați active opțiune:
Veți fi afișat următorul prompt:
Această solicitare vă permite să alegeți și să alegeți activele pe care doriți să le importați în proiectul dvs. În mod implicit, Sympli va importa toate activele dvs. la toate dimensiunile necesare în principalele dumneavoastră proiecte Assets.xcassests catalog.
Acum este momentul să începem să creăm interfața noastră! Un lucru important este faptul că, în timp ce PSD-urile pot să pară identice cu interfața iOS, Sympli poate crea numai elemente de interfață de bază, cum ar fi UIView, UIImageView, și UIButton. Pentru afișări generate de platformă și de sistem, cum ar fi UINavigationBar și UITableView, va trebui să creați și să le configurați manual în tabloul de bord.
În primul rând, vom configura configurația tabelului nostru. Faceți clic pe vizualizarea tabelului dvs. în tabloul de bord și în Inspector de marime, Seteaza Înălțimea rândului la 90:
Puteți vedea dimensiunile specificate de design făcând clic pe oricare dintre elementele de interfață din panoul Sympli. În acest caz, dacă faceți clic pe oricare dintre elementele de vizualizare a tabelului, veți vedea o înălțime a rândului 90 pt:
Deoarece vom crea o singură celulă și apoi reutilizăm, trebuie să creăm cea inițială cu toate elementele de interfață necesare. Pentru a face acest lucru, vom copia elementele de interfață de la ultimul Imagini element de vizualizare tabel.
Vizionările dintr-un design Sympli pot fi trase și aruncate direct în tabloul de bord. În mod implicit, când este plasat în scenariul dvs., Sympli poziționează elementul dvs. pentru a avea aceeași poziție ca și în originalul PSD. Pentru cele mai multe interfețe, acest lucru funcționează bine, dar pentru celulele tableview acest lucru poate fi dificil deoarece acestea sunt cel mai adesea plasate din limitele celulei pe care o editați.
Din această cauză, poate fi mai ușor să utilizați interfața Sympli pentru a aplica anumite părți ale designului dvs. într-o vizualizare. Acest lucru se poate face selectând un element din panoul Sympli și făcând clic pe aplica buton pe multe atribute ale vizualizării, cum ar fi culoarea, mărimea și marginea fundalului. Când faceți clic pe aplica, atributele sunt atribuite imediat vizualizării selectate în mod curent. Încercați acest lucru trăgând o vizualizare în celula de vizualizare a tabelului, selectând pătratul de previzualizare roșu din Sympli și apoi aplicând atributele de dimensiune, fundal și aspect:
Rețineți că atunci când mergeți pentru a aplica culoarea de umplere, puteți alege una dintre cele două Text sau fundal. Selectați Text atunci când utilizați o etichetă, o vizualizare text sau ceva similar.
În mod similar, pentru etichete, Sympli extrage textul și detaliile fontului din Photoshop sau Sketch pentru a vă trage cu ușurință sau aplica pe alte etichete din interfața dvs.:
Folosind interfața intuitivă Sympli, este foarte ușor să creezi o interfață de aplicație într-un storyboard dintr-un fișier Sketch sau PSD. Odată ce ați adăugat toate elementele de interfață, totuși, depinde de dvs. să implementați aspectul automat și să creați constrângeri pentru toate opiniile dvs. Sympli simplifică procesul de trecere de la etapa de proiectare la etapa de dezvoltare completă.
În timp ce Sympli este destinat în primul rând pentru a fi folosit în Xcode cu fișiere storyboard, acesta oferă, de asemenea, o caracteristică foarte mică dar foarte utilă de programare.
Dacă editați un fișier de cod cu Sympli deschis, când plasați mouse-ul peste un atribut color, un mic copie butonul va apărea. Când faceți clic pe aceasta, Sympli va copia codul necesar pentru a crea o UIColor obiect reprezentând acea culoare în clipboard. Puteți apoi să inserați acest cod direct în codul dvs., care este mult mai rapid decât căutarea valorilor RGB pentru o culoare și apoi tastarea manuală.
De asemenea, este important să rețineți că în partea superioară a barei laterale a Sympli, puteți selecta limba de programare pe care o utilizați pentru a putea crea codul corect:
În general, Sympli vă face mult mai ușor, ca dezvoltator, să copiați și să implementați o interfață de utilizator a designerului. În timp ce unele lucrări specifice legate de platformă trebuie încă rezolvate în ceea ce privește elementele de interfață automată și interfața specializată, Sympli elimină o mulțime de procese manuale dificile, cum ar fi potrivirea exactă a culorilor și dimensiunilor.
Ca întotdeauna, vă rugăm să aveți grijă să lăsați comentariile și comentariile dvs. în comentariile de mai jos. Nu uitați să consultați celălalt tutorial despre Sympli și să fiți atenți la mai multe!
Accentsconagua