Share
Velkommen til siste avdrag i serien vår for å bygge en iPad-leser for Verdenskriget med Leaves-prosjektet. I dagens innlegg vil jeg demonstrere flere teknikker som kan brukes til å justere grensesnittet når enhetens orientering endres.
Det har vært omtrent to uker siden mitt siste innlegg i denne serien, så jeg gir en rask oversikt over hva vi har dekket så langt:
I den første opplæringen i denne serien, introduserte jeg deg til Leaves-prosjektet og viste hvordan du integrerer det med Xcode 4. Deretter viste jeg hvordan du bruker en UISlider med Leaves for å la brukerne raskt skrubbe gjennom en PDF. Til slutt viste jeg hvordan du legger til et tilpasset innholdsfortegnelse for brukere å trykke mellom kapitler.
Etter hvert av de ovennevnte innleggene, endte jeg med en meningsmåling og ba deg stemme om hvilken funksjon eller emne jeg skulle dekke neste. Som svar på den siste opplæringen ønsket flertallet av respondentene hvordan man konfigurerer lesergrensesnittet for enhetsretningsendringer, og det er det jeg skal dekke i dag som den endelige avgiften i denne serien.
Men før jeg går videre, la meg fortelle hva denne opplæringen ikke vil gjøre: Jeg vil ikke legge til noen ny, kjernefunksjonalitet til Leaves-prosjektet. Det er noen virkelig fantastiske ting du kan få til å skje hvis du er i ferd med å hacke rundt i kjerneprosjektkoden eller forking av Leaves-prosjektet på egen hånd. Jeg oppfordrer de som er involvert i samfunnet til å plukke opp fakkelen og gjøre nettopp det. Dessverre er det ikke mulig å gjøre betydelige kjerneprojektendringer i denne serien på grunn av tidsbegrensninger. I stedet vil jeg bare vise hvordan du gjør det beste med det som Leaves allerede gir, og hvordan du justerer de egendefinerte visningene og grensesnittkontrollene vi opprettet.
Dette er en videodemo av hva denne opplæringen skal lære deg hvordan du bygger:
Det første trinnet i å gjøre applikasjonsorienteringen bevisst er å spesifisere hvilke retninger WOTWViewController, Hovedprojektvisningen kontrolleren, er i stand til å støtte. Dette gjøres ved hjelp av følgende metode:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Støtte alle retninger returnere JA;
De shouldAutorotateToInterfaceOrientation: Metoden er arvet fra UIViewController og tillater hver visningskontroller å spesifisere hvilke grensesnittretninger som støttes. For denne opplæringen vil vi støtte alle dem, så jeg returnerer bare "JA". Vi kunne imidlertid teste for spesifikk UIInterfaceOrientation verdier her ved å sjekke interfaceOrientation parameter.
Hvis du ser på vårt prosjekt i simulatoren nå, vil du legge merke til at ting begynner å skifte rundt når orienteringen endres, men du vil også merke at disse standardendringene lar mye å være ønsket. Det er to grunnleggende tilnærminger som vi kan ta for å løse dette. En tilnærming ville være å hekte inn i UIViewController metoder som blir varslet når en orienteringsendring har oppstått, for eksempel didRotateFromInterfaceOrientation:, og gjør de nødvendige endringene manuelt der. En bedre tilnærming til oppsettet vårt er imidlertid å konfigurere autoresizingMask Egenskapen på grensesnittelementene våre for å tilpasse seg til skjermen endres automatisk.
Hvis du er ny til autoresizingMask eiendom, ikke bekymre deg. Du har sett det riktig i Interface Builder, der du kan konfigurere det grafisk som dette:
Det du kanskje ikke har innsett, er at du også kan angi egenskapen manuelt i kode (Merk: som hovedregel, hvis du kan gjøre det i Interface Builder, kan du gjøre det i kode), og det gjør du i stand til å kontrollere hvordan automatiserte orienteringsendringer vil finne sted. Mulige orienteringsalternativer er som følger:
Fordi det autoresizingMask Egenskapen er et heltallsmaske, du kan kombinere flere verdier til en enkelt ved å bruke bitwise OR-operatøren for å kombinere dem.
For eksempel, hvis jeg ønsket å sette myContentView å ha alle UIViewAutoresizing alternativer, jeg kunne gjøre dette:
myContentView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleBottomMargin;
Eller, hvis jeg ville myContentView å ikke ha noen autoresizing oppførsel, kunne jeg konfigurere det som slik:
myContentView.autoresizingMask = UIViewAutoresizingNone;
Vi bruker denne teknikken til å konfigurere autosiseringsadferdigheten til følgende grensesnittobjekter: contentsButton, pageSlider, tableOfContentsView, bookHeading, bookOneSubtitle, bookTwoSubtitle, og sectionButton.
Hver av endringene nedenfor vil bli gjort i WOTWViewController.m, og riktig linje nummer for endringen er oppført sammen med kildekoden.
Accentsconagua
contentsButton MaskecontentButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
pageSlider Maskeself.pageSlider.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
tableOfContentsView MasketableOfContentsView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;
bookHeading MaskebookHeading.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
bookOneSubtitle MaskebookOneSubtitle.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
bookTwoSubtitle MaskebookTwoSubtitle.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
sectionButton MaskesectionButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
sectionButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
Etter at du har lagt til alle de ovennevnte egenskapene, lagre, bygg og kjør prosjektet. Du bør oppdage at innholdsfortegnelsen ser mye bedre ut i landskapsretningen nå! Men hvis du er opptatt, vil du legge merke til en strålende feil: "Innholdsfortegnelsen" BOOK I-listen over innhold er avskjærende vertikalt når du er i liggende retning.
UIScrollView Det er selvfølgelig flere måter å håndtere det faktum at vi ikke har nok vertikal plass til å vise boken I kapittelliste. For eksempel kan vi prøve å endre høyden på knappene eller reposisjonere oppføringen for å flyte horisontalt i stedet for vertikalt. Etter min mening er den beste brukeropplevelsen å bruke en rullevisning for å kontrollere hvilken del av oppføringen som er synlig.
Dette er lett nok til å oppnå. Begynn med å erklære en ny UIScrollView for å holde våre kapittelknapper i WOTWViewController.h fil:
UIScrollView * sectionScrollView;
Deretter initialiser denne variabelen i WOTWViewController.m viewDidLoad metode og sett autoresizing masken:
sectionScrollView = [[UIScrollView tildeling] initWithFrame: CGRectMake (20.0f, 100.0f, 530.0f, 700.0f)]; sectionScrollView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
Sørg for å slippe dette senere.
Sett deretter inn colYOffset og colXOffset variabler til 0,0f for sin opprinnelige verdi og deretter oppdatere koden i begge til sløyfer for å legge til sectionButton objekter som undervisninger av sectionScrollView i stedet for tableOfContentsScrollView:
[sectionScrollView addSubview: sectionButton];
[sectionScrollView addSubview: sectionButton];
Sett deretter inn contentSize egenskapen til rullevisningen:
sectionScrollView.contentSize = CGSizeMake (523.0f, 680.0f);
De contentSize Egenskapen styrer lengden og høyden på det rullbare innholdet og må være innstilt slik at dette objektet fungerer som det skal. Verdiene som følger med er A) 2. kolonne X offset pluss 250 (lengden på en enkelt knapp) og B) den første kolonnen y offset fordi den første kolonnen har større vertikal høyde.
Legg nå følgende kodelinjer:
sectionScrollView.hidden = YES; [tableOfContentsView addSubview: sectionScrollView];
Ovenfor legger vi til rullevisningen til hovedinnholdet for innholdsvisning, men innser du hvorfor vi gjemmer det først? Husk fra en tidligere opplæring i denne serien at vi måtte manuelt aktivere og deaktivere TOC UIButton objekter som hindrer at bladene ser berøringer fra for tidlig utløsning av kapittelvalg. Alle knappobjektene er innebygd i rullevisningen nå, men vi vil fortsatt hindre at rullevisningen tar bilder fra noen berøringshendelser når den ikke vises.
Fordi det ikke lenger er behov for å manuelt bytte knappobjektene mellom aktiverte og deaktiverte stater, søk WOTWViewController.m for "enabled = YES" og "enabled = NO", og fjern alle linjer som var ansvarlige for å bytte denne verdien på seksjonsknappene, inkludert de som er innenfor displayTableOfContents og contentsButtonPressed: fremgangsmåter.
Etter å ha fjernet linjene nevnt ovenfor, gjør følgende endringer for å utløse skjuling og vise rullevisningen i stedet:
- (void) displayTableOfContents // Skjul sideskuffen self.pageSlider.hidden = YES; // Vis rullevisningsdelenScrollView.hidden = NO; // Angre overgangen med en horisontal flip fra høyre til venstre [UIView startAnimations: null kontekst: null]; [UIView setAnimationDuration: 0.5f]; [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: self-> leavesView cache: YES]; [self-> leavesView bringSubviewToFront: tableOfContentsView]; [UIView commitAnimations]; - (void) contentButtonPressed: (UIButton *) avsender // Oppdater PDF-visningsposisjonen selv-> leavesView.currentPageIndex = sender.tag; // Vis UISlider self.pageSlider.hidden = NO; self.pageSlider.value = (float) sender.tag; // Animer PDF-filen tilbake til toppen av bladeneVis underviews [UIView startAnimations: nil context: nil]; [UIView setAnimationDuration: 0.5f]; [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView: self-> leavesView cache: YES]; [self-> leavesView sendSubviewToBack: tableOfContentsView]; [UIView commitAnimations]; // Skjul rullevisningen lagt til TOC når den ikke er i visning sectionScrollView.hidden = YES;
Rullevisningen skal nå bli skjult når bladsvisningen vises og vises når TOC vises. Lagre, bygge og kjøre prosjektet ditt. Alle våre tilpassede grensesnittobjekter skal nå tilpasse seg orienteringsendringer!
Målet mitt med å skrive denne serien var både å demonstrere hvordan du legger til nyttige funksjoner til en standard Leaves implementering, så vel som å lære deg IOS SDK programmering triks og teknikker ved eksempel underveis. Jeg håper du har lært minst noen interessante nuggets og funnet denne serien til å være nyttig i dine egne prosjekter. Du er velkommen til å legge igjen en kommentar nedenfor og fortelle meg om dette hjalp ut!
I løpet av denne serien har vi sett både fordeler og begrensninger for å bruke Leaves-prosjektet. Personlig elsker jeg hvordan bladene raskt kan gjøre deg i stand til å lage den grunnleggende animasjonen til venstre / høyre side, mens du støtter en rekke forskjellige innholdsformater (inkludert PDF). Men som vi har sett i løpet av denne serien, trenger standard prosjektimplementering mye arbeid for å være egnet for de fleste profesjonelle prosjekter. Vi har måttet gå rundt kjerneprosjektkoden ved å forsøke å legge til en glidebryter og en innholdsfortegnelse, og det gjorde vi ikke engang til noen av de mer komplekse, men allment nødvendige funksjonene som tekst høydepunkter, bokmerker, kommentarer, osv..
Selvfølgelig er Leaves ikke det eneste alternativet for å oppnå denne typen funksjonalitet. I mitt første innlegg nevnte jeg FlipView, HMGLTransitions og PaperStack-prosjektet (fremdeles ikke utlevert fra 10/6/2011). Det er også en rekke Leaves prosjektgaffel og sannsynligvis noen flere prosjekter jeg ikke har oppført her.
Spørsmålet mitt for samfunnet er dette: Gjør dagens åpne kildealternativer for å bygge eReader-applikasjoner dine behov? Hvis ikke, hvorfor ikke? Hvilke funksjoner ønsker du å se lagt til i eksisterende prosjekter som ikke er tilgjengelige for øyeblikket? Soundoff nedenfor. Jeg vurderer for tiden å bli med i en av eReader-prosjektene som allerede er der ute, eller kanskje til og med sparker av en ny, så jeg vil gjerne høre din tilbakemelding!
