Share
Denne opplæringen vil lære deg hvordan du oppretter en egendefinert Accordion Menu. Denne animerte menyen lar deg samle inn data fra brukeren på en engasjerende og strømlinjeformet måte. Les videre for å lære mer!
Trekkspillmenyens startposisjon vil være midt i målvisningen den vises på. Når menyen vises, vil halvparten bevege seg mot toppen av målvisningen, mens den andre halvparten beveger seg mot bunnen av visningen, og utvider til full tillatt høyde. Under bruk vil både Y-utgangspunktet og høyden bli endret slik at ønsket effekt kan finne sted. Menyen i seg selv vil bestå av en tabellvisning. Det gir oss stor fleksibilitet med hensyn til antall alternativer lagt til i menyen. Tabellvisningen kommer til å eksistere som et undervisning i en visning og vil vises på en målvisning. Hovedvisningen til harmonisjonsmenyens visningsstyrer fungerer som et deksel til undervisningen som finnes på baksiden, slik at brukeren ikke kan trykke på noe annet enn våre menyalternativer.
La oss gå videre og bringe ideen til liv. Her er et bilde av hvordan sluttproduktet vil se ut.
Det første vi må gjøre er å opprette en ny visningskontroller for vår trekkspill-meny. Før dette oppretter vi en ny gruppe i Xcode for å holde alt pent og ryddig.
I Prosjektnavigator ruten på venstre side av Xcode, Kontroll + klikk (høyreklikk) på CustomViewsDemo gruppe. Velg Ny gruppe alternativet fra popup-menyen.
Sett Accordion Menu som navnet.
La oss lage visningsregulatoren nå. Kontroll + klikk (høyreklikk) på Accordion Menu gruppe. Velg Ny fil ... alternativet fra popup-menyen.
Velg Mål-C klasse som mal for den nye filen og klikk på neste.
Bruk navnet AccordionMenuViewController i klassefeltet og sørg for at i Underklasse av feltet UIViewController verdien er valgt. Ikke glem å forlate "Med XIB for brukergrensesnitt" alternativet sjekket.
Til slutt klikker du på Opprett-knappen. Pass på at Accordion Menu er den valgte gruppen, som vist i neste bilde.
Det første vi trenger å gjøre med vår nye visningskontroller, er å sette opp grensesnittet i Grensesnittbygger, som skal være ganske enkelt. Det meste av arbeidet vil bli gjort i kode.
Klikk på AccordionMenuViewController.xib fil for å slå på Grensesnittbygger på. Klikk på standardvisningen og slå av Autolayout-funksjonen slik at den fungerer på versjoner av iOS før 6.
Deretter går du til Attributtsinspektør. I Simulerte beregninger seksjonen, sett inn Størrelse verdi til Ingen slik at den vil fungere på en 3,5 "skjerm også.
Gå videre og legg til en ny visning, men sørg for at du ikke legger til det som et undervisning til standardvisningen. Gjør følgende:
Ta en tabellvisning fra Objektbibliotek og legg det til som et undervisning i visningen vi la til i forrige trinn. Fullfør neste konfigurasjon i Attributtsinspektør seksjon.
Dette er hva grensesnittet ditt skal se ut på dette punktet.
Deretter skal vi lage to IBOutlet Egenskaper for ekstra visning og tabellvisning vi lagt til i prosjektet tidligere. Først bør vi lage Assistent Editor vises. Klikk på midtknappen i Redaktør delen på Xcode verktøylinjen for å avsløre det.
For å koble visningen til en ny IBOutlet eiendom, gå til Vis dokumentoversikt> Kontroll + Klikk (høyreklikk)> Ny referanseutgang. Dra og slipp inn i Assistent Editor.
Jeg hette eiendommen viewAccordionMenu og jeg anbefaler at du bruker samme navn for å unngå problemer under kodingen. Sett Oppbevaring alternativ til Sterk i stedet for standard Svak verdi.
La oss legge til en IBOutlet eiendom for tabellvisningen. Akkurat som vi gjorde ovenfor, opprett en ny eiendom som heter tblAccordionMenu. Sett Oppbevaring alternativ til Sterk også.
Her er de to IBOutlet eiendommer.
@property (strong, nonatomic) IBOutlet UIView * viewAccordionMenu; @property (strong, nonatomic) IBOutlet UITableView * tblAccordionMenu;
Så langt så bra! Vi har opprettet visningskontrollen for trekkspillmenyen, vi har satt opp grensesnittet, og vi har opprettet to nødvendige IBOutlet egenskaper for visningene vi lagde til byggeren. Nå er det på tide å begynne å skrive noen kode.
Først av alt, bør vi sette oversiktskontrollen som delegat og datakilde i tabellvisningen vi opprettet i Grensesnittbygger. Vår visningscontroller bør vedta de respektive protokollene. Klikk på AccordionMenuViewController.h fil og rett ved siden av @interface header legger til følgende.
@interface AccordionMenuViewController: UIViewController
Klikk på AccordionMenuViewController.m fil og implementer en enkel i det metode. Sett visningskontrolleren som delegat og datakilde i tabellvisningen.
-(id) init self = [super init]; hvis (selv) [_tblAccordionMenu setDelegate: self]; [_tblAccordionMenu setDataSource: self]; returner selv;
For å få menyen til å se bedre ut, la oss legge til en ramme. I i det, legg til den uthevede koden.
... hvis (selv) [_tblAccordionMenu setDelegate: self]; [_tblAccordionMenu setDataSource: self]; // Legg til en kant rundt bordvisningen. [[_tblAccordionMenu lag] setBorderColor: [UIColor whiteColor] .CGColor]; [[_tblAccordionMenu lag] setBorderWidth: 2.0]; ...
Pass på at du legger til dette øverst i filen.
#importere
Angi bakgrunnsfargen til standardvisningen til lys grå med gjennomsiktighet.
... hvis (selv) ... [self.view setBackgroundColor: [UIColor colorWithRed: 0.33 green: 0.33 blue: 0.33 alpha: 0.75]]; ...
Det er en god ide å definere radhøyden på tabellvisningen som en konstant. Bortsett fra Tableview: heightForRowAtIndexPath metode, vi skal bruke den i andre metoder. Like etter #importere kommandoer, legg til følgende.
#define ROW_HEIGHT 40.0 // Høyden til hvert valg av trekkspillmenyen.
Trekkspillmenyen vil bruke animasjon til å vises og forsvinne. Vi kan angi animasjonens varighet som en konstant.
#define ANIMATION_DURATION 0.25 // Varigheten av animasjonen.
Fra nå av, hvis vi vil endre radhøyden eller animasjonsvarigheten, gjør vi det en gang uten å endre verdiene i hver metode.
Vi bør erklære to private variabler og en NSArray. Variablene betrakter trekkspesjonsmenyens bredde og høyde, noe som betyr bredden og høyden til overordnet visningen av tabelloversikten. De NSArray er arrayet som vil holde menyalternativene, og det vil være datakilden til tabellvisningen.
På toppen av AccordionMenuViewController.m fil legg til de neste linjene i @interface seksjon.
@interface AccordionMenuViewController () CGFloat menuViewWidth; CGFloatmenyViewHeight; @property (nonatomic, strong) NSArray * optionsArray; @slutt
Pass på at du ikke glemmer de krøllede parentesene!
Det er minst tre offentlige metoder som bør implementeres for at trekkspillmenyen skal fungere skikkelig. Den første metoden vil bli brukt til å angi alternativene på menyen, den andre metoden vil gjøre trekkspillmenyen, og den tredje metoden gjør at den forsvinner.
Først av alt, bør vi erklære metodene jeg nevnte ovenfor inn i .h fil. Så, klikk på AccordionMenuViewController.h fil og legg til følgende.
-(void) setMenuOptions: (NSArray *) alternativer; - (void) showAccordionMenuInView: (UIView *) targetView; - (void) closeAccordionMenuAnimated: (BOOL) animert;
La oss implementere den første metoden. Klikk på AccordionMenuViewController.m fil og skriv eller kopier / lim inn følgende kode.
-(void) setMenuOptions: (NSArray *) alternativer NSMutableArray * tempArray = [NSMutableArray arrayWithArray: alternativer]; [tempArray addObject: @ "Close"]; _optionsArray = [[NSArray alloc] initWithArray: (NSArray *) tempArray copyItems: YES];
Selv om dette er en veldig enkel metode, la meg forklare det litt. Jeg synes det er lettere for brukeren og programmereren å gi en matrise med menyalternativer bare. Du trenger ikke å være bekymret for den såkalte Lukk meny alternativ. Det er egentlig bare nyttig når noen skal bruke trekkspillmenyen i mer enn ett tilfelle. Jeg bruker tempArray mutable array for å sette sammen både brukeralternativer og det nære alternativet. Hvis du vet at _optionsArray er ikke mutable, vil du forstå at den ikke kan godta nye objekter etter opprettelsen. Jeg initialiserer _optionsArray array. Det er ditt valg å unngå å bruke denne logikken eller endre tittelen på det nære menyalternativet.
La oss gå videre til neste metode. Det kommer til å angi hvordan trekkspillmenyen vises på skjermen. Mange forskjellige skritt finner sted i det, så jeg presenterer og diskuterer det i deler.
Først og fremst må vi ta statuslinjen under vurdering når harmonisjonsmenyen skal vises. Dette skyldes at vi vil bruke målvisningen der menyen vil vises og rammen som en base for å konfigurere våre visninger. Derfor er det veldig viktig å håndtere statuslinjen på riktig måte. Hvis statuslinjen er skjult, er det ikke noe problem i det hele tatt. Hvis det er synlig, vil imidlertid en tom plass som tilsvarer statuslinjens høyde bli opprettet når vi får visningen vår. Så, som et første skritt, må vi sjekke om statuslinjen er synlig og lagre dens høyde for å fikse kompensasjonen som er opprettet av dette.
-(void) showAccordionMenuInView: (UIView *) targetView // TRINN 1: STATUS BAR OFFSET CGFloat statusBarOffset; hvis (! [[UIApplication sharedApplication] isStatusBarHidden]) CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame] .size; hvis (statusBarSize.width < statusBarSize.height) statusBarOffset = statusBarSize.width; else statusBarOffset = statusBarSize.height; else statusBarOffset = 0.0; …
Dette er den tilnærmingen vi fulgte under den forrige opplæringen i den egendefinerte tekstinngangsvisningen.
Deretter skal vi spesifisere hva bredden og høyden til målvisningen er, avhengig av retningen. Avhengig av orienteringen, bør vi "fortelle" om kompensasjonen som skal flyttes av standardvisningen, er på X- eller Y-aksen.
-(void) showAccordionMenuInView: (UIView *) targetView ... CGFloat bredde, høyde, offsetX, offsetY; hvis [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft || [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight) // Hvis orienteringen er landskap, så får bredden // målversjonens høydeverdi og høyden blir // targetViews breddeverdi. bredde = targetView.frame.size.height; height = targetView.frame.size.width; offsetX = -statusBarOffset; offsetY = 0,0; ellers // Ellers er bredden bredde og høyden er høyde. width = targetView.frame.size.width; høyde = targetView.frame.size.height; offsetX = 0.0; offsetY = -statusBarOffset; ...
Det neste trinnet er enkelt. Vi vil ganske enkelt sette opp standardvisningen, self.view, ved å sette rammen og den riktige forskyvningen, dens alfa-verdi, og til slutt legge den til som et undervisning til målvisningen.
-(void) showAccordionMenuInView: (UIView *) målVis ... // TRINN 3: SETUP SELF.VIEW [self.view setFrame: CGRectMake (targetView.frame.origin.x, targetView.frame.origin.y, bredde, høyde) ]; [self.view setFrame: CGRectOffset (self.view.frame, offsetX, offsetY)]; [self.view setAlpha: 0.0]; [targetView addSubview: self.view]; ...
Nå er det på tide å konfigurere visningen som inneholder tabellvisningen. Vi må spesifisere størrelsen her, med tanke på at den vil okkupere en del av skjermen. Jeg satte bredden til 260,0 px, men du kan endre det i henhold til dine ønsker. Dens høyde beregnes ut fra de totale alternativene og høyden på hver rad. Det betyr at høyden vil være lik den totale raden multiplisert med høyden på hver rad. Hvis det er for mange alternativer, og en menyhøyde som er større enn målvisningshøyden i begge retninger, bør vi manuelt krympe menyen og aktivere rulling på tabellvisningen. For å oppnå det, bruker vi en midlertidig variabel som vil holde høyden i hvert tilfelle.
For å oppnå trekkraften må vi sette rammen to ganger. Først gir vi den sin normale ramme, og vi senterer den i henhold til målvisningspunktpunktet. Da lagrer vi opprinnelsespunktet for Y og setter rammen på nytt. Vi gjør dette ved å sette opprinnelsespunktet til Y-utgangspunktet til sentrum og angi høyden til 0,0. Når Y-utgangspunktet og høyden blir gjenopprettet til sine opprinnelige verdier, har vi en god trekkraftseffekt.
-(void) showAccordionMenuInView: (UIView *) targetView ... // TRINN 4: SETUP MENYVIEW menuViewWidth = 260.0; // Høyden er høyden på hver rad multiplisert med tallet // av alternativene. menyViewHeight = ROW_HEIGHT * [_optionsArray count]; // Deklar og bruk en lokal, midlertidig variabel for høyden på menyvisningen. CGFloat tempMenuHeight; hvis (menyViewHeight> høyde) // Hvis menyViewHeight som angitt ovenfor er større enn høyden på målvisningen //, sett deretter menyvisningens høyde til målvisningshøyde - 50,0. // Også aktivere rulling på tabellvisning. tempMenuHeight = høyde - 50,0; [_tblAccordionMenu setScrollEnabled: YES]; ellers // Ellers hvis menyvisningshøyden ikke er større enn targetViews høyde //, så er tempMenuHeight ganske enkelt lik menyenViewHeight. // Rulling trenger ikke å være aktivert. tempMenuHeight = menuViewHeight; [_tblAccordionMenu setScrollEnabled: NO]; // Sett innrammen for menyvisningen. Vær oppmerksom på at vi ikke er // interessert i x- og y-opprinnelsespunktene fordi de automatisk skal settes rett etter, så sett det til 0,0. [_viewAccordionMenu setFrame: CGRectMake (0.0, 0.0, menuViewWidth, tempMenuHeight)]; // Sett senteret til self.view senter. [_viewAccordionMenu setCenter: self.view.center]; // Lagre midlertidig det nåværende opprinnelsesstedet i menyvisningen. CGFloat yPoint = _viewAccordionMenu.frame.origin.y; // Sett nå center.y punktet som utgangspunktet for menyvisningen og dens høyde til 0.0. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)]; // Legg til menyvisningen til targetView-visningen. [targetView addSubview: _viewAccordionMenu]; ...
Det er på tide å animere menyen. Det er egentlig ikke noe spesielt å diskutere her. Vi endrer bare alfaverdien til self.view og sett den siste rammen til menyvisningen.
-(void) showAccordionMenuInView: (UIView *) targetView ... // TRINN 5: ANIMATE [UIView startAnimations: @ "" kontekst: null); [UIView setAnimationDuration: ANIMATION_DURATION]; [UIView setAnimationCurve: UIViewAnimationCurveLinear]; [self.view setAlpha: 0.5]; // Sett yPoint-verdien som y-utgangspunktet i menyvisningen // og tempMenuHeight-verdien som sin høyde. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, yPoint, _viewAccordionMenu.frame.size.width, tempMenuHeight)]; [UIView commitAnimations]; ...
Endelig, last opp tabelldataene slik at menyalternativene vises på tabellvisningen. Merk at metoden slutter her.
-(void) showAccordionMenuInView: (UIView *) targetViewVis ... // TRINN 6: LØST TABELLVIEW DATA [_tblAccordionMenu reloadData]; ...
La oss skrive neste metode angående menyavslutningen. Det er ingenting jeg virkelig trenger å nevne her. Jeg vil bare understreke at det bruker en boolsk parameter som angir om lukkingen skal animeres eller ikke.
-(void) closeAccordionMenuAnimated: (BOOL) animert if (animert) [UIView startAnimations: @ "" kontekst: null); [UIView setAnimationDuration: ANIMATION_DURATION]; [UIView setAnimationCurve: UIViewAnimationCurveLinear]; [self.view setAlpha: 0.0]; [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)]; [UIView commitAnimations]; [_viewAccordionMenu performSelector: @selector (removeFromSuperview) withObject: nil afterDelay: ANIMATION_DURATION + 0.5]; [self.view performSelector: @selector (removeFromSuperview) withObject: null etterDelay: ANIMATION_DURATION + 0.5]; ellers [_viewAccordionMenu removeFromSuperview]; [self.view removeFromSuperview];
Vi har lykkes med å gjøre menyen vår riktig når den blir ringt. Hva skjer når brukeren roterer enheten, skjønt? Ingenting! Dette er fordi vi ikke har skrevet noe om dette, så la oss gjøre det nå. Vi implementerer viewWillLayoutSubviews metode som kalles hver gang orienteringen endres. Du kan lese mer om det på Apples utviklerwebside.
Her er den korte versjonen av hva vi skal gjøre. Først vil vi sette menyvisningens ramme, basert på menuViewWidth og menuViewHeight variabler vi satt tidligere. Vi senterer den i henhold til self.view midtpunkt. Deretter beregner vi høyden på overvåkingen, avhengig av enhetens orientering. Til slutt vil vi sjekke om visningen er høyere enn tilsynets høyde. Hvis det er sant, krymper vi manuelt og gjør rulling aktivert, akkurat som vi gjorde i -(void) showAccordionMenuInView: (UIView *) targetView metode. Ellers slår vi ganske enkelt av.
-(void) viewWillLayoutSubviews // Få den nåværende orienteringen. UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation]; // Sett menyvisningen og senter den. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.frame.origin.y, menuViewWidth, menuViewHeight)]; [_viewAccordionMenu setCenter: self.view.center]; // Få oversiktens høyde. I liggende modus er høyden bredden. CGFloat høyde; hvis (orientering == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight) height = self.view.superview.frame.size.width; ellers height = self.view.superview.frame.size.height; // // Kontroller om menyvisningen er høyde enn overvåkingshøyden. hvis (_viewAccordionMenu.frame.size.height> height) // Hvis det er sant, sett deretter menyvisningens ramme igjen ved å sette sin høyde // til overvåkningens høyde minus 50.0. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.frame.origin.y, menyViewWidth, høyde - 50.0)]; // Senter igjen. [_viewAccordionMenu setCenter: self.view.center]; // Tillat også å bla. [_tblAccordionMenu setScrollEnabled: YES]; ellers // I så fall er menyvisningens høyde ikke større enn overvåkingshøyden // så sett til å bla til NO. [_tblAccordionMenu setScrollEnabled: NO];
Her er minimumskravene som kreves for å lage tableview-arbeidet. Legg merke til at i -(UITableViewCell *) tableView: cellForRowAtIndexPath: metode, vi vil sjekke for å se om den nåværende raden er den siste eller ikke.
-(int) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (int) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) seksjon return [_optionsArray count]; - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statisk NSString * CellIdentifier = @ "Cell"; UITableViewCell * celle = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; hvis (celle == nil) celle = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: CellIdentifier]; hvis ([indexPath rad] < [_optionsArray count] - 1) [[cell contentView] setBackgroundColor:[UIColor colorWithRed:204.0/255.0 green:204.0/255.0 blue:204.0/255.0 alpha:1.0]]; [[cell textLabel] setTextColor:[UIColor blackColor]]; [[cell textLabel] setShadowColor:[UIColor whiteColor]]; [[cell textLabel] setShadowOffset:CGSizeMake(1.0, 1.0)]; else [[cell contentView] setBackgroundColor:[UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:104.0/255.0 alpha:1.0]]; [[cell textLabel] setTextColor:[UIColor whiteColor]]; [[cell textLabel] setShadowColor:[UIColor blackColor]]; [[cell textLabel] setShadowOffset:CGSizeMake(1.0, 1.0)]; [[cell textLabel] setFont:[UIFont fontWithName:@"Georgia" size:17.0]]; [cell setSelectionStyle:UITableViewCellSelectionStyleGray]; CGRect rect = CGRectMake(0.0, 0.0, self.view.bounds.size.width, [self tableView:tableView heightForRowAtIndexPath:indexPath]); [[cell textLabel] setFrame:rect]; [[cell textLabel] setTextAlignment:NSTextAlignmentCenter]; [[cell textLabel] setText:[_optionsArray objectAtIndex:[indexPath row]]]; return cell; -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath return ROW_HEIGHT;
Vi må også håndtere tappingen på radene i tabellvisningen. Merk i den følgende metoden at vi fjerner valget fra den trukne raden.
-(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath [[tableView cellForRowAtIndexPath: indexPath] setSelected: NO];
Vi kommer snart tilbake til denne metoden.
Når brukeren tapper på rad, eller med andre ord et menyalternativ, ønsker vi at innringeren skal bli varslet om det valgte valget.
Klikk på AccordionMenuViewController.h fil og skriv følgende kode rett før @interface Overskrift.
@protocol AccordionMenuViewControllerDelegate - (void) userSelectedOptionWithIndex: (NSUInteger) indeks; @slutt
Nå erklærer du en delegert eiendom.
Accentsconagua
