Share
Sympli är en tjänst som förenklar konverteringen av ett professionellt utformat användargränssnitt till ett verkligt appkompatibelt format (t ex storyboard för iOS eller XML for Android). Det fungerar från designhandoff i Sketch och Photoshop till implementering för Android, iOS eller web. Om du inte har arbetat med Sympli och vill veta mer om hur det underlättar designöverlämning till utvecklare, läs vår artikel här på Envato Tuts + som introducerar Sympli från en designers perspektiv. Vi kommer också ha en annan bit på Sympli som kommer ut inom kort, som kommer att omfatta bredare aspekter av hur utvecklare kan använda Sympli för snabbare implementering över Android Studio och Xcode.
I den här artikeln kommer jag att visa dig hur som utvecklare att ta gränssnittsdesigner som skapats med Sympli och enkelt importera dem till Xcode för dina iOS-applikationer.
När du använder Sympli gratis kan du ha ett enda projekt som kan innehålla många mönster inom den. Om du vill följa med, finns det ett PSD (Photoshop-dokument) som ingår i de färdiga projektfilerna på GitHub för denna handledning, som vi ska använda som vår design. Annars, om du inte har Photoshop och arbetar med en formgivare, ska du importera deras PSD eller Sketch-design till ett Sympli iOS-projekt för att dela med dig och gå med på Xcode-delen av handledningen.
För att skapa ett projekt, gå till Symplis hemsida och logga in (eller registrera dig och verifiera ett nytt konto om du inte har en redan). När du har loggat in, borde du komma till din projekt skärm med följande meddelande i mitten:
Klicka på Skapa nytt projekt och ange ditt nya projekts detaljer till följande:
Du kan ringa ditt nya projekt vad som helst du vill, men på grund av PSD som tillhandahålls måste du se till att du ställer in Plattform till iOS och Upplösning till @ 2x.
För det första, för att lägga till PSD i ditt Sympli-projekt, ladda ner Sympli Photoshop plugin och installera det. När plugin har installerats öppnar du den nedladdade PSD-filen och klickar på Sympli-knappen i Photoshops högra verktygsfält:
Om du inte hittar den här knappen kan plugin öppnas genom att navigera till Fönster> Extensions> Sympli i menyraden. Du måste initialt logga in på Sympli, och när du har det ska följande skärm visas:
Med Interface.psd filen är öppen (som visas längst upp i fönstret Sympli-plugin) behöver du bara klicka på Synkronisera knappen för att ladda upp ditt gränssnitt till ditt projekt.
Nu med vårt projekt och design alla inrättningar är vi redo att börja jobba i Xcode.
För det första måste du ladda ner Sympli-plugin för Xcode. När den har laddat ner, öppna den .dmg fil och kör installationsprogrammet.
Nu kan du köra Xcode som vanligt. Första gången du öppnar Xcode efter installationen av Sympli kommer du att se följande varning:
Se till att du trycker på Ladda paketet för att aktivera Symplis funktioner i Xcode.
Efter denna mycket enkla installation är du nu redo att börja använda Sympli!
Sympli kan användas direkt med något befintligt projekt, men för denna handledning kommer jag att börja färsk från iOS> Applikation> Enkel visningsprogram mall. Om du följer med så kan du skapa ditt eget projekt från den här mallen.
Först kommer du att se att det finns en ny knapp i det övre högra hörnet av ditt Xcode-fönster:
Klicka på den här knappen och följande meddelande visas för att låta dig logga in på ditt Sympli-konto:
När du väl har loggat in bör du se alla dina projekt som listas i panelen Sympli i ditt Xcode-fönster:
Klicka på vilket projekt du vill ladda gränssnittet från och klicka sedan igen på den design du vill använda på följande skärm:
Innan vi börjar skapa vårt gränssnitt med Sympli, öppna ditt projekt Main.storyboard fil, radera den befintliga vykontrollen och dra i en navigeringskontroll från Objektbibliotek. För att göra ditt gränssnitt lättare att arbeta med, ändra storleksklassen till Kompakt bredd och Regelbunden Höjd. Din storyboard ska nu se ut som följande:
Innan vi börjar dra in gränssnittsobjekt, klicka på knappen i det övre högra hörnet av Sympli-rutan och välj Importera tillgångar alternativ:
Därefter visas följande meddelande:
Med den här prompten kan du välja och välja vilka tillgångar du vill importera till ditt projekt. Som standard importerar Sympli alla dina tillgångar i alla nödvändiga storlekar till ditt projekt Assets.xcassests katalog.
Nu är det dags för oss att börja skapa vårt gränssnitt! En viktig sak att notera är att medan dina PSD kan se ut som ett iOS-gränssnitt, kan Sympli bara skapa grundläggande gränssnittselement som t.ex. UIView, UIImageView, och UIButton. För plattformsspecifika och systemgenererade vyer som UINavigationBar och UITableView, Du måste fortfarande manuellt skapa och konfigurera dessa i din storyboard.
För det första ska vi konfigurera vår tabellvy. Klicka på din tabellvy i din storyboard och i Storleksinspektör, ställa in Radhöjd till 90:
Du kan se de dimensioner som anges av designen genom att klicka på någon av dina gränssnittsobjekt i Sympli-rutan. I det här fallet, om du klickar på någon av tabellvisningspunkterna, ser du en radhöjd på 90 pt:
Eftersom vi bara ska skapa en cell och sedan återanvända, måste vi skapa den första med alla nödvändiga gränssnittselement. För att göra detta ska vi kopiera gränssnittsobjekten från det sista Skärm tabellvisningspost.
Visningar från en Sympli-design kan helt enkelt släpas och släppas direkt in i storyboardet. Som standard placerar Sympli ditt föremål för att ha samma position som i den ursprungliga PSD när den placeras i din storyboard. För de flesta gränssnitt fungerar det bra, men för tabellvideoceller kan detta vara besvärligt eftersom de oftast placeras ut ur gränserna för cellen du redigerar.
På grund av detta kan det vara lättare att använda Sympli-gränssnittet för att tillämpa specifika delar av din design i en vy. Detta kan göras genom att välja ett objekt i panelen Sympli och klicka på Tillämpa knappen på många attribut av visningen som bakgrundsfärg, storlek och gränser. När du klickar Tillämpa, attributen tilldelas omedelbart till din aktuella valda vy. Prova detta genom att dra en vy till din tabellvynscell, välj den röda förhandsgranskningsfältet i Sympli och använd sedan storlek, bakgrundsfärg och layoutattribut:
Observera att när du går för att applicera fyllfärgen kan du välja mellan antingen Text eller Bakgrund. Välj Text när du använder en etikett, textvisning eller något liknande.
På samma sätt för etiketter extraherar Sympli text- och teckensnittsinformationen från Photoshop eller Sketch för att du enkelt kan dra och släppa eller applicera på andra etiketter i ditt gränssnitt:
Med Symplis intuitiva gränssnitt är det verkligen så enkelt att skapa ett appgränssnitt i en storyboard från en Sketch- eller PSD-fil. När du väl har lagt till alla dina gränssnittsobjekt är det fortfarande upp till dig att implementera automatisk layout och skapa begränsningar för alla dina synpunkter. Sympli förenklar bara processen att övergå från designstadiet till hela utvecklingsfasen.
Medan Sympli främst är avsedd att användas i Xcode med storyboard-filer, erbjuder den också en mycket liten men mycket användbar programmeringsrelaterad funktion.
Om du redigerar en kodfil med Sympli öppen, när du håller muspekaren över ett färgattribut, en liten kopia knappen kommer att dyka upp. När du klickar på det, kommer Sympli att kopiera koden som krävs för att skapa en UIColor objekt som representerar den färgen till ditt urklipp. Du kan sedan klistra in det här direkt i din kod, vilket är mycket snabbare än att titta på RGB-värdena för en färg och sedan skriva in dem manuellt.
Det är också viktigt att notera att högst upp i Symplis sidofält kan du välja det programmeringsspråk du använder så att rätt kod kan skapas:
Sympli gör det mycket enklare för dig som utvecklare att kopiera och implementera en designers användargränssnitt. Även om manuell, plattformsspecifik arbete fortfarande behöver göras när det gäller automatisk layout och specialiserade gränssnittsartiklar, eliminerar Sympli många av de tråkiga manuella processerna som krävs, till exempel matchande färger och storlekar exakt.
Som alltid, var noga med att lämna dina kommentarer och feedback i kommentarerna nedan. Kom ihåg att kolla in vår andra handledning på Sympli, och håll dig uppdaterad för mer!
Accentsconagua