Mens navigasjonsstyringsledere lar brukere navigere i hierarkisk innhold eller komplekse data ved å administrere en stabel med visningskontrollere, styrer kontrollpanelene på flippene en rekke visningskontrollere som ikke nødvendigvis har forhold til hverandre. I denne artikkelen vil vi undersøke kontrollpanelene for kontrollpanelene mer detaljert ved å lage et fanebladprogram fra grunnen av.
Introduksjon
De UITabBarController klassen er en annen UIViewController underklasse. Mens navigasjonsstyringene styrer en stabel av relaterte visningskontrollere, styrer kontrollpanelene på flippene en rekke visningskontrollere som ikke har noe eksplisitt forhold til hverandre.
De Klokke og Musikk applikasjoner på iOS er to førsteklasses eksempler på tabulatorstyrere. Akkurat som alle andre UIViewController Underklasse, en kontrollpanel kontrollerer en UIView forekomst.
Visningen av en kontrollpanel på fanen består av to undervisninger:
fanebladet nederst i visningen
Visningen av en av visningskontrollerne styrer kontrollpanelet på kontrollpanelet
Før vi begynner
Det er noen advarsler å være oppmerksom på når du arbeider med kontrollpaneler på tavla. Selv om forekomster av UITabBar kan bare vise fem faner, UITabBarController klassen kan klare flere visningskontrollere. Når en kontrollpanel på kontrollpanelet styrer mer enn fem visningskontrollere, er kategorien for den siste kategorien i kategorien Mer.
De ekstra visningskontrollene kan nås via denne kategorien, og det er også mulig å redigere posisjonen til kategoriene i fanefeltet.
Selv om kontrollpanelene på tabulatorene håndterer en visning, er ikke programmet ditt i stand til å kommunisere direkte med en fanebladkontrollerens visning.
Hvis du bestemmer deg for at en kontrollpanel på kontrollpanelet er det riktige valget for et program, må kontrollpanelet på skjermbildet være root-kontrolleren i programvinduet. Rødvisningen til programvinduet er med andre ord alltid flippen til kontrollpanelet. En kontrollpanel for kategorienfelt skal aldri installeres som et barn i en annen visningsregulator. Dette er en av de viktigste forskjellene med navigasjonskontrollere.
Tabbed Library
I denne artikkelen besøker vi Bibliotek søknad som vi bygde i forrige artikkel. Ved å gjøre det, kan vi gjenbruke flere klasser og komme raskere opp. I tillegg vil det vise deg at navigasjonskontrollere og kontrollpanelene på tabulatorene er ganske forskjellige, og at de brukes i forskjellige situasjoner og bruker tilfeller.
Søknaden som vi skal bygge i denne leksjonen vil bli navngitt Tabbed Library og vil være basert på UITabBarController klasse. Mens vi bygger Tabbed Library søknad, vil du legge merke til at bruken av en kontrollpanel på kontrollpanelet tvinger applikasjonen i et meget spesifikt brukergrensesnittparadigm som gir liten fleksibilitet. Tabulatorens kontroller er utrolig nyttig, men du må godta at de legger begrensninger på søknadens brukergrensesnitt til en viss grad.
Åpne Xcode, opprett et nytt prosjekt (Fil> Nytt> Prosjekt ... ), og velg Tom søknad mal.
Gi navnet navnet på prosjektet Tabbed Library, Tilordne et organisasjonsnavn og firmanavn, og sett inn enheter til iPhone. Fortell Xcode hvor du vil lagre prosjektet og trykke Skape.
Selv om Xcode inneholder a Tabbed Application mal, foretrekker jeg å starte med en tom søkemaler slik at du forstår hvordan de ulike stykkene av puslespillet passer sammen. Du vil legge merke til at fanestyrene ikke er så kompliserte.
Tar en start på hovedet
Når Tabbed Library Programmet er ferdig, vil kontrollpanelet på fanebladet styre seks visningskontrollere. I stedet for å skape hver visningskontrollerklasse fra begynnelsen, skal vi snyte litt ved å gjenbruke visningskontrollklassene som vi opprettet i forrige artikkel.
I tillegg lager vi flere forekomster av samme visningskontrollerklasse for å spare oss litt tid. Målet med denne artikkelen er ikke å lage en mengde visningskontroller klasser. På dette tidspunktet bør du være ganske kjent med hvordan det fungerer.
Last ned kildekoden fra forrige artikkel, og åpne Xcode-prosjektet som er inkludert i kildefilene i et nytt Finder-vindu. Finn TSPAuthorsViewController, TSPBooksViewController, og TSPBookCoverViewController klasser og dra dem til ditt nye prosjekt. Pass på å kopiere filene til det nye prosjektet ved å merke av i boksen merket Kopier elementer til målgruppens mappe (om nødvendig) og ikke glem å legge til filene i Tabbed Library mål.
I tillegg til disse tre klassene må vi også kopiere mappen med ressurser som inneholder Books.plist og bildefilene, inn i vårt nye prosjekt. Dra mappen som heter ressurser inn i vårt prosjekt og bruk de samme innstillingene som vi pleide å kopiere klassefilene. Vi er nå klare til å instantiere programmets kontrollpanel for kontrollpanel og fylle den med sin første visningskontroller.
Legge til en tabulatorkontroller
Å legge til en kontrollpanel på fanen er enkelt. Åpne prosjektets hovedfortegnelse, Main.storyboard. Vent litt. Hvor er historien min? Fordi vi valgte det Tom søknad mal, gav Xcode oss ikke et storyboard.
Legge til et Storyboard
Å velge Ny> Fil ... fra Fil menyen og velg Storyboard fra iOS brukergrensesnitt kategori til venstre.
Sett Enhetsfamilie til iPhone og navnet på storyboardet Hoved. Det er ikke nødvendig å legge til .storyboard forlengelse. Xcode vil legge til det for deg.
Vi må også fortelle Xcode at den trenger å bruke Main.storyboard som hovedgrensesnittet til søknaden. Velg prosjektet i Prosjektnavigator, Velg Tabbed Library mål fra listen over mål og sett inn Hovedgrensesnitt til Hoved eller Main.storyboard.
Før vi begynner å jobbe med storyboardet, må vi oppdatere den nåværende implementeringen av applikasjons: didFinishLaunchingWithOptions: i TSPAppDelegate klasse. Åpen TSPAppDelegate.m og oppdater implementeringen som vist nedenfor.
Du kan opprette iOS-programmer uten storyboards, men det betyr at du må eksplisitt ordne vinduet i søknaden din, som er det du så i implementeringen av applikasjons: didFinishLaunchingWithOptions:. Når du arbeider med storyboards, kommer du rett og slett tilbake JA og storyboardet gjør resten.
Legge til en tabulatorkontroller
Åpen Main.storyboard og dra a UITabBarController eksempel fra Objektbibliotek til høyre. Som standard leveres kontrollpanelet med to visningskontrollere. Imidlertid vil jeg illustrere hvordan du kan legge til visningskontrollere på kontrollpanelet på kontrollpanelet manuelt, så velg visningsregulatorene - ikke kontrollpanelet på fanen - og slett dem fra storyboardet.
Hvis du kjører programmet i iOS-simulatoren, bør du ha en faneblad nederst og en svart bakgrunn. Dette kan virke ubetydelig, men det viser hvordan kontrollpanelet fungerer. Kontrollpanelet på kontrollpanelet styrer en rekke visningsstyrere, som ligner på hvordan en navigasjonsstyring styrer en stabel med visningskontrollere.
Det vi trenger å gjøre, er å legge til noen visningskontrollere på storyboardet og legge dem til viewControllers Egenskapen til kontrollpanelet på fanen. La oss se hvordan dette virker.
Legge til visningskontrollere
Dra a UITableViewController eksempel fra Objektbibliotek til arbeidsområdet og sette sin klasse til TSPAuthorsViewController i Identitetsinspektør. Velg visningsregulatorens tabellvisning og angi nummeret på Prototype celler til 0 i Attributtsinspektør som vi gjorde i den forrige opplæringen.
For å legge til forfattere vise kontrolleren til tabulatorens kontrollerens utvalg av visningskontrollere, drar du fra kontrollpanelet til forfatterens visningskontroller mens du holder Styre nøkkel. Å velge se kontroller-under Forholdssegment kategori - fra menyen som vises.
En fanebladskontroller med en fane er ikke så nyttig, så la oss legge til en annen visningsregulator i blandingen. Dra en annen UITableViewController eksempel fra Objektbibliotek, sette sin klasse til TSPBooksViewController, og sett nummeret på Prototype celler til 0. Opprett forholdet segue som vi gjorde for forfattere se kontrolleren.
Legg til en UIViewController forekommer i arbeidsområdet og setter sin klasse til TSPBookCoverViewController i Identitetsinspektør. Legg til en UIImageView-forekomst i visningskontrolleren, som vi gjorde i forrige artikkel, og koble den til bookCoverView uttak av visningsregulatoren. Opprett forholdssegmentet med kontrollpanelet som vi gjorde for tabellvisningene.
Du kan bare opprette segler når arbeidsområdet ikke er zoomet ut, noe som kan være et problem til tider. Du kan imidlertid også opprette tilkoblinger, som segler, i navigatoren til venstre. Dette er ofte mye lettere og mindre clunky.
Bygg og kjør programmet. På dette punktet inneholder fanefeltet tre faner. Ved å trykke på en fane vises visningsregulatoren knyttet til fanen.
Har du prøvd å trykke på navnet på en forfatter i forfatterens visningskontroller? Og hvorfor er bøkervisningen kontrolleren som viser oss en tom tabellvisning? Det er på tide for noen feilsøking.
Å fikse Forfatterens visningskontroller
Når du klikker på en forfatters navn i forfatterens visningskontroll, krasjer programmet. Det første du bør gjøre når du står overfor en krasj, inspiserer Xcodes konsoll. Dette er hva det forteller meg:
2014-03-27 12: 42: 07.964 Tabbed Library [1943: 60b] *** Avsluttende app på grunn av uncaught unntak 'NSInvalidArgumentException', grunn: 'Mottaker () har ingen segue med identifikator 'BooksViewController'
Meldingen som Xcode viser i konsollen, er ikke vanskelig å dechifrere. Vi forteller visningskontrolleren å utføre en segue med identifikator BooksViewController, men den segue eksisterer ikke. Resultatet er et krasj.
Denne feilen er enkel å fikse ved å legge inn forfatterens visningskontroller i en navigasjonsstyring, opprette en segue til en forekomst av TSPBooksViewController-klassen, og navngi seguen BooksViewController. Jeg la det opp til deg som en oppgave siden vi allerede gjorde dette i forrige artikkel.
Det viktigere problemet i dette eksemplet er å forstå at de tre visningskontrollene som er koblet til kontrollpanelet for kontrollpanelet, ikke kommuniserer med hverandre. Ideen bak en kontrollpanel og en navigasjonskontroller er svært forskjellig. En navigasjonsstyring opprettholder en rekke visningskontrollere, navigasjonsstabler. Utsiktskontrollene i navigasjonsbunken har et implisitt forhold til hverandre i den forstand at de er en del av samme navigasjonsstabel.
En kontrollpanel på fanen styrer også en rekke visningsstyrere, men visningskontrollerne vet ikke om hverandre. De kan ikke kommunisere med hverandre via kontrollpanelet på fanen. I den forrige artikkelen passerte vi data fra forfatterens visningskontroller til bøkervisningskontrolleren når en forfatter ble tappet. Dette mønsteret er ikke aktuelt i en fanebladskontroller. Selvfølgelig kunne vi implementere en løsning for å vise brukeren at bøkene viser kontrolleren når en forfatter er tappet i forfatterens visningskontroller, men det er viktig at du forstår at det ikke er målet med en kontrollpanel.
Klokke- og musikkapplikasjonene på iOS er gode eksempler på hvordan en kontrollpanel på fanen skal brukes. Visningsstyrerne som styrer kontrollpanelet i musikkprogrammet, har ingen sammenheng med hverandre, bortsett fra at de viser sanger.
Før du fortsetter, må du forsikre deg om at du forstår begrepene til en navigasjonskontroller og en kontrollpanel for tabulator som de er viktige senere i denne serien.
Legge til en annen tabellvisningskontroller
La oss legge til en fjerde visningskontroller til kontrollpanelet for fanen som viser hver bok i Books.plist. Lage en ny UITableViewController underklasse og navn den TSPAllBooksViewController.
Denne visningskontrolleren vil trekke ut alle bøkene fra Books.plist og vis dem alfabetisk i en tabellvisning. Åpen TSPAllBooksViewController.m og legg til en ny eiendom bøker av type NSArray til klassen forlengelse øverst.
I visningsregulatorens viewDidLoad metode, påberoper vi oss extractBooks, en hjelpemetode som vi skal gjennomføre innen kort tid. Jeg prøver generelt å holde viewDidLoad så kortfattet som mulig ved innpakning av oppgaver i hjelpemetoder som extractBooks. Dette gjør koden enklere å lese og mer vedlikeholdsbar.
La oss inspisere implementeringen av extractBooks. Vi begynner med å lage et gjengivende array som vi skal legge til bøkene til hver forfatter i eiendomslisten. De neste to linjene bør være kjent hvis du har lest den forrige artikkelen. Vi ber applikasjonspakken for filbanen til Books.plist og bruk den til å laste innholdet av Books.plist inn i en oppstilling som heter forfattere. Vi deretter iterate over rekke av forfattere og legge til bøkene til hver forfatter til det mutable arrayet vi opprettet tidligere. For å sortere rekke bøker, oppretter vi en sorteringsbeskrivelse med en nøkkel til Tittel. Når vi sorterer bøkene etter tittel, opprettes et nytt utvalg, resultat, ved å sortere det mutable arrayet med sorteringsbeskrivelsen. Vi returnerer den sorterte listen over bøker.
Sorter deskriptorer, forekomster av NSSortDescriptor, brukes til å sortere samlinger av objekter, for eksempel arrays, ved å spesifisere egenskapen som må brukes til å sammenligne to objekter i samlingen. Du kan trygt ignorere denne delen av implementeringen av extractBooks hvis det ikke er helt klart, fordi det ikke er viktig i omfanget av denne leksjonen.
Implementeringen av UITableViewDataSource protokollmetode er veldig lik det vi så tidligere i denne serien. Ta et øyeblikk for å inspisere implementeringen av hver metode nedenfor.
Som vi så i leksjonen på tabellvisninger, må vi deklarere cellegenbrukeridentifikator og vi må også registrere en klasse for cellegenbrukeridentifikatoren.
Med den nye visningskontrollerklassen klar til bruk, gå tilbake til storyboardet, dra a UITableViewController eksempel fra Objektbibliotek, og sett sin klasse til TSPAllBooksViewController. Når tabellvisningen er valgt, angi nummeret på Prototype celler til 0 i Attributtsinspektør. Før du kjører programmet i iOS-simulatoren, må du opprette forholdssegmentet mellom kontrollpanelet og kontrollpanelet for tabellvisning vi nettopp har lagt til.
Bygg og kjør prosjektet for å se resultatet av vårt harde arbeid. Hvis du har et øye for detaljer, har du kanskje lagt merke til at tittelen på den fjerde kategorien bare vises etter at kategorien er valgt. Kan du gjette hvorfor det er?
Vis gjorde ... Ikke last
Årsaken til denne merkelige quirk er faktisk ganske enkelt. Generelt sett blir ikke en visning lastet inn i minnet før det er absolutt nødvendig. Dette betyr vanligvis at en visning lastes inn i minnet når den skal vises til brukeren.
Når Tabbed Library Programmet lanseres, den første kategorien er valgt som standard. Så lenge den fjerde kategorien ikke er valgt, av brukeren eller programmatisk, er det ikke nødvendig å laste inn visningen av den fjerde visningskontrollen. Som et resultat, viewDidLoad Metoden er ikke kalt til den fjerde kategorien er valgt, noe som igjen betyr at tittelen ikke er satt til den fjerde kategorien er valgt.
Løsningen er enkel. En bedre tilnærming er å sette tittelkontrollens tittel når visningsregulatoren er initialisert. Hvis vi setter tittelen i klassens i det Metode, vi kan være sikre på at tittelkontrollens tittel er satt i tide.
Åpen TSPAllBooksViewController.m og legg til en metode som heter initWithCoder: som vist under. Denne metoden er påkrevet av operativsystemet for å opprette en forekomst av klassen.
- (id) initWithStyle: (UITableViewStyle) stil self = [super initWithStyle: style]; hvis (selv) // Sett tittel self.title = @ "Books"; returner selv;
Dette er også en god tid å inspisere strømmen av en typisk i det metode. En initialiseringsmetode starter vanligvis med et anrop til i det metode for superklassen, i dette tilfelletinitWithCoder:. Jeg understreket hvorfor dette er viktig da vi diskuterteviewDidLoad metode tidligere i denne serien. Resultatet av [super initWithCoder: aDecoder] er tildelt til selv-, forekomsten av klassen vi jobber med.
I det neste trinnet bekrefter vi det selv- er ikke nil. Hvis selv- er satt-ikke nil-det er på tide å ytterligere konfigurere forekomsten av klassen, selv-. En initialiseringsmetode skal alltid returnere enten klasseeksemplet eller nil hvis noe har gått galt.
I hvis uttalelse i initWithCoder: vi stiller visningskontrolløren tittel eiendom for å løse problemet jeg diskuterte for et øyeblikk siden.
Det var mye teori for å fikse et trivielt problem. Imidlertid er ovennevnte forklaring en god introduksjon til et annet viktig element i kontrollpanelene for tabulatorene, fanebladsposter. For øyeblikket viser fanene på fanefeltet bare tittelen på hver visningskontroller eller, når det gjelder andre og tredje fire kontroller, en standard tittel på Punkt. I de fleste applikasjoner viser også kategoriene et lite ikon som hinting på funksjonen eller formålet med visningsregulatoren under fanen. La oss se hvordan du implementerer dette.
Tab Bar-elementer
I den forrige leksjonen skrev jeg at hver visningskontroller på en navigasjonsstabel holder en referanse til navigasjonsstyringen som styrer stabelen. Det samme gjelder for visningskontrollere som styres av en kontrollpanel på fanen. En visningsregulator som styres av en kontrollpanel på kontrollpanelet, holder en referanse til kontrollpanelet for kontrollpanelet i sin tabBarController eiendom.
I tillegg til disse egenskapene har en kontroller også en a tabBarItem eiendom, en unik forekomst av UITabBarItem klasse. Denne egenskapen brukes når visningsregulatoren er et barn på en kontrollpanel i kategorien. Et fanebladelement har en tittel, et bilde og en tagg. Etiketten er bare et heltall som kan brukes til å identifisere et fanebladelement i kategorienlinjen. Som standard er tittelegenskapens tittel arvet fra tittelegenskapen til visningskontrollen, og derfor er den første og siste fanen i Tabbed Library Søknaden har tittelen på deres respektive visningskontroller.
Åpen TSPAuthorsViewController.m og legg til en metode som heter initWithCoder: som vist under.
Vi oppretter en fanebladspost og tilordner den til visningscontrollerens tabBarItem eiendom. Initialiseringen av UITabBarItem klassen aksepterer en tittel (NSString), et bilde (UIImage), og en kode (NSInteger). Før du bygger og kjører prosjektet, last ned kildefilene i denne leksjonen og dra icon-authors.png og [email protected] inn i prosjektet ditt. Som du kanskje husker, filen med @ 2x suffiks mål enheter med en retina display, mens filen uten @ 2x suffiksen retter seg mot ikke-retina-enheter.
Merk at det ikke er nødvendig å spesifisere filutvidelsen til bildefilen når du bruker klassemetoden imageNamed: av UIImage. Generelt trenger du ikke å spesifisere hvilken versjon av fil-retina eller ikke-retina-å bruke. Basert på filnavnet og enhetens maskinvare, bestemmer operativsystemet hvilken versjon den bruker.
Jeg har også flyttet titteloppdraget til initWithCoder: metode som vi gjorde i TSPAllBooksViewController klasse. Kjør programmet enda en gang for å se resultatet.
Vi kan gjøre det samme for TSPAllBooksViewController klasse. Åpen MTAllBooksViewController.m og oppdatere initWithCoder: metode som vist nedenfor.
- (id) initWithCoder: (NSCoder *) aDecoder self = [super initWithCoder: aDecoder]; hvis (selv) // Sett tittel self.title = @ "Books"; // Sett Tab Bar Item self.tabBarItem = [[UITabBarItem alloker] initWithTabBarSystemItem: UITabBarSystemItemContacts tag: 1]; // Sett merket verdi [self.tabBarItem setBadgeValue: @ "12"]; returner selv;
I tillegg til å sette tittelkontrollens tittel, setter vi dens tabBarItem eiendom. Denne gangen bruker vi imidlertid initWithTabBarSystemItem: tag: for å konfigurere tabulatorelementet. Du kan bruke denne metoden hvis du ønsker å bruke et system som følger med tabulator. Det første argumentet i denne metoden, UITabBarSystemItem, Bestemmer både tittelen og bildet på fanebladet.
Det er også mulig å gi et tabulatorelement en merket verdi som vist i ovenfor implementering av initWithCoder:. Badgeverdien forventes å være en NSString forekomst.
Når du arbeider med kontrollpanelene på tabulatorene, må du huske på at det er root view-kontrolleren på hver kategori som bestemmer hvordan tabulatorelementet på den aktuelle fanen ser ut. For eksempel, hvis en kontrollpanelstyrer administrerer en navigasjonsregulator med en rekke visningsstyrere, er det fanebladelementet i navigasjonskontrollens rotenvisningskontroller som brukes av fanebladkontrollenhetens faneblad. De UITabBarItem klassen har noen andre metoder for å tilpasse utseende og følelse av et tabulatorelement.
Mer View Controllers
Før du avslutter denne artikkelen, vil jeg gjerne vise deg hvordan fanen ser ut når kontrollpanelet på kontrollpanelet styrer mer enn fem visningskontrollere. Som nevnt tidligere, vises bare fem faner til enhver tid, men kontrollpanelet for kontrollpanelet gir støtte for å administrere mer enn fem barnevisekontrollere.
Åpne hovedfortegnelsen og legg til to flere forekomster av UITableViewController. Opprett en forholdssigue for hver tabellvisningskontroller og kjør programmet i iOS-simulatoren for å se resultatet.
De ekstra visningskontrollerne som vi har lagt til, er ikke veldig nyttige, men de viser hvordan en kontrollpanel på kontrollpanelet styrer mer enn fem barnevisekontrollere. Tabellkontrollene gir tilgang til den femte og sjette visningskontrollen til kontrollpanelet på fanen. Brukeren har til og med gitt muligheten til å redigere stillingene til visningskontrollene i kategorienlinjen.
Konklusjon
Det er viktig å forstå at UITabBarController og UINavigationController klasser hver representerer et unikt brukergrensesnittparadigme. Denne artikkelen viser også at kontrollpanelene på tverrstangen ikke er vanskelig å mestre når du forstår komponentene som er involvert.
I neste artikkel tar vi en titt på data utholdenhet på IOS og alternativene du har som utvikler.
Share
Accentsconagua
