Share
Acest tutorial vă va învăța cum să creați un personalizat Acordeon Meniu. Acest meniu animat vă va permite să colectați informații de la utilizator într-o manieră interesantă și raționalizată. Citiți mai departe pentru a afla mai multe!
Poziția inițială a meniului acordeon va fi în centrul viziunii țintă pe care apare. Când se afișează meniul, jumătate din ea se va deplasa spre partea superioară a ecranului țintă, în timp ce cealaltă jumătate se va deplasa spre partea inferioară a ecranului, extindându-se la înălțimea permisă. În timpul utilizării, atât punctul de origine Y cât și înălțimea vor fi modificate astfel încât efectul dorit să poată avea loc. Meniul în sine va consta într-o vizualizare de tabel. Aceasta ne va oferi o mare flexibilitate în ceea ce privește numărul de opțiuni adăugate în meniu. Vizualizarea tabelului va exista sub forma unei subiecte pe o vizualizare și va apărea pe o vizualizare țintă. Vederea principală a controlerului de vizualizare al meniului acordeon va funcționa ca o acoperire a subreviselor existente la spate, astfel încât utilizatorul nu poate atinge nimic altceva decât cu opțiunile de meniu.
Să mergem mai departe și să aducem această idee la viață. Iată o imagine a aspectului produsului final.
Primul lucru pe care trebuie să-l facem este să creezi un nou controler de vizualizare pentru meniul nostru de acordeon. Înainte de aceasta, vom crea un nou grup în Xcode pentru a păstra totul curat și ordonat.
În Project Navigator în partea stângă a Xcode-ului, Control + Faceți clic (clic dreapta) pe CustomViewsDemo grup. Selectează Grup nou opțiune din meniul pop-up.
A stabilit Acordeon Meniu ca nume.
Să creăm controlerul de vizualizare acum. Control + Faceți clic (clic dreapta) pe Acordeon Meniu grup. Selectează Fișier nou ... opțiune din meniul pop-up.
Selectează Clasa obiectiv-C ca șablon pentru noul fișier și faceți clic pe următorul.
Utilizați numele AccordionMenuViewController în câmpul de clasă și asigurați-vă că în Subclasa de câmpul UIViewController valoarea este selectată. Nu uitați să părăsiți "Cu XIB pentru interfața cu utilizatorul" opțiunea verificată.
În cele din urmă, faceți clic pe butonul de creare. Asigurați-vă că Acordeon Meniu este grupul selectat, după cum se arată în imaginea următoare.
Primul lucru pe care trebuie să-l facem cu noul controler de vizualizare este setarea interfeței în Interfață Builder, care ar trebui să fie destul de simplu. Cea mai mare parte a muncii se va face în cod.
Faceți clic pe AccordionMenuViewController.xib fișier pentru a porni Interfață Builder pe. Faceți clic pe vizualizarea implicită și dezactivați caracteristica Autolayout, astfel încât aceasta să funcționeze pe versiunile de iOS înainte de 6.
Apoi, mergeți la Atribuții Inspector. În Metrici simulate secțiune, setați mărimea valoare pentru Nici unul astfel încât să funcționeze și pe un ecran de 3,5 ".
Mergeți mai departe și adăugați o vizualizare nouă, dar asigurați-vă că nu o adăugați sub formă de subview la vizualizarea implicită. Urmează următoarele instrucțiuni:
Luați un tabel de la Biblioteca de obiecte și adăugați-o ca subiectivă la viziunea pe care am adăugat-o în pasul anterior. Finalizați următoarea configurație în Atribuții Inspector secțiune.
Aceasta ar trebui să arate interfața dvs. în acest moment.
Apoi, vom crea două IBOutlet proprietăți pentru vizualizarea suplimentară și vizualizarea tabelului pe care am adăugat-o mai devreme la proiect. În primul rând, ar trebui să facem Editor asistent apărea. Faceți clic pe butonul din mijloc din Editor secțiune din bara de instrumente Xcode pentru ao dezvălui.
Pentru a conecta vizualizarea la un nou IBOutlet proprietate, du-te la Afișează Document Outline> Control + Faceți clic (clic dreapta)> Outlet New Reference. Trageți și plasați în Editor asistent.
Am numit proprietatea viewAccordionMenu și vă recomandăm să utilizați același nume pentru a evita orice probleme în timpul codării. Seteaza Depozitare opțiunea pentru Puternic în loc de implicit Slab valoare.
Acum, să adăugăm un IBOutlet proprietate pentru tableview. Așa cum am făcut mai sus, creați o nouă proprietate numită tblAccordionMenu. Seteaza Depozitare opțiunea pentru Puternic de asemenea.
Iată cele două IBOutlet proprietăţi.
@property (puternic, nonatomic) IBOutlet UIView * viewAccordionMenu; @property (puternic, nonatomic) IBOutlet UITableView * tblAccordionMenu;
Până acum, bine! Am creat controlerul de vizualizare pentru meniul acordeon, am creat interfața și am creat cele două necesare IBOutlet pentru afișările pe care le-am adăugat constructorului. Acum este momentul să începeți să scrieți un cod.
Mai întâi de toate, ar trebui să ne stabilim controlerul de vizualizare ca delegat și sursa de date a tabelului pe care l - am creat în Interfață Builder. Controlorul nostru de vedere ar trebui să adopte protocoalele respective. Faceți clic pe AccordionMenuViewController.h fișier și chiar lângă @interface antetul adăugați următoarele.
@interface AccordionMenuViewController: UIViewController
Faceți clic pe AccordionMenuViewController.m fișier și să pună în aplicare un simplu init metodă. Setați controlerul de vizualizare ca delegat și sursa de date a vizualizării table.
-(id) init auto = [super init]; dacă (auto) [_tblAccordionMenu setDelegate: eu]; [_tblAccordionMenu setDataSource: auto]; întoarce-te;
Pentru a face ca meniul să arate mai bine, să adăugăm o margine. În init, adăugați codul evidențiat.
... dacă (auto) [_tblAccordionMenu setDelegate: eu]; [_tblAccordionMenu setDataSource: auto]; // Adăugați o margine în jurul tabelului. [stratul [tblAccordionMenu] setBorderColor: [UICcolor whiteColor] .CGColor]; [[layer _tblAccordionMenu] setBorderWidth: 2.0]; ...
Asigurați-vă că adăugați acest lucru în partea superioară a fișierului.
#import
Setați culoarea de fundal a afișării implicite la gri deschis cu transparență.
... dacă (auto) ... [auto.view setBackgroundColor: [UICcolor colorWithRed: 0.33 verde: 0.33 albastru: 0.33 alpha: 0.75]]; ...
Este o idee bună să definiți înălțimea rândului din tabel ca o constantă. În afară de tableView: heightForRowAtIndexPath metodă, o vom folosi și în alte metode. Imediat după #import comenzi, adăugați următoarele.
#define ROW_HEIGHT 40,0 // Înălțimea fiecărei opțiuni a meniului acordeonului.
Meniul de acordeon va folosi animația pentru a apărea și a dispărea. Putem seta durata animației ca o constantă.
#define ANIMATION_DURATION 0.25 // Durata animației.
De acum încolo, dacă vrem să schimbăm înălțimea rândului sau durata de animație, o vom face o singură dată fără a modifica valorile fiecărei metode.
Ar trebui să declarăm două variabile private și una NSArray. Variabilele privesc lățimea și înălțimea meniului acordeon, adică lățimea și înălțimea vederii părintelui tabelului nostru. NSArray este matricea care va păstra opțiunile de meniu și va fi sursa de date a tabelului.
În partea de sus a AccordionMenuViewController.m fișier adăugați următoarele linii în @interface secțiune.
@interface AccordionMenuViewController () CGFloat menuViewWidth; CGFloat menuViewHeight; @property (nonatomic, puternic) NSArray * optionsArray; @Sfârșit
Asigurați-vă că nu uitați parantezele curbate!
Există cel puțin trei metode publice care ar trebui puse în aplicare pentru ca meniul acordeonului să funcționeze corect. Prima metodă va fi folosită pentru a seta opțiunile meniului, a doua metodă va face să apară meniul acordeon, iar a treia metodă o va face să dispară.
În primul rând, ar trebui să declarăm metodele menționate mai sus în .h fişier. Deci, faceți clic pe AccordionMenuViewController.h fișier și adăugați următoarele.
-(void) setMenuOptions: (NSArray *) opțiuni; - (void) aratăAccordionMenuInView: (UIView *) targetView; - (void) closeAccordionMenuAnimated: (bool) animate;
Să implementăm prima metodă. Faceți clic pe AccordionMenuViewController.m fișier și scrieți sau copiați / inserați următorul cod.
-(void) setMenuOptions: (NSArray *) opțiuni NSMutableArray * tempArray = [NSMutableArray arrayWithArray: opțiuni]; [tempArray addObject: @ "Închidere"]; _optionsArray = [[NSArray alocare] initWithArray: (NSArray *) tempArray copyItems: YES];
Chiar dacă aceasta este o metodă foarte simplă, permiteți-mi să vă explic puțin. Mi se pare mai ușor pentru utilizator și programator să furnizeze o matrice cu opțiuni de meniu numai. Nu trebuie să fii preocupat de așa-numitul închideți meniul opțiune. Este foarte util doar atunci când cineva va folosi meniul acordeon în mai multe cazuri. Eu folosesc tempArray pentru a pune împreună atât opțiunile utilizatorului, cât și opțiunea de închidere. Dacă știți că _optionsArray nu este mutabil, veți înțelege că nu poate accepta obiecte noi după creație. Inițializez _optionsArray matrice. Este alegerea dvs. să evitați utilizarea acestei logici sau să schimbați titlul opțiunii de meniu închide.
Să trecem la următoarea metodă. Se va referi la modul în care apare meniul acordeon pe ecran. În ea se desfășoară o mulțime de pași, așa că o voi prezenta și o voi discuta în parte.
Mai întâi de toate, trebuie să luăm în considerare bara de stare atunci când meniul acordeon urmează să apară. Acest lucru se datorează faptului că vom folosi vizualizarea țintă în care va apărea meniul și cadrul său ca bază pentru configurarea vederilor noastre. Astfel, este foarte important să gestionați corect bara de stare. Dacă bara de stare este ascunsă, nu există nicio problemă. Dacă este vizibil, cu toate acestea, un spațiu gol, egal cu înălțimea barei de stare, va fi creat atunci când vom face apariția noastră. Deci, ca un prim pas, trebuie să verificăm dacă bara de stare este vizibilă și să se păstreze înălțimea acesteia pentru a fixa decalajul creat de aceasta.
-(void) showAccordionMenuInView: (UIView *) targetView // PASUL 1: STATUL BAR OFFSET CGFloat statusBarOffset; dacă [! [[UIApplication sharedApplication] isStatusBarHidden]) CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame] .size; dacă (statusBarSize.width < statusBarSize.height) statusBarOffset = statusBarSize.width; else statusBarOffset = statusBarSize.height; else statusBarOffset = 0.0; …
Aceasta este abordarea pe care am urmat-o în timpul tutorialului anterior în vizualizarea personalizată de introducere a textului.
Apoi, ar trebui să specificăm care este lățimea și înălțimea vizualizării țintă în funcție de orientare. În funcție de orientare, ar trebui să "spunem" dacă offsetul care ar trebui mutat prin vizualizarea noastră implicită este pe axa X sau axa Y.
-(void) showAccordionMenuInView: (UIView *) targetView ... Lățime, înălțime, offsetX, offsetY; dacă [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft || [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight) // Dacă orientarea este peisaj, atunci lățimea // primește valoarea heightView și înălțimea devine // targetul de afișare al lățimii țintă. width = targetView.frame.size.height; height = targetView.frame.size.width; offsetX = -statusBarOffset; offsetY = 0,0; altfel // În caz contrar, lățimea este lățimea și înălțimea este înălțime. width = targetView.frame.size.width; height = targetView.frame.size.height; offsetX = 0,0; offsetY = -statusBarOffset; ...
Următorul pas este ușor. Vom seta pur și simplu vizualizarea implicită, self.view, prin setarea cadrului său și compensarea corespunzătoare, valoarea sa alfa, și adăugând-o în cele din urmă sub formă de sub-viziune la vizualizarea țintă.
-(void) aratăAccordionMenuInView: (UIView *) targetView ... // PASUL 3: SETUP SELF.VIEW [auto.view setFrame: CGRectMake (targetView.frame.origin.x, targetView.frame.origin.y, lățime, înălțime) ]; [auto.view setFrame: CGRectOffset (auto.view.frame, offsetX, offsetY)]; [auto.view setAlpha: 0,0]; [targetView addSubview: self.view]; ...
Acum este timpul să configurați vizualizarea care conține vizualizarea tabelului. Trebuie să specificăm mărimea acesteia aici, având în vedere că va ocupa o porțiune a ecranului. Am stabilit lățimea lui 260,0 px, dar îl poți schimba în funcție de dorințele tale. Înălțimea sa va fi calculată pe baza opțiunilor totale și a înălțimii fiecărui rând. Aceasta înseamnă că înălțimea va fi egală cu rândurile totale înmulțite cu înălțimea fiecărui rând. În cazul în care există prea multe opțiuni și o înălțime a meniului mai mare decât înălțimea de vizualizare țintă în oricare dintre orientări, ar trebui să micșorăm manual meniul și să permitem derularea în tabel. Pentru a realiza acest lucru, vom folosi o variabilă temporară care va păstra înălțimea în fiecare caz.
Pentru a obține efectul de acordeon, trebuie să setăm cadranul de două ori. La început, îi vom da cadrului normal și îl vom centra în funcție de punctul central al vederii țintă. Apoi vom stoca punctul de origine Y și vom seta din nou cadrul. Vom face acest lucru prin setarea punctului de origine Y la punctul de origine Y al centrului său și stabilirea înălțimii lui la 0.0. Când punctul de origine Y și înălțimea vor fi restabilite la valorile lor inițiale, vom avea un mare efect de acordeon.
-(vid) aratăAccordionMenuInView: (UIView *) targetView ... // STEP 4: SETUP MENU VIEW menuViewWidth = 260.0; // Înălțimea este înălțimea fiecărui rând înmulțită cu numărul // din opțiuni. menuViewHeight = ROW_HEIGHT * [numar _optionsArray]; // Declarați și utilizați o variabilă temporară locală pentru înălțimea afișării meniului. CGFloat tempMenuHeight; dacă (meniuViewHeight> înălțime) // Dacă meniulViewHeight așa cum este setat mai sus este mai mare decât înălțimea viziunii țintă // apoi setați înălțimea vederii meniului la înălțimea țintei - 50.0. // De asemenea, activați defilarea pe tableview. tempMenuHeight = înălțime - 50,0; [_tblAccordionMenu setScrollEnabled: DA]; altfel // În caz contrar, dacă înălțimea vizualizării meniului nu este mai mare decât înălțimea lui targetView //, atunci tempMenuHeight este egală cu meniulViewHeight. // Deplasarea nu trebuie să fie activată. tempMenuHeight = menuViewHeight; [_tblAccordionMenu setScrollEnabled: NU]; // Setați cadrul inițial al vizualizării meniului. Rețineți că nu suntem // interesați de punctele de origine x și y, deoarece vor fi automat setați imediat după, deci setați-l la 0,0. [_viewAccordionMenu setFrame: CGRectMake (0.0, 0.0, meniuViewWidth, tempMenuHeight)]; // Stabilește centrul său în centrul autoportului. [_viewAccordionMenu setCenter: self.view.center]; // Stocați temporar punctul de origine curent al vizualizării meniului. CGFloat yPoint = _viewAccordionMenu.frame.origin.y; // Acum setați punctul central.y ca punct de origine al vizualizării meniului și înălțimea lui la 0.0. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)]; // Adăugați vizualizarea meniului în vizualizarea targetView. [targetView addSubview: _viewAccordionMenu]; ...
Este timpul să animați meniul. Nu este nimic special pentru a discuta aici. Schimba pur și simplu valoarea alfa a self.view și setați cadrul final la vizualizarea meniului.
-(void) aratăAccordionMenuInView: (UIView *) targetView ... // PASUL 5: ANIMATE [UIView beginAnimations: contextul "": nul]; [Durata de animație setată de ANIMATION_DURATION]; [UIView setAnimationCurve: UIViewAnimationCurveLinear]; [auto.view setAlpha: 0.5]; // Setați valoarea yPoint ca punct de origine y al vizualizării meniului // și valoarea tempMenuHeight ca înălțime. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, yPoint, _viewAccordionMenu.frame.size.width, tempMenuHeight)]; [UIView commitAnimations]; ...
În cele din urmă, reîncărcați datele din tabel, astfel încât opțiunile de meniu să apară în tabel. Rețineți că metoda se termină aici.
-(void) aratăAccordionMenuInView: (UIView *) targetView ... // PASUL 6: RELOAD DATE TABLEVIEW [_tblAccordionMenu reloadData]; ...
Să scriem următoarea metodă privind închiderea meniului. Nu trebuie să menționez nimic aici. Voi sublinia doar că utilizează un parametru boolean care specifică dacă închiderea ar trebui să fie animată sau nu.
-(void) closeAccordionMenuAnimated: (BOOL) animat if (animat) [UIView beginAnimations: context "": nil]; [Durata de animație setată de ANIMATION_DURATION]; [UIView setAnimationCurve: UIViewAnimationCurveLinear]; [auto.view setAlpha: 0,0]; [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)]; [Afișează comenziAnimații]; [_viewAccordionMenu performeSelector: @selector (removeFromSuperview) withObject: null afterDelay: ANIMATION_DURATION + 0.5]; [self.view performSelector: @selector (removeFromSuperview) withObject: null afterDelay: ANIMATION_DURATION + 0.5]; altceva [_viewAccordionMenu removeFromSuperview]; [self.view removeFromSuperview];
Am reusit sa facem meniul nostru sa apara corect cand a fost sunat. Ce se întâmplă atunci când utilizatorul rotește dispozitivul? Nimic! Acest lucru se datorează faptului că nu am scris nimic despre acest lucru, așa că hai să o facem acum. Vom implementa viewWillLayoutSubviews metodă, care se numește de fiecare dată când se schimbă orientarea. Puteți citi mai multe despre el pe site-ul dezvoltatorului Apple.
Iată versiunea scurtă a ceea ce vom face. În primul rând, vom seta cadrul de vizualizare a meniului, bazat pe menuViewWidth si menuViewHeight variabile pe care le-am stabilit mai devreme. Vom centra în funcție de self.view punctul central. În continuare, în funcție de orientarea dispozitivului, vom calcula înălțimea supervizării. În cele din urmă, vom verifica dacă înălțimea vederii este mai mare decât înălțimea superviziei. Dacă este adevărat, îl vom micsora manual și vom face activă de derulare, la fel ca în cazul -(vid) aratăAccordionMenuInView: (UIView *) targetView metodă. În caz contrar, vom dezactiva pur și simplu derularea.
-(void) viewWillLayoutSubviews // Obțineți orientarea curentă. Orientare orientareOrientare = [[UIApplication sharedApplication] statusBarOrientation]; // Setați cadrul de vizualizare a meniului și centrați-l. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.frame.origin.y, meniuViewWidth, menuViewHeight)]; [_viewAccordionMenu setCenter: self.view.center]; // Obțineți înălțimea superviziei. În modul peisaj, înălțimea este lățimea. Înălțimea CGFloat; dacă (orientare == UIIterfaceOrientationLandscapeLeft || orientare == UIInterfaceOrientationLandscapeRight) height = self.view.superview.frame.size.width; altfel height = self.view.superview.frame.size.height; // Verificați dacă înălțimea ecranului de meniu este mai mare decât înălțimea supervizorului. if (_viewAccordionMenu.frame.size.height> height) // Dacă este adevărat, apoi setați din nou cadrul din meniul de vizualizare prin setarea înălțimii // la înălțimea supravegherii minus 50.0. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.frame.origin.y, meniuViewWidth, înălțime - 50.0)]; // Centru din nou. [_viewAccordionMenu setCenter: self.view.center]; // De asemenea, permiteți derularea. [_tblAccordionMenu setScrollEnabled: DA]; altceva // În acest caz, înălțimea ecranului de meniu nu este mai mare decât înălțimea supervizorului // astfel că setați defilarea la NO. [_tblAccordionMenu setScrollEnabled: NU];
Iată metodele minime necesare pentru a face munca tableview. Rețineți că în -(UITableViewCell *) tableView: cellForRowAtIndexPath: , vom verifica dacă rândul curent este ultima sau nu.
-(int) numberOfSectionsInTableView: (UITableView *) tableView retur 1; - (int) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) sectiunea return [numar _optionsArray]; - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Celula"; UITableViewCell * celula = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; dacă (celula == zero) cell = [[UITableViewCell alin] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: CellIdentifier]; dacă ([indexPath row] < [_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;
De asemenea, trebuie să rezolvăm atingerea pe rândurile tabelului. Rețineți în următoarea metodă că eliminăm selecția din rândul apăsat.
-(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath [[tableView cellForRowAtIndexPath: indexPath] setSelected: NO];
Vom reveni la această metodă destul de curând.
Atunci când utilizatorul întrerupe un rând sau, cu alte cuvinte, o opțiune de meniu, dorim ca controlorul de vizualizare a apelantului să fie notificat cu privire la alegerea selectată.
Faceți clic pe AccordionMenuViewController.h fișier și scrieți următorul cod, chiar înainte de @interface antet.
@ protocol AccordionMenuViewControllerDelegate - (void) userSelectedOptionWithIndex: (NSUInteger) index; @Sfârșit
Acum, declarați o proprietate delegată.
Accentsconagua
