Share
Popovers er en fin måte å vise tilleggsinformasjon på i en iPad-app. Uansett, som med de fleste iOS-objekter, går en liten tilpasning langt i å skape et design som er unikt og passer inn i din egen app. I denne opplæringen bygger vi en grunnleggende popover, og deretter utforsker tilpasninger en om gangen, noe som gir deg en enkel å følge banen for å implementere tilpasninger i din egen app.
Start Xcode og velg Fil> Nytt> Prosjekt å skape et nytt prosjekt. Velg en iOS enkeltvisningsprogram og klikk neste.
Figur 1 Fyll ut tekstfeltene med prosjektnavnet, organisasjonsnavnet og bedriftsidentifikatoren. Å velge iPad fra enheter rul ned og kontroller boksen ved siden av Bruk automatisk referansetelling er sjekket. La boksene stå for Bruk Storyboards og Inkluder Unit Tests fjernkontrollen og klikk neste. Velg et sted for å lagre filen og klikk Skape.
Figur 2 La oss bruke en navigasjonskontroller slik at vi kan legge til en knapp for å vise popover. Klikk på AppDelegate.m og finn applikasjons: didFinishLaunchingWithOptions: metode. Legg til følgende kode for å opprette en navigasjonsregulator og sett den som root view-kontrolleren.
UINavigationController * navController = [[UINavigationController alloc] initWithRootViewController: self.viewController]; self.window.rootViewController = navController;
Nå kan vi legge til et pluss-knapp i navigasjonsfeltet. Klikk på ViewController.m og legg til følgende kode til viewDidLoad metode like nedenfor [super viewDidLoad];.
UIBarButtonItem * popoverButton = [[UIBarButtonItem alloker] initWithBarButtonSystemItem: UIBarButtonSystemItemAdd mål: selvhandling: @selector (showPopover :)]; self.navigationItem.rightBarButtonItem = popoverButton;
De UIBarButtonSystemItemAdd lager et pluss-knapp; Vi legger det til høyre på navigeringslinjen. Neste vil vi implementere showPopover: metode som brukes som väljare.
Før du implementerer showPopover: metode, la oss legge til en egenskap for popover-kontrolleren. Klikk på ViewController.h fil og legg til følgende eiendom.
@property (nonatomic, strong) UIPopoverController * popController;
Naviger tilbake til ViewController.m fil og erklære showPopover: metode i klassen forlengelsen som vist nedenfor.
@interface ViewController () - (void) showPopover: (id) avsender; @slutt
Legg til følgende kode for å definere metoden under @gjennomføring.
- (void) showPopover: (id) avsender hvis (self.popController.popoverVisible) [self.popController dismissPopoverAnimated: YES]; komme tilbake; UIViewController * contentViewController = [[UIViewController allokere] init]; contentViewController.view.backgroundColor = [UIColor yellowColor]; UIPopoverController * popController = [[UIPopoverController allokere] initWithContentViewController: contentViewController]; popController.popoverContentSize = CGSizeMake (300.0f, 600.0f); self.popController = popController; [self.popController presentPopoverFromBarButtonItem: avsender tillattArrowDirections: UIPopoverArrowDirectionUp animert: YES];
Først sjekker vi for å se om popover allerede vises på skjermen. Hvis det er synlig, blir popover avvist og metoden returnerer. Hvis popover ikke vises på skjermen, oppretter vi en visningsregulator som skal vises i popover. Deretter oppretter vi popover-kontrolleren og setter størrelsen på den. Den siste kodelinjen forteller popover-kontrolleren å presentere seg fra navigasjonslinjeknappen som ble tappet - i dette tilfellet pluss-knappen - og lar pilens retning bare peke opp. En fordel ved å bruke denne metoden er at hvis brukeren trykker på en annen knapp i navigeringslinjen, går han over til navigeringslinjen.
På dette tidspunktet har vi implementert en standard popover. Bygg og kjør prosjektet ditt og trykk på pluss-knappen for å se en grunnleggende popover vises. La oss ta en titt på det grunnleggende om å tilpasse utseendet sitt.
Accentsconagua
UIPopoverBackgroundView For å tilpasse utseendet til popover, må vi underklasse UIPopoverBackgroundView. Klikk Fil> Ny> Fil, velg en iOS kakaobryt objektiv-C klasse, og klikk neste.
Figur 3 Gi klassen navn PopoverBackgroundView og velg UIPopoverBackgroundView fra Underklasse av fall ned.
Figur 4 Det er to UIPopoverBackgroundView egenskaper som må overstyres. Legg til følgende kode for å syntetisere pilens retning og pilforskyvning, overstyrer setter- og getter-metodene for disse to egenskapene.
@synthesize arrowDirection = _arrowDirection; @synthesize arrowOffset = _arrowOffset;
Det er tre klassemetoder som må overstyres. La oss definere noen verdier som skal brukes med metodene.
#define kArrowBase 30.0f #define kArrowHeight 20.0f #define kBorderInset 8.0f
Legg til koden under for å overstyre arrowBase, arrowHeight og contentViewInsets fremgangsmåter.
+ (CGFloat) arrowBase return kArrowBase; + (CGFloat) arrowHeight return kArrowHeight; + (UIEdgeInsets) contentViewInsets returnere UIEdgeInsetsMake (kBorderInset, kBorderInset, kBorderInset, kBorderInset);
De arrowBase Metoden bestemmer bredden på pilens base, mens arrowHeight Metoden bestemmer høyden på pilen. De contentViewInsets Metode angir hvor langt fra kanten av bakgrunnen for å vise innholdet.
La oss legge til en bakgrunnsfarge slik at vi kan se de forskjellige delene tydelig. Legg til følgende kode inne i hvis uttalelse i initWithFrame: metode.
self.backgroundColor = [UIColor grayColor];
Før vi kan teste popover, må vi importere og angi popover-kontrollenhetens popover-bakgrunnsvisningsklasseegenskap. Klikk på ViewController.m fil og importer popover-bakgrunnsvisningshovedfilen som vist nedenfor.
#import "PopoverBackgroundView.h"
Mens vi fortsatt er i ViewController.m fil, legg til følgende kodelinje like nedenfor der vi opprettet UIPopoverController i showPopover: metode.
popController.popoverBackgroundViewClass = [PopoverBackgroundView klasse];
Bygg og kjør prosjektet og trykk på pluss-knappen for å se popover. Du kan se at standard popover er blitt erstattet med tilpassingene vi har lagt til hittil. Den grå grensen rundt popover viser innspillene som returneres fra contentViewInsets metode. Du kan justere innspillene etter behov for å oppnå ønsket utseende. Vi trekker en pil senere i opplæringen for å vise på skjermen.
De wantsDefaultContentAppearance Metoden bestemmer om standardinnstillingsskyggene og avrundede hjørner vises i popover. Ved å returnere NEI, popover-bakgrunnsvisningen vil ikke lenger vise standardskyggene og avrundede hjørner, slik at du kan implementere din egen. Legg til følgende kode for å overstyre metoden.
+ (BOOL) wantsDefaultContentAppearance return NO;
Bygg og kjør prosjektet, og du vil kunne se forskjellen.
Vi må opprette og administrere pilen selv; la oss erklære en eiendom for en bildevisning som viser pilen. Legg til følgende kode i klasseutvidelsen.
@property (nonatomic, strong) UIImageView * arrowImageView;
Nå kan vi instantiere bildevisningen. Erstatt koden inne i hvis uttalelse i initWithFrame: med følgende kode.
self.backgroundColor = [UIColor clearColor]; UIImageView * arrowImageView = [[UIImageView alloc] initWithFrame: CGRectZero]; self.arrowImageView = arrowImageView; [self addSubview: self.arrowImageView];
La oss endre grenseinnlegget ved å oppdatere kBorderInset definert i PopoverBackgroundView.m med følgende kode.
#define kBorderInset 0.0f
For å tegne pilen må vi deklarere en metode for å utføre tegningen. Legg til følgende metoden deklarasjon i klassen utvidelsen i PopoverBackgroundView.m.
- (UIImage *) drawArrowImage: (CGSize) størrelse;
Legg nå metodedefinisjonen under @gjennomføring.
- (UIImage *) drawArrowImage: (CGSize) størrelse UIGraphicsBeginImageContextWithOptions (størrelse, NO, 0); CGContextRef ctx = UIGraphicsGetCurrentContext (); [[UIColor clearColor] setFill]; CGContextFillRect (ctx, CGRectMake (0.0f, 0.0f, size.width, size.height)); CGMutablePathRef arrowPath = CGPathCreateMutable (); CGPathMoveToPoint (pilPath, NULL, (size.width / 2.0f), 0.0f); CGPathAddLineToPoint (pilPath, NULL, size.width, size.height); CGPathAddLineToPoint (pilPath, NULL, 0,0f, size.height); CGPathCloseSubpath (arrowPath); CGContextAddPath (ctx, arrowPath); CGPathRelease (arrowPath); UIColor * fillColor = [UIColor yellowColor]; CGContextSetFillColorWithColor (ctx, fillColor.CGColor); CGContextDrawPath (ctx, kCGPathFill); UIImage * image = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); returnere bilde;
I stedet for å bruke et importert bilde, oppretter koden ovenfor programmatisk pilen.
Hver gang grensene for popover-bakgrunnsvisningens underklasse endres, må rammen av pilen beregnes på nytt. Vi kan oppnå dette ved å overordne layoutSubviews. Legg til følgende kode til PopoverBackgroundView.m.
- (void) layoutSubviews [super layoutSubviews]; CGSize arrowSize = CGSizeMake ([[selvklass] arrowBase], [[selvklass] arrowHeight]); self.arrowImageView.image = [self drawArrowImage: arrowSize]; self.arrowImageView.frame = CGRectMake (((self.bounds.size.width - arrowSize.width) kBorderInset), 0.0f, pilSize.width, pilSize.height);
Rammen til pilens bildevisning og pilens bilde beregnes ut fra grensene til popover-bakgrunnsvisningen, grenseinnsatsene og pilens base og høyde.
Bygg og kjør prosjektet ditt for å se tilpasset popover. Selv om grenseinngangen er satt til null, er pilen justert for å stige opp med innersiden av høyre inngang. Ved å trekke grenseinngangen når du bestemmer x-koordinaten for bildevisningsrammen for pilen, kan vi justere bildevisningen på riktig måte.
Denne opplæringen er designet for å få deg oppe med å tilpasse et popover. Det er mange retninger du kan ta prosjektet herfra; for eksempel, legge til en annen bildevisning for å vise et egendefinert grensebilde. For å gjøre dette, ville du følge et lignende mønster som vi gjorde da vi opprettet bildevisningen for pilen. Videre vil du kanskje tilpasse popover basert på pilens retning. I layoutSubviews kan en rekke om setninger hjelpe deg med å teste pilens retning slik at du kan justere pilen tilsvarende. Legg igjen en kommentar eller et spørsmål nedenfor hvis du har en bestemt retning du vil gå med tilpassingene dine.
