Share
Sympli is een service die de conversie van een professioneel ontworpen gebruikersinterface naar een daadwerkelijk app-compatibel formaat vereenvoudigt (bijvoorbeeld storyboard voor iOS of XML voor Android). Het werkt van ontwerpoverdracht in Sketch en Photoshop tot implementatie voor Android, iOS of web. Als u niet met Sympli hebt gewerkt en meer wilt weten over hoe het handoff voor het ontwerp aan ontwikkelaars vergemakkelijkt wordt, lees dan ons artikel hier op Envato Tuts +, dat Sympli introduceert vanuit het perspectief van een ontwerper. We zullen binnenkort ook een nieuw stuk over Sympli downloaden dat meer aspecten zal behandelen van hoe ontwikkelaars Sympli kunnen gebruiken voor snellere implementatie in Android Studio en Xcode..
In dit artikel laat ik je zien hoe je, als ontwikkelaar, interface-ontwerpen maakt die zijn gemaakt met Sympli en deze eenvoudig kunt importeren in Xcode voor je iOS-applicaties.
Als u Sympli gratis gebruikt, kunt u één project hebben dat vele ontwerpen kan bevatten. Als je mee wilt, is er een PSD (Photoshop-document) bij de voltooide projectbestanden op GitHub voor deze zelfstudie, die we als ons ontwerp zullen gebruiken. Anders, als u geen Photoshop heeft en u werkt met een ontwerper, laat u hen hun PSD- of schetsontwerp in een Sympli iOS-project importeren om met u te delen en deel te nemen aan het Xcode-gedeelte van de zelfstudie.
Om een project aan te maken, gaat u naar de website van Sympli en logt u in (of meldt u zich aan en verifieert u een nieuw account als u er nog geen hebt). Nadat u bent ingelogd, moet u naar uw adres worden gebracht projecten scherm met het volgende bericht in het midden:
Klik op Maak een nieuw project en stel de details van uw nieuwe project in op het volgende:
U kunt uw nieuwe project bellen wat u maar wilt, maar vanwege de geleverde PSD moet u ervoor zorgen dat u het Platform naar iOS en Resolutie naar @ 2x.
Allereerst, om de PSD aan uw Sympli-project toe te voegen, downloadt u de Sympli Photoshop-plug-in en installeert u deze. Nadat de plug-in is geïnstalleerd, opent u het gedownloade PSD-bestand en klikt u op de knop Sympli in de rechterwerkbalk van Photoshop:
Als u deze knop niet kunt vinden, kunt u de plug-in ook openen door naar te navigeren Venster> Extensies> Sympli in de menubalk. U moet zich eerst aanmelden bij Sympli en als u dat eenmaal doet, verschijnt het volgende scherm:
Met de Interface.psd bestand open (zoals getoond bovenaan het Sympli plugin venster), alles wat u hoeft te doen is klikken op de Synchroniseren om uw interface naar uw project te uploaden.
Nu ons project en ontwerp volledig zijn opgezet, zijn we klaar om te gaan werken in Xcode.
Allereerst moet u de Sympli-plug-in voor Xcode downloaden. Nadat het is gedownload, opent u de .dmg bestand en voer het installatieprogramma uit.
Nu kunt u Xcode normaal uitvoeren. De eerste keer dat u Xcode opent na het installeren van Sympli, ziet u de volgende waarschuwing:
Zorg ervoor dat u op drukt Laad bundel om de functies van Sympli in Xcode in te schakelen.
Na deze zeer eenvoudige instelling bent u nu klaar om Sympli te gaan gebruiken!
Sympli kan meteen worden gebruikt met elk bestaand project, maar voor deze tutorial zal ik opnieuw beginnen met de iOS> Toepassing> Toepassing enkele weergave sjabloon. Als u meegaat, kunt u vanuit deze sjabloon uw eigen project maken.
Eerst ziet u dat er een nieuwe knop in de rechterbovenhoek van uw Xcode-venster staat:
Klik op deze knop en de volgende prompt verschijnt om u te laten inloggen bij uw Sympli-account:
Nadat u zich succesvol hebt aangemeld, moet u al uw projecten weergeven in het Sympli-venster van uw Xcode-venster:
Klik op het project waarvan u de interface wilt laden en klik vervolgens opnieuw op het ontwerp dat u op het volgende scherm wilt gebruiken:
Voordat u begint met het maken van onze interface met Sympli, opent u uw project Main.storyboard bestand, verwijder de bestaande view controller en sleep een navigatiecontroller vanuit de Objectbibliotheek. Om de interface gemakkelijker in het gebruik te maken, wijzigt u ook de grootteklasse in Compacte breedte en Normale hoogte. Je storyboard zou er nu als volgt uit moeten zien:
Voordat we beginnen met het verslepen van interface-items, klikt u op de knop in de rechterbovenhoek van het Sympli-venster en selecteert u de Activa importeren keuze:
U krijgt dan de volgende prompt te zien:
Met deze prompt kunt u kiezen welke items u in uw project wilt importeren. Standaard importeert Sympli al uw bedrijfsmiddelen in alle vereiste grootten in het hoofd van uw project Assets.xcassests catalogus.
Nu is het tijd voor ons om onze interface te maken! Een belangrijk ding om op te merken is dat, terwijl uw PSD's er identiek kunnen uitzien voor een iOS-interface, Sympli alleen basisinterface-elementen zoals UIView, UIImageView, en UIButton. Voor platform-specifieke en door het systeem gegenereerde views zoals UINavigationBar en UITableView, je zult deze nog steeds handmatig moeten maken en configureren in je storyboard.
Allereerst gaan we onze tabelweergave configureren. Klik op je tabelweergave in je storyboard en in de Grootte inspecteur, stel de Rijhoogte naar 90:
U kunt de dimensies zien die door het ontwerp zijn opgegeven door op een van uw interface-items in het Sympli-venster te klikken. Als u in dit geval op een van de items in de tabelweergave klikt, ziet u een rijhoogte van 90 pt:
Omdat we slechts één cel gaan maken en vervolgens opnieuw zullen gebruiken, moeten we de eerste maken met alle vereiste interface-elementen. Om dit te doen, gaan we de interface-items van de laatste kopiëren screenshots tabelweergave.
Meningen van een Sympli-ontwerp kunnen eenvoudig naar je storyboard worden gesleept en neergezet. Standaard plaatst Sympli je item in je storyboard om dezelfde positie te hebben als in de originele PSD. Voor de meeste interfaces werkt dit prima, maar voor tableview-cellen kan dit lastig zijn, omdat ze meestal buiten de grenzen van de cel die u bewerkt, worden geplaatst.
Hierdoor kan het eenvoudiger zijn om de Sympli-interface te gebruiken om specifieke delen van uw ontwerp op een weergave toe te passen. Dit kan gedaan worden door een item in het Sympli-paneel te selecteren en op de te klikken Van toepassing zijn knop op veel attributen van de weergave, zoals achtergrondkleur, -grootte en -grenzen. Wanneer u klikt Van toepassing zijn, de kenmerken worden onmiddellijk toegewezen aan uw momenteel geselecteerde weergave. Probeer dit uit door een weergave naar uw tabelweergavecel te slepen, het rode voorbeeldvak in Sympli te selecteren en vervolgens de kenmerken maat, achtergrondkleur en lay-out toe te passen:
Let op: wanneer u de vulkleur gaat toepassen, kunt u kiezen tussen de Tekst of Achtergrond. kiezen Tekst wanneer u een label, een tekstweergave of iets dergelijks gebruikt.
Op dezelfde manier extraheert Sympli de tekst- en lettertypegegevens uit Photoshop of Sketch zodat u ze gemakkelijk kunt slepen en neerzetten of kunt toepassen op andere labels in uw interface:
Met behulp van de intuïtieve interface van Sympli is het echt zo eenvoudig om een app-interface te maken in een storyboard van een Sketch- of PSD-bestand. Nadat u al uw interface-items hebt toegevoegd, is het echter nog steeds aan u om automatische lay-out te implementeren en beperkingen voor al uw weergaven te maken. Sympli vereenvoudigt alleen het overgangsproces van de ontwerpfase naar de volledige ontwikkelingsfase.
Hoewel Sympli voornamelijk is bedoeld om te worden gebruikt in Xcode met storyboard-bestanden, biedt het ook een erg kleine maar erg nuttige programmeergerelateerde functie.
Als u een codebestand bewerkt met Sympli open, wanneer u de muisaanwijzer over een kleureigenschap beweegt, is dit een klein getal kopiëren knop verschijnt. Wanneer u hierop klikt, kopieert Sympli de code die vereist is om een te maken UIColor object dat die kleur naar uw klembord vertegenwoordigt. U kunt dit vervolgens rechtstreeks in uw code plakken, wat veel sneller gaat dan het opzoeken van de RGB-waarden voor een kleur en deze vervolgens handmatig in te voeren.
Het is ook belangrijk op te merken dat u aan de bovenkant van de zijbalk van Sympli de programmeertaal kunt selecteren die u gebruikt, zodat de juiste code kan worden aangemaakt:
Over het algemeen maakt Sympli het voor u als ontwikkelaar veel gemakkelijker om de gebruikersinterface van een ontwerper te kopiëren en te implementeren. Hoewel er nog wat handmatig, platformspecifiek werk moet worden gedaan op het gebied van automatische lay-out en gespecialiseerde interface-items, elimineert Sympli veel van de vervelende handmatige processen die nodig zijn, zoals exact dezelfde kleuren en formaten..
Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder. Vergeet niet om onze andere tutorial over Sympli te bekijken en blijf op de hoogte voor meer informatie!
Accentsconagua