IOS Quick Tip Opprette et UITabBar-program med Storyboards

I denne hurtigopplæringen vil jeg vise deg hvordan du raskt lager et UITabBar-program med Storyboards i Xcode 4. La oss gå!


Tutorial Preview

Ta en titt på hva jeg skal vise deg for å lage i dagens raske tips:


Starter

Som tittelen sier, vil vi i denne opplæringen opprette et fanebladprogram med Storyboards. Prosjektet vil være en enkel to-tabbed applikasjon opprettet med Xcode 4.x. Uten ytterligere ado, brann opp Xcode og opprett et nytt prosjekt. Velg et enkelt visningsprogram og gi det navnet du ønsker. For denne opplæringen, ringer jeg til min StoryboardTabBar. Når du oppretter prosjektet, må du sørge for at "Bruk Storyboard" og "Use Automatic Reference Counting" er valgt, og lagre det et sted på harddisken din, der du lett kan finne den igjen senere.

Akkurat nå har du oppsett et program som inneholder en visningskontroll og en visning. Du har også en Storyboard-fil med enkeltvisningskontrollen din. Vi må nå opprette en ny visningskontroller slik at vi kan legge til en annen fane. Gjør dette ved å gå til File> New> New File og deretter velge en UIViewController-underklasse og gi den navnet ViewController2 med en underklasse av UIViewController. Sørg for at "Målrettet for iPad" og "Med XIB for brukergrensesnitt" er begge merket av før du legger det til i prosjektet. Nå bør du ha to visningskontrollere. Selvfølgelig gjør ViewController2 ikke noe, enda fordi vi ikke har tilknyttet en visning med den.

Hvis du ikke allerede har det, gå videre og åpne MainStoryboard.storyboard i Project Navigator. Storyboards skjønnhet er at du bare kan velge den nåværende visningen og gå til Rediger> Embed In> Tab Bar Controller. Dette legger til visningen til en kontrollpanel på fanen. Hvis det virket, har du opprettet et fanebladprogram! Det inneholder imidlertid bare en fane, og vi må opprette en annen fane. For å gjøre dette må vi åpne Objektbiblioteket og søke etter en View Controller og dra det til din scene / lerret.

Nå har vi en annen visning i Storyboard. Det er imidlertid ikke en underklasse av ViewController2 ennå. Gå til Identitetsinspektøren til høyre for Xcode med visningsregulatoren valgt og gi den en klasse av ViewController2. Nå har du gitt visningen din en klasse av ViewController2, men den vises fortsatt ikke i kategorienlinjen.

For å legge til den nye visningsregulatoren i fanebladet, kontrollerer du bare Kontroll + Klikk og drar fra kontrollpanelet til den nye visningen. Dette vil danne et "forhold" og en ny kategori vil vises som viser visningen av ViewController2. Deretter velger du Relationship> viewControllers fra HUD som vises når du slipper musen fra dra. Som om du er i magi, ser du en ny fane i fanebladet kontrolleren! Nå, for å sikre at hver fane samsvarer med riktig visning, legger du til en etikett fra objektbiblioteket i hver visning og legger til noe unikt for den visningen i hver etikett.

For å sikre at alt fungerer som det skal, Kjør programmet i iOS-simulatoren (5.0), og du bør se at hver fane samsvarer med riktig visning! Dessverre ser begge fanene nederst ut ganske trist og kjedelig. La oss krydre dem med ikoner og et navn! Gå tilbake til Xcode og åpne Storyboard-sikkerhetskopien hvis den er stengt.

Velg den første visningen, og nederst bør det være en fane med bare ett element i det. Dobbeltklikk på "Element" -teksten, og du vil kunne gi den et navn. Gå videre og navngi alt du liker og gjør det samme for den andre visningskontrollen. Nå kan vi legge til et ikon slik at du kan gå over til et nettsted som Glyphish (http://glyphish.com/) og laste ned noen ganske kickin-ikoner derfra som du kan bruke i søknaden din, for denne opplæringen , Jeg bruker alternative ikoner fra App Bits (http://www.app-bits.com/free-icons/) - world.png og delivery.png. Legg til disse i prosjektet ditt ved å gå til File> Add Files to "StoryboardTabBar" og legg til filene i prosjektet ditt. Når ikonene er lagt til, dobbeltklikker du på ikonet i kategorien på visningskontrollen og deretter i Egenskapsinspektøren, velg bildet ditt fra rullegardinmenyen og gjør det samme for den andre visningen. Hvis du skal kjøre din søknad, vil du se at kategoriene har navn, men også med ikoner også!

I dette raske tipset har du vellykket opprettet et fanebladprogram og lagt til to visninger til det, alt ved å bruke Xcodes nye Storyboard-funksjon. Nå kan du bruke visningsstyrerne til å legge til innhold i visningene dine samt tilpasse deres oppførsel. Uten Storyboards ville dette ha tatt mye lenger tid for å fullføre og oppnå det samme resultatet - uansett om du gjorde det ved hjelp av Xcodes Visual Interface Builder-verktøy eller ved hjelp av kode.