Share
Popovers sunt o modalitate foarte bună de a afișa informații suplimentare într-o aplicație iPad. În mod inevitabil, la fel ca în majoritatea obiectelor iOS, o mică particularizare merge mult în crearea unui design care este unic și se potrivește cu propria aplicație. În acest tutorial, vom construi un pop-up de bază, apoi vom explora personalizările una câte una, oferindu-vă o cale ușor de urmărit pentru implementarea personalizărilor în propria dvs. aplicație.
Lansați Xcode și alegeți Fișier> Nou> Proiect pentru a crea un nou proiect. Selectați un Aplicație de vizualizare single IOS și faceți clic pe Următor →.
figura 1 Completați câmpurile de text cu numele proiectului, numele organizației și identificatorul firmei. Selectați iPad de la Dispozitive dați jos și asigurați-vă că caseta de lângă Utilizați numărarea automată a referințelor este bifat. Lăsați cutiile pentru Folosiți panourile de știri și Includeți testele de unitate neconfirmat și faceți clic pe Următor →. Alegeți o locație pentru a salva fișierul dvs. și faceți clic pe Crea.
Figura 2 Să folosim un controler de navigare, astfel încât să putem adăuga un buton pentru a afișa popup. Click pe AppDelegate.m și găsiți aplicare: didFinishLaunchingWithOptions: metodă. Adăugați următorul cod pentru a crea un controler de navigare și setați-l ca regulator de vizualizare rădăcină.
UINavigationController * navController = [[UINavigationController alocare] initWithRootViewController: self.viewController]; auto.window.rootViewController = navController;
Acum putem adăuga un buton plus la bara de navigare. Click pe ViewController.m și adăugați următorul cod la viewDidLoad metoda de mai jos [super viewDidLoad];.
UIBarButtonItem * popoverButton = [[UIBarButtonItem alocare] initWithBarButtonSystemItem: UIBarButtonSystemItemAdd țintă: auto acțiune: @selector (showPopover :)]; auto.navigationItem.rightBarButtonItem = popoverButton;
UIBarButtonSystemItemAdd creează un buton plus; o vom adăuga în partea dreaptă a barei de navigare. Apoi vom implementa showPopover: metoda utilizată ca selector.
Înainte de implementarea showPopover: metoda, să adăugăm o proprietate pentru controlerul popup. Faceți clic pe ViewController.h fișier și adăugați următoarea proprietate.
@property (nonatomic, puternic) UIPopoverController * popController;
Navigați înapoi la ViewController.m dosarul și declarați showPopover: în extensia de clasă, după cum se arată mai jos.
@ interfață ViewController () - (void) showPopover: (id) expeditor; @Sfârșit
Adăugați următorul cod pentru a defini metoda de sub @implementation.
- (void) showPopover: (id) expeditorul if (self.popController.popoverVisible) [self.popController dismissPopoverAnimated: YES]; întoarcere; UIViewController * contentViewController = [[UIViewController alloc] init]; contentViewController.view.backgroundColor = [UICcolorColor galben]; UIPopoverController * popController = [[UIPopoverController alocare] initWithContentViewController: contentViewController]; popController.popoverContentSize = CGSizeMake (300.0f, 600.0f); auto.popController = popController; [self.popController presentPopoverFromBarButtonItem: expeditor allowedArrowDirections: UIPopoverArrowDirectionUp animat: YES];
Mai întâi verificăm dacă popover-ul este deja afișat pe ecran. Dacă este vizibil, pop-ul este respins și metoda revine. Dacă popover nu este afișat pe ecran, vom crea un controler de vizualizare pentru a fi afișat în popup. Apoi vom crea controlerul popover și vom seta dimensiunea acestuia. Ultima linie de cod indică ca controlerul popover să se prezinte din butonul barei de navigare care a fost lovit - în acest caz butonul plus - și permite direcției săgeții să se îndrepte numai către. Unul dintre avantajele utilizării acestei metode este că dacă utilizatorul fixează un alt buton din bara de navigare, robinetul este trecut prin bara de navigare.
În acest moment, am implementat un pop-up standard. Construiți și executați proiectul și atingeți butonul plus pentru a vedea o apariție de bază. Să aruncăm o privire la elementele de bază ale personalizării aspectului său.
Accentsconagua
UIPopoverBackgroundView Pentru a personaliza aspectul poporului, vom avea nevoie de subclasa UIPopoverBackgroundView. Clic Fișier> Nou> Fișier, alegeți un iOS Cocoa Touch Obiectiv-C Clasa, și faceți clic pe Următor →.
Figura 3 Denumiți clasa PopoverBackgroundView și alegeți UIPopoverBackgroundView de la Subclasa de scapă jos.
Figura 4 Sunt două UIPopoverBackgroundView proprietăți care trebuie suprimate. Adăugați următorul cod pentru a sintetiza direcția săgeții și deplasarea săgeții, suprascriind metodei setter și getter pentru aceste două proprietăți.
@synthesize arrowDirection = _arrowDirection; @synthesize arrowOffset = _arrowOffset;
Există trei metode de clasă care trebuie suprimate. Să definim câteva valori pe care să le folosim cu metodele.
#define kArrowBase 30.0f #define kArrowHeight 20.0f #define kBorderInstalați 8.0f
Adăugați codul de mai jos pentru a suprascrie arrowBase, arrowHeight și contentViewInsets metode.
+ (CGFloat) arrowBase retur kArrowBase; + (CGFloat) arrowHeight întoarcere kArrowHeight; + (UIEdgeInsets) contentViewInsets retur UIEdgeInsetsMake
arrowBase metoda determină lățimea bazei săgeții, în timp ce arrowHeight metoda determină înălțimea săgeții. contentViewInsets metoda indică cât de departe de marginea fundalului pentru a afișa conținutul.
Să adăugăm o culoare de fundal pentru a vedea clar diferitele piese. Adăugați următorul cod în interiorul dacă declarație în initWithFrame: metodă.
auto.backgroundColor = [UICcolor griColor];
Înainte de a putea testa popup-ul, va trebui să importem și să setăm proprietatea clasei de vizualizare pop-up a controlerului pop-up. Faceți clic pe ViewController.m fișierul și importați fișierul antet al vederii de fundal descoperit după cum se arată mai jos.
#import "PopoverBackgroundView.h"
În timp ce suntem încă în ViewController.m fișier, adăugați următoarea linie de cod chiar sub locul în care am creat UIPopoverController în showPopover: metodă.
popController.popoverBackgroundViewClass = [clasa PopoverBackgroundView];
Construiți și executați proiectul și atingeți butonul plus pentru a vedea popup. Puteți vedea că popupul standard a fost înlocuit cu personalizările pe care le-am adăugat până acum. Granița gri din jurul poporului arată inserțiile returnate de la contentViewInsets metodă. Puteți ajusta inserțiile după cum este necesar pentru a obține aspectul dorit. Vom desena o săgeată mai târziu în tutorial pentru a afișa pe ecran.
wantsDefaultContentAppearance metoda determină dacă umbrele de inserție implicite și colțurile rotunjite sunt afișate în fereastra pop-up. Prin întoarcere NU, afișarea de fundal popup nu va mai afișa umbrele implicite și colțurile rotunjite, permițându-vă să vă implementați propriile. Adăugați următorul cod pentru a suprascrie metoda.
+ (BOOL) wantsDefaultContentAppearance return NO;
Construiți și conduceți proiectul și veți putea vedea diferența.
Va trebui să creăm și să gestionăm singuri săgeata; să declare o proprietate pentru o vizualizare a imaginii care va afișa săgeata. Adăugați următorul cod la extensia de clasă.
@property (nonatomic, puternic) UIImageView * arrowImageView;
Acum putem instantiza imaginea. Înlocuiți codul în interiorul dacă declarație în initWithFrame: cu următorul cod.
auto.backgroundColor = [UICcolor clearColor]; UIImageView * arrowImageView = [[UIImageView aloca] initWithFrame: CGRectZero]; self.arrowImageView = arrowImageView; [self addSubview: self.arrowImageView];
Să schimbăm inserția de frontieră prin actualizarea textului kBorderInset definit în PopoverBackgroundView.m cu următorul cod.
#define kBorderInstalarea 0.0f
Pentru a trage săgeata, va trebui să declarăm o metodă de realizare a desenului. Adăugați următoarea declarație de metodă în extensia de clasă din PopoverBackgroundView.m.
- (UIImage *) drawArrowImage: dimensiunea (CGSize);
Acum adăugați definiția metodei de sub @implementation.
- (UIImage *) drawArrowImage: dimensiunea (CGSize) UIGraphicsBeginImageContextWithOptions (dimensiune, NO, 0); CGContextRef ctx = UIGraphicsGetCurrentContext (); [[UICcolor clearColor] setFill]; CGContextFillRect (ctx, CGRectMake (0.0f, 0.0f, size.width, size.height)); CGMutablePathRef arrowPath = CGPathCreateMutabil (); CGPathMoveToPoint (arrowPath, NULL, (size.width / 2.0f), 0.0f); CGPathAddLineToPoint (săgeată, NULL, dimensiune, lățime, mărimea înălțime); CGPathAddLineToPoint (săgeată, NULL, 0.0f, dimensiune.alte); CGPathCloseSubpath (arrowPath); CGContextAddPath (ctx, arrowPath); CGPathRelease (arrowPath); UICoror * fillColor = [UICcolorcolor galben]; CGContextSetFillColorWithColor (ctx, fillColor.CGColor); CGContextDrawPath (ctx, kCGPathFill); UIImage * imaginea = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); returnează imaginea;
În loc să folosești o imagine importată, codul de mai sus creează programat săgeata.
De fiecare dată când se modifică limitele subclaselor de vizualizare pop-up, raza săgeții trebuie recalculate. Putem realiza acest lucru prin suprimare layoutSubviews. Adăugați următorul cod la PopoverBackgroundView.m.
- (void) layoutSubviews [super layoutSubviews]; CGSize arrowSize = CGSizeMake ([[clasa de sine] arrowBase], [[clasa de sine] arrowHeight)); self.arrowImageView.image = [auto drawArrowImage: arrowSize]; auto.arrowImageView.frame = CGRectMake (((auto.bounds.size.width - arrowSize.width) kBorderInsecțiunea), 0.0f, arrowSize.width, arrowSize.height);
Cadrul imaginii imaginii săgeții și imaginea săgeții se calculează pe baza limitelor imaginii de fundal popup, a insulelor de pe margine și a bazei și înălțimii săgeții.
Construiți și conduceți proiectul pentru a vedea pop-up personalizat. Chiar dacă inserția frontală este setată la zero, săgeata este ajustată pentru a se alinia cu marginea interioară a inserției din dreapta. Prin scăderea inserției de margine la determinarea coordonatei x pentru cadrul de vizualizare a imaginii pentru săgeată, suntem capabili să aliniem corect imaginea.
Acest tutorial este conceput pentru a vă face să funcționeze cu personalizarea unui pop-up. Există multe direcții pe care le puteți lua proiectul de aici; de exemplu, adăugarea unei alte imagini pentru a afișa o imagine de frontieră personalizată. Pentru a face acest lucru, urmați un model similar celui pe care l-am făcut când creăm vizualizarea imaginii pentru săgeată. În plus, este posibil să doriți să personalizați popup pe baza direcției săgeții. În layoutSubviews, o serie de declarații if v-ar putea ajuta să testați direcția săgeții, astfel încât să puteți regla săgeata în consecință. Lăsați un comentariu sau o întrebare mai jos dacă aveți o anumită direcție pe care doriți să o faceți cu personalizarea.
