iOS 9: Staying Organisert med Storyboard Referanser
44
Del
7
Del

Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Selv om storyboards har eksistert siden iOS 5, mange utviklere er motvillige til å bruke dem i sine prosjekter. En typisk bemerkning er at storyboards er stor for små prosjekter, men bommer for større prosjekter.

Apple har tatt denne tilbakemeldingen til hjerte og løst mange vanlige problemer ved å innføre storyboard referanser. I denne opplæringen vil jeg vise deg hva storyboard referanser er og hvordan de kan hjelpe deg å bryte ned prosjektets brukergrensesnitt i håndterbare biter.

1. Problemet

Fra perspektivet en designer, storyboards er stor. De er en visuell representasjon av et prosjekts brukergrensesnitt. Interface Builder gjør legge og koble scener til en lek. Dessverre, storyboards har også en rekke ulemper.

Kompleksitet

De fleste prosjektene har en dreiebok som inneholder programmets brukergrensesnitt. Det er målet med storyboards. Høyre? Ja og nei. Det er sant at målet om storyboards er å visuelt legge ut brukergrensesnittet. Problemet er at storyboards raskt kan bli uhåndterlig og komplisert for større prosjekter.

kildekontroll

Et annet hinder når du arbeider med storyboards er samarbeid. Storyboards kan gjøre samarbeidet med gruppemedlemmer en sann utfordring. Et storyboard er lagret som én fil. Dette betyr at hver endring du eller et gruppemedlem gjør til en dreiebok påvirker den samme filen. På et tidspunkt, vil dette uunngåelig føre til flette konflikter. Dette er et mindre problem når du arbeider med XIB filer siden hver XIB fil representerer en scene av brukergrensesnittet.

2. Løsningen

Før iOS 9

Løsningen er enkel, bryte opp storyboards til et sett av mindre storyboards. Men hvordan kobler du den storyboards? Før iOS 9, vil utviklere koble storyboards i koden ved lasting av storyboard og påkalle instantiateInitialViewController () i dreieboken. Følgende kodebit viser hvordan dette fungerer
la dreiebok = UIStoryboard (navn: "DetailView", bunt: NSBundle.mainBundle ()). La viewController = storyboard.instantiateInitialViewController () hvis la viewController = viewController {self.presentViewController (viewController , animert: true, ferdigstillelse: null)}

Det tvinger utviklere å gjøre tilkoblingen i kode, noe som gjør det uklart hvor flere storyboards er tilkoblet. Det er ikke åpenbart hvordan man storyboard er koblet til en annen storyboard. La oss se hvordan storyboard referanser løse disse problemene i iOS 9.

iOS 9

Storyboard referanser er et flott tillegg til dreieboken verktøysett. I Interface Builder, kan målet for en naturlig overgang nå også være en annen storyboard. Hva mer kan en dreiebok refereres flere ganger, noe som gjør det enkelt å gjenbruke storyboards på flere steder. La oss lage en enkel prosjekt for å vise deg hvor enkelt det er å komme i gang med storyboard referanser.

3. Prosjektet Setup

I stedet for å starte med en prøve prosjekt, jeg skal vise deg hvordan du bruker storyboard referanser fra scratch. Før du fortsetter, sørg for at du har Xcode 7 installert. Storyboard referanser er kun tilgjengelig i iOS 9, som krever Xcode 7.

Åpne Xcode 7 og opprette et nytt prosjekt ved å velge New > Prosjekt ... fra Xcode Fil-menyen. Velg fanebasert Application mal fra iOS > § søknad til venstre.

Konfigurer prosjektet ved å gi den et navn og sette Devices til iPhone. For denne opplæringen, spiller det ingen rolle om du setter Språk til Swift eller Objective-C. Fortell Xcode hvor den skal lagre prosjektet og traff Opprett.

Hvis du er ny til storyboards, så du kan bli overrasket over at Xcode har skapt to storyboards for oss. Main.storyboard er prosjektets viktigste storyboard og inneholder programmets brukergrensesnitt. LaunchScreen.storyboard er et storyboard som Xcode bruker til å dynamisk lage en lansering skjerm for søknaden. Vi vil ikke bruke LaunchScreen.storyboard i denne opplæringen.

4. Opprette brukergrensesnittet

Vår dreieboken inneholder for tiden en fanelinjen kontroller og to view kontrollere. La oss gjøre det litt mer interessant ved å bygge utsiktskontrollere i et navigeringskontrollen. Velg den øverste visningen kontrolleren og velg Embed In > Navigation Controller fra Xcode Redigerings menyen. Gjør det samme for den andre visningen kontrolleren. Dette er hva storyboard skal nå se ut.

Selv om storyboard er ikke komplisert, inneholder det nok kompleksiteten vise deg hvordan storyboard referanser fungerer og hvordan de kan dra nytte dine prosjekter. Det er tid for noen refactoring.

5. Refactoring Storyboards

Når et prosjekt kodebasen blir uhåndterlig eller for komplisert å vedlikeholde, er det tid for refactoring. Refactoring betyr ganske enkelt omorganisere eller restrukturering av kodebasen for å gjøre det lettere å vedlikeholde. Dette inkluderer ofte bryte opp store biter av kode i mindre biter, modularizing kodebasen.

Mens storyboards er et flott verktøy for å lage brukergrensesnitt, storyboards kan også bli for komplisert eller for store til å vedlikeholde. I iOS 9, kan et storyboard deles opp i flere mindre storyboards. Apple refererer til denne prosessen som refactoring.

Fordi hver visning kontrolleren på fanelinjen kontrolleren kan ses som et eget brukergrensesnitt, er det fornuftig å sette hver fane på fanelinjen kontrolleren inn i en egen storyboard. Dette er veldig enkelt i Xcode 7.

Start med å velge den øverste visning kontrolleren og dens navigeringskontrollen. Fra Xcode Redigerings menyen velger refactor til Storyboard. Xcode vil be deg om å gi navn til storyboardet det handler om å skape for det valget du har gjort. Navn dreieboken FirstTab.storyboard og klikk på Lagre.

Xcode vil skape en ny dreiebok som inkluderer navigeringskontrolleren og dens rot view controller. I denne storyboard, blir navigeringskontrolleren automatisk den første visningen kontrolleren av dreieboken som du kan se i skjermbildet under.

Merk at Main.storyboard har blitt mye enklere. Navigeringskontrolleren og dens rot view controller har blitt erstattet av en dreiebok henvisning heter FirstTab. Hvis du dobbeltklikker på storyboard referanse, Xcode åpnes automatisk FirstTab.storyboard, dreieboken den refererer til.

6. Exploring Storyboard Referanser

Storyboard referanser er ganske kraftig. Et storyboard henvisning vil som standard instantiate den første visningen kontrolleren av refererte dreieboken, men det er mulig å koble til en hvilken som helst scene i dreieboken som har en dreiebok ID.

Opprett en ny UIViewController underklasse og kall den ThirdViewController. Åpne FirstTab.storyboard og dra et nytt syn kontrolleren fra objektbiblioteket til høyre. Fra objektbiblioteket, legge til en etikett til visningen av den nye visningen kontrolleren og sette tekst til tredje View. Med den nye visningen kontrolleren valgt i dreieboken, satt Class til ThirdViewController og storyboard-ID for å ThirdView i Identity Inspektør til høyre.

Leder tilbake til Main.storyboard og velge dreieboken referansen du opprettet tidligere. Åpne attributter Inspector til høyre for å se attributtene til storyboard referanse. Attributter- Inspector viser oss at dreieboken referansen viser til FirstTab storyboard. Den refererte ID er tom for øyeblikket.

Set Referert ID til ThirdView og du vil se at dreieboken referansen oppdaterer etiketten for å reflektere endringen. Kjør programmet i iOS Simulator for å se resultatet. Dette illustrerer at du kan bruke storyboard referanser å linke til enhver scene i et storyboard, selv om scenen ikke er forbundet med en naturlig overgang med andre scener i dreieboken.

Merk at vi også kan spesifisere bunt av det refereres til storyboard. Dette er spesielt nyttig hvis du trenger å koble til en scene i et storyboard av en ekstern ramme.

Før vi fortsetter vår utforskning av storyboard referanser, vil jeg gjerne påpeke at dreieboken av en dreiebok referanse kan være den samme dreieboken som referanse tilhører. Dette høres kanskje rart ut, men det kan være svært nyttig hvis du ønsker å gjenbruke visse scener i et storyboard, eller hvis du arbeider med en svært kompleks storyboard.

7. Legge Storyboard Referanser

Vi har laget FirstTab.storyboard ved å velge refactor til dreiebok fra Xcode Redigerings menyen. Storyboard referanser er også tilgjengelige fra objektbiblioteket. Åpne objektbiblioteket på høyrekanten og legger et storyboard referanse til Main.storyboard.

Velg fanelinjen kontrolleren i dreieboken og skape en naturlig overgang til dreieboken referansen ved å holde kontroll og dra til den nye storyboard referanse.

Fra menyen som kommer opp velger du vise kontrollerne fra Sivil Overgang delen.

Velg den nye storyboard referanse og satt Storyboard-ID for å FirstTab. Kjør programmet i iOS Simulator for å se resultatet. Legg merke til at den andre kategorien av fanelinjen Kontrollenheten viser den tredje visningen kontrolleren mens den tredje kategorien viser den første visningen kontrolleren innebygd i en navigeringskontrollen.

Konklusjon

Storyboard referanser er kraftige. Ikke bare gjør de storyboards håndterlig og modulær, de gjør det svært enkelt å bruke storyboards og selv koble inn storyboards på vilkårlige steder.

Jeg har stor tro på at storyboard referanser vil resultere i en mye høyere adopsjon rate av dreiebok ved utviklere. Storyboard referanser er nøyaktig hva utviklerne har spurt etter.