Share
Sympli er en tjeneste som forenkler konverteringen av et profesjonelt utformet brukergrensesnitt til et faktisk appkompatibelt format (for eksempel storyboard for iOS eller XML for Android). Den fungerer fra designhåndoffering i Sketch og Photoshop til implementering for Android, iOS eller web. Hvis du ikke har jobbet med Sympli og ønsker å finne ut mer om hvordan det gjør det enklere å utvikle designhåndoff til utviklere, kan du lese vår artikkel her på Envato Tuts + som introduserer Sympli fra designers perspektiv. Vi vil også ha et annet stykke på Sympli som kommer ut snart, som vil dekke bredere aspekter av hvordan utviklere kan bruke Sympli for raskere implementering på tvers av Android Studio og Xcode.
I denne artikkelen vil jeg vise deg hvordan, som en utvikler, å ta grensesnittdesign laget med Sympli og enkelt importere dem til Xcode for dine iOS-programmer.
Når du bruker Sympli gratis, kan du ha et enkelt prosjekt som kan inneholde mange motiver innenfor det. Hvis du vil følge med, er det et PSD (Photoshop-dokument) som følger med de ferdige prosjektfilene på GitHub for denne opplæringen, som vi skal bruke som vårt design. Ellers, hvis du ikke har Photoshop, og du jobber med en designer, må du importere PSD eller Sketch-design til et Sympli iOS-prosjekt for å dele med deg og bli med på Xcode-delen av opplæringen.
For å opprette et prosjekt, gå til Symplis nettside og logg inn (eller registrer deg og bekreft en ny konto hvis du ikke har en allerede). Når du har logget på, bør du bli brakt til din prosjekter skjerm med følgende melding i midten:
Klikk på Opprett nytt prosjekt og angi det nye prosjektets detaljer til følgende:
Du kan ringe ditt nye prosjekt uansett hva du vil, men på grunn av PSD som er oppgitt, må du sørge for at du setter inn Plattform til iOS og Vedtak til @ 2x.
For det første, for å legge til PSD i Sympli-prosjektet, last ned Sympli Photoshop-pluginet og installer det. Når pluginet er installert, åpner du den nedlastede PSD-filen og klikker på Sympli-knappen i Photoshops høyre verktøylinje:
Hvis du ikke finner denne knappen, kan pluggen også åpnes ved å navigere til Vindu> Utvidelser> Sympli i menylinjen. Du må først logge på Sympli, og når du har det, skal følgende skjerm vises:
Med Interface.psd fil åpen (som vist øverst i Sympli plugin-vinduet), alt du trenger å gjøre er å klikke på Sync knappen for å laste opp grensesnittet til prosjektet ditt.
Nå med vårt prosjekt og design alt satt opp, er vi klare til å begynne å jobbe i Xcode.
For det første må du laste ned Sympli-plugin for Xcode. Når den har lastet ned, åpner du .dmg fil og kjør installasjonsprogrammet.
Nå kan du kjøre Xcode som normalt. Denne gangen åpner du Xcode etter at du har installert Sympli, så ser du følgende advarsel:
Pass på at du trykker på Legg i pakken for å aktivere Symplis funksjoner i Xcode.
Etter dette svært enkle oppsettet, er du nå klar til å begynne å bruke Sympli!
Sympli kan brukes straks med et eksisterende prosjekt, men for denne opplæringen skal jeg begynne frisk fra iOS> Program> Enkeltvisningsprogram mal. Hvis du følger med så kan du lage ditt eget prosjekt fra denne malen.
Først vil du se at det er en ny knapp i øverste høyre hjørne av Xcode-vinduet ditt:
Klikk på denne knappen og følgende spørsmål vil vises for å la deg logge på Sympli-kontoen din:
Når du har logget på, bør du se alle dine prosjekter som er oppført i Sympli-panelet i Xcode-vinduet ditt:
Klikk på hvilket prosjekt du vil laste grensesnittet fra, og klikk deretter igjen på designet du vil bruke på følgende skjermbilde:
Før du begynner å lage grensesnittet med Sympli, åpner du prosjektet ditt Main.storyboard fil, slett den eksisterende visningsregulatoren, og dra i en navigasjonskontroller fra Objektbibliotek. For å gjøre grensesnittet enklere å jobbe med, endrer du også størrelsesklassen til Kompakt bredde og Regelmessig høyde. Din storyboard skal nå se ut som følgende:
Før vi begynner å dra i grensesnittelementer, klikker du på knappen øverst til høyre i Sympli-panelet og velger Importere eiendeler alternativ:
Du vil da bli vist følgende spørsmål:
Denne spørringen lar deg velge og velge hvilke aktiva du vil importere til prosjektet ditt. Sympli vil som standard importere alle dine eiendeler i alle nødvendige størrelser til prosjektets hoved Assets.xcassests katalog.
Nå er det på tide for oss å begynne å lage grensesnittet vårt! En viktig ting å merke seg er at mens PSD-ene kan se ut som et iOS-grensesnitt, kan Sympli bare lage grunnleggende grensesnittelementer som UIView, UIImageView, og UIButton. For plattformspesifikke og systemgenererte visninger som UINavigationBar og UITableView, du må fortsatt manuelt lage og konfigurere disse i storyboardet ditt.
For det første skal vi konfigurere vår tabellvisning. Klikk på tabellvisningen din i storyboardet og i Størrelsesinspektør, sett Råhøyde til 90:
Du kan se dimensjonene som er spesifisert av designet ved å klikke på et av grensesnittelementene i Sympli-panelet. I dette tilfellet, hvis du klikker på et av tabellvisningen, ser du en radhøyde på 90 pt:
Siden vi bare skal lage en celle og deretter gjenbruk, må vi opprette den første med alle nødvendige grensesnittelementer. For å gjøre dette, skal vi kopiere grensesnittelementene fra det siste Skjerm tabellvisningspost.
Visninger fra en Sympli-design kan enkelt slettes og slippes rett inn i storyboardet ditt. Som standard, når du er plassert i storyboardet, posisjonerer Sympli varen din for å ha samme posisjon som den gjør i den opprinnelige PSD. For de fleste grensesnitt virker dette bra, men for tabellvideoer kan dette være plagsomt da de oftest blir plassert utenfor grensen til cellen du redigerer.
På grunn av dette kan det være lettere å bruke Sympli-grensesnittet til å bruke bestemte deler av designet til en visning. Dette kan gjøres ved å velge et element i Sympli-panelet og klikke på Søke om knappen på mange attributter av visningen som bakgrunnsfarge, størrelse og grenser. Når du klikker Søke om, Attributtene tildeles øyeblikkelig til den valgte visningen din. Prøv dette ved å dra en visning til tabellvisningen din, velg den røde forhåndsvisningsfeltet i Sympli, og bruk deretter størrelsen, bakgrunnsfargen og layoutattributtene:
Vær oppmerksom på at når du går for å søke på fyllfarge kan du velge mellom enten Tekst eller Bakgrunn. Å velge Tekst når du bruker en etikett, tekstvisning eller noe lignende.
På samme måte for etiketter, utvinner Sympli tekst- og skriftdetaljer fra Photoshop eller Sketch for å enkelt dra og slippe eller søke på andre etiketter i grensesnittet ditt:
Ved hjelp av Symplis intuitive grensesnitt, er det veldig enkelt å lage et appgrensesnitt i et storyboard fra en Sketch- eller PSD-fil. Når du har lagt til alle grensesnittelementene dine, er det likevel opp til deg å implementere automatisk layout og opprette begrensninger for alle dine synspunkter. Sympli forenkler bare prosessen med overgang fra designstadiet til hele utviklingsstadiet.
Mens Sympli primært er ment å bli brukt i Xcode med storyboard-filer, tilbyr den også en veldig liten, men veldig nyttig programmeringsrelatert funksjon.
Hvis du redigerer en kodefil med Sympli åpen, når du holder musen over et fargeattributt, en liten kopiere knappen vil dukke opp. Når du klikker på dette, vil Sympli kopiere koden som kreves for å opprette en UIColor objekt som representerer den fargen til utklippstavlen. Du kan deretter lime inn dette rett inn i koden din, noe som er mye raskere enn å se opp RGB-verdiene for en farge og deretter skrive dem manuelt.
Det er også viktig å merke seg at i toppen av Symplis sidebjelke kan du velge programmeringsspråket du bruker slik at den riktige koden kan opprettes:
Samlet sett gjør Sympli det enklere for deg som utvikler å kopiere og implementere en designerens brukergrensesnitt. Selv om manuell, plattformsspesifikt arbeid fortsatt må gjøres når det gjelder autooppsett og spesialiserte grensesnittelementer, eliminerer Sympli mange kjedelige manuelle prosesser som kreves, for eksempel matchende farger og størrelser nøyaktig.
Som alltid, vær så snill å legge igjen dine kommentarer og tilbakemeldinger i kommentarene nedenfor. Husk å sjekke ut vår andre veiledning på Sympli, og hold deg oppdatert for mer!
Accentsconagua