Share
Sympli è un servizio che semplifica la conversione di un'interfaccia utente progettata professionalmente in un vero formato compatibile con l'app (ad es. Storyboard per iOS o XML per Android). Funziona dal passaggio di progettazione in Sketch e Photoshop all'implementazione per Android, iOS o Web. Se non hai lavorato con Sympli e vuoi saperne di più su come facilita il passaggio del design agli sviluppatori, leggi il nostro articolo qui su Envato Tuts + che introduce Sympli dal punto di vista del designer. Avremo presto un altro pezzo su Sympli in uscita che coprirà aspetti più ampi su come gli sviluppatori possono utilizzare Sympli per un'implementazione più veloce su Android Studio e Xcode.
In questo articolo, ti mostrerò come, come sviluppatore, prendere i disegni di interfaccia creati con Sympli e importarli facilmente in Xcode per le tue applicazioni iOS.
Quando usi Sympli gratuitamente, puoi avere un singolo progetto che può contenere molti disegni al suo interno. Se vuoi seguire, c'è un PSD (documento Photoshop) incluso con i file di progetto completati su GitHub per questo tutorial, che useremo come nostro progetto. Altrimenti, se non hai Photoshop e lavori con un designer, falli importare il loro design PSD o Sketch in un progetto Sympli iOS da condividere con te e partecipare alla parte Xcode del tutorial.
Per creare un progetto, vai sul sito Web di Sympli e accedi (oppure registrati e verifica un nuovo account se non ne hai già uno). Una volta effettuato l'accesso, dovresti essere portato al tuo progetti schermo con il seguente messaggio al centro:
Clicca su Crea un nuovo progetto e imposta i dettagli del tuo nuovo progetto come segue:
Puoi chiamare il tuo nuovo progetto come preferisci ma, a causa del PSD fornito, devi assicurarti di aver impostato il file piattaforma a iOS e Risoluzione a @ 2x.
In primo luogo, per aggiungere il PSD al tuo progetto Sympli, scarica il plug-in Sympli Photoshop e installalo. Una volta installato il plugin, apri il file PSD scaricato e fai clic sul pulsante Sympli nella barra degli strumenti a destra di Photoshop:
Se non riesci a trovare questo pulsante, il plugin può essere aperto anche navigando Finestra> Estensioni> Sympli nella barra dei menu. Dovrai inizialmente accedere a Sympli e, una volta aperta, dovrebbe apparire la seguente schermata:
Con il Interface.psd file aperto (come mostrato nella parte superiore della finestra del plugin Sympli), tutto ciò che devi fare è fare clic su Sync pulsante per caricare la tua interfaccia sul tuo progetto.
Ora con il nostro progetto e il nostro design, siamo pronti per iniziare a lavorare su Xcode.
In primo luogo, è necessario scaricare il plug-in Sympli per Xcode. Una volta scaricato, apri il .dmg file ed esegui il programma di installazione.
Ora puoi eseguire Xcode normalmente. La prima volta che apri Xcode dopo aver installato Sympli, vedrai il seguente avviso:
Assicurati di premere Carica pacchetto abilitare le funzionalità di Sympli in Xcode.
Dopo questa semplice installazione, sei pronto per iniziare a usare Sympli!
Sympli può essere utilizzato immediatamente con qualsiasi progetto esistente, ma per questo tutorial ho intenzione di ricominciare da zero iOS> Applicazione> Applicazione vista singola modello. Se stai seguendo, puoi creare il tuo progetto da questo modello.
Innanzitutto, vedrai che c'è un nuovo pulsante nell'angolo in alto a destra della tua finestra Xcode:
Fai clic su questo pulsante e apparirà il seguente prompt per permetterti di accedere al tuo account Sympli:
Una volta effettuato l'accesso, dovresti vedere tutti i tuoi progetti elencati nel pannello Sympli della tua finestra Xcode:
Fai clic su qualsiasi progetto da cui vuoi caricare la tua interfaccia, quindi fai nuovamente clic sul disegno che desideri utilizzare nella schermata seguente:
Prima di iniziare a creare la nostra interfaccia con Sympli, apri il tuo progetto Main.storyboard file, eliminare il controller di visualizzazione esistente e trascinare in un controller di navigazione da Libreria di oggetti. Per rendere la tua interfaccia più facile da usare, cambia anche la classe di dimensione in Larghezza compatta e Altezza normale. Ora lo storyboard dovrebbe essere simile al seguente:
Prima di iniziare a trascinare gli elementi dell'interfaccia, fare clic sul pulsante nell'angolo in alto a destra del pannello Sympli e selezionare Importa beni opzione:
Verrà quindi mostrato il seguente prompt:
Questo prompt ti consente di selezionare e scegliere quali risorse vuoi importare nel tuo progetto. Per impostazione predefinita, Sympli importerà tutte le risorse in tutte le dimensioni richieste nel principale del progetto Assets.xcassests Catalogare.
Ora è il momento per noi di iniziare a creare la nostra interfaccia! Una cosa importante da notare è che, mentre i tuoi PSD possono sembrare identici a un'interfaccia iOS, Sympli può solo creare elementi di interfaccia di base come UIView, UIImageView, e UIButton. Per viste specifiche della piattaforma e generate dal sistema come UINavigationBar e UITableView, dovrai comunque crearli e configurarli manualmente nello storyboard.
In primo luogo, configureremo la nostra vista tabella. Fai clic sulla tua visualizzazione tabella nello storyboard e in Ispettore di taglia, impostare il Altezza della riga a 90:
Puoi vedere le dimensioni specificate dal disegno facendo clic su uno qualsiasi degli elementi dell'interfaccia nel pannello Sympli. In questo caso, se fai clic su una qualsiasi delle voci della vista tabella, vedrai un'altezza di riga di 90 pt:
Dato che stiamo per creare una cella e quindi riutilizzarla, dobbiamo creare quella iniziale con tutti gli elementi dell'interfaccia richiesti. Per fare questo, stiamo andando a copiare gli elementi dell'interfaccia dall'ultimo Screenshots elemento di visualizzazione tabella.
Le viste da un design Sympli possono essere semplicemente trascinate direttamente nello storyboard. Per impostazione predefinita, quando inserito nello storyboard, Sympli posiziona il tuo articolo in modo che abbia la stessa posizione del PSD originale. Per la maggior parte delle interfacce funziona bene, ma per le celle tableview questo può essere problematico in quanto sono collocati più spesso fuori dai limiti della cella che stai modificando.
Per questo motivo, può essere più semplice utilizzare l'interfaccia Sympli per applicare parti specifiche del progetto a una vista. Questo può essere fatto selezionando un elemento nel pannello Sympli e facendo clic su Applicare pulsante su molti attributi della vista come colore di sfondo, dimensioni e bordi. Quando si fa clic Applicare, gli attributi vengono assegnati immediatamente alla vista attualmente selezionata. Prova questo trascinando una vista nella cella della vista tabella, selezionando il quadrato di anteprima rosso in Sympli e quindi applicando la dimensione, il colore di sfondo e gli attributi di layout:
Si prega di notare che quando si va ad applicare il colore di riempimento è possibile scegliere tra il Testo o sfondo. Selezionare Testo quando si utilizza un'etichetta, una visualizzazione di testo o qualcosa di simile.
Analogamente per le etichette, Sympli estrae i dettagli di testo e carattere da Photoshop o Sketch per poterli facilmente trascinare e rilasciare o applicare ad altre etichette nell'interfaccia:
Utilizzando l'interfaccia intuitiva di Sympli, è davvero facile creare un'interfaccia app in uno storyboard da un file Sketch o PSD. Una volta aggiunti tutti gli elementi dell'interfaccia, tuttavia, spetta a te implementare il layout automatico e creare vincoli per tutte le visualizzazioni. Sympli semplifica semplicemente il processo di transizione dalla fase di progettazione a quella di sviluppo completo.
Sebbene Sympli sia destinato principalmente ad essere utilizzato in Xcode con i file storyboard, offre anche una funzionalità di programmazione molto piccola ma molto utile.
Se stai modificando un file di codice con Sympli aperto, quando passi il mouse sopra un attributo color, un piccolo copia il pulsante verrà visualizzato. Quando si fa clic su questo, Sympli copierà il codice necessario per creare un file UIColor oggetto che rappresenta quel colore negli Appunti. Puoi quindi incollarlo direttamente nel tuo codice, che è molto più veloce di cercare i valori RGB per un colore e poi digitarli manualmente.
È anche importante notare che nella parte superiore della barra laterale di Sympli è possibile selezionare il linguaggio di programmazione che si sta utilizzando in modo da poter creare il codice corretto:
Complessivamente, Sympli rende molto più facile per te, come sviluppatore, copiare e implementare l'interfaccia utente di un designer. Mentre alcuni lavori manuali specifici per piattaforma devono ancora essere eseguiti in termini di layout automatico e di elementi di interfaccia specializzati, Sympli elimina molti dei noiosi processi manuali richiesti, come ad esempio corrispondenza di colori e dimensioni esattamente.
Come sempre, si prega di essere sicuri di lasciare i vostri commenti e feedback nei commenti qui sotto. Ricordati di dare un'occhiata al nostro altro tutorial su Sympli e restate sintonizzati per ulteriori informazioni!
Accentsconagua