Share
Popovers sind eine großartige Möglichkeit, zusätzliche Informationen in einer iPad-App anzuzeigen. Wie bei den meisten iOS-Objekten ist die Anpassung durch ein wenig Anpassungsaufwand für ein einzigartiges Design, das zu Ihrer eigenen App passt. In diesem Lernprogramm erstellen wir ein grundlegendes Popover, untersuchen dann die Anpassungen einzeln und geben Ihnen einen leicht zu befolgenden Pfad, um Anpassungen in Ihrer eigenen App zu implementieren.
Starten Sie Xcode und wählen Sie Datei> Neu> Projekt ein neues Projekt erstellen. Wählen Sie eine iOS Single View-Anwendung und klicken Sie auf Nächster.
Abbildung 1 Füllen Sie die Textfelder mit Ihrem Projektnamen, Organisationsnamen und Firmenbezeichnung aus. Wählen iPad von dem Geräte Drop down und vergewissern Sie sich, dass die Box neben Verwenden Sie die automatische Referenzzählung wird geprüft. Lass die Boxen für Verwenden Sie Storyboards und Komponententests einschließen deaktiviert und klicken Sie auf Nächster. Wählen Sie einen Speicherort für Ihre Datei und klicken Sie auf Erstellen.
Figur 2 Verwenden Sie einen Navigationscontroller, damit wir eine Schaltfläche hinzufügen können, um das Popover anzuzeigen. Klicke auf AppDelegate.m und finde das Anwendung: didFinishLaunchingWithOptions: Methode. Fügen Sie den folgenden Code hinzu, um einen Navigationscontroller zu erstellen, und legen Sie ihn als Root-View-Controller fest.
UINavigationController * navController = [[Zuordnung UINavigationController] initWithRootViewController: self.viewController]; self.window.rootViewController = navController;
Jetzt können wir der Navigationsleiste einen Plus-Button hinzufügen. Klicke auf ViewController.m und fügen Sie dem folgenden Code hinzu viewDidLoad Methode gleich unten [super viewDidLoad];.
UIBarButtonItem * popoverButton = [[UIBarButtonItem-Zuordnung] initWithBarButtonSystemItem: UIBarButtonSystemItemAdd Ziel: Eigenaktion: @selector (showPopover :)]; self.navigationItem.rightBarButtonItem = popoverButton;
Das UIBarButtonSystemItemAdd erstellt einen Plus-Button; Wir werden es auf der rechten Seite der Navigationsleiste hinzufügen. Als nächstes implementieren wir die showPopover: als Selektor verwendete Methode.
Vor der Implementierung des showPopover: Methode, fügen wir eine Eigenschaft für den Popover-Controller hinzu. Klicke auf das ViewController.h Datei und fügen Sie die folgende Eigenschaft hinzu.
@ property (nicht atomar, stark) UIPopoverController * popController;
Navigiere zurück zum ViewController.m Datei und deklarieren die showPopover: Methode in der Klassenerweiterung wie unten gezeigt.
@Interface ViewController () - (void) showPopover: (ID) Absender; @Ende
Fügen Sie den folgenden Code hinzu, um die Methode unter zu definieren @Implementierung.
- (void) showPopover: (id) sender if (self.popController.popoverVisible) [self.popController dismissPopoverAnimated: YES]; Rückkehr; UIViewController * contentViewController = [[UIViewController-Zuordnung] init]; contentViewController.view.backgroundColor = [UIColor yellowColor]; UIPopoverController * popController = [[UIPopoverController-Zuordnung] initWithContentViewController: contentViewController]; popController.popoverContentSize = CGSizeMake (300.0f, 600.0f); self.popController = popController; [self.popController presentPopoverFromBarButtonItem: Absender erlaubtArrowDirections: UIPopoverArrowDirectionUp animiert: YES];
Zuerst prüfen wir, ob der Popover bereits auf dem Bildschirm angezeigt wird. Wenn es sichtbar ist, wird der Popover verworfen und die Methode wird zurückgegeben. Wenn das Popover nicht auf dem Bildschirm angezeigt wird, erstellen wir einen View-Controller, der im Popover angezeigt werden soll. Dann erstellen wir den Popover-Controller und legen seine Größe fest. In der letzten Codezeile wird der Popover-Controller angewiesen, sich über die Schaltfläche der Navigationsleiste zu präsentieren, in der er angetippt wurde - in diesem Fall die Plus-Taste - und lässt die Pfeilrichtung nur nach oben zeigen. Ein Vorteil bei der Verwendung dieser Methode ist, dass, wenn der Benutzer auf eine andere Schaltfläche in der Navigationsleiste tippt, die Schaltfläche an die Navigationsleiste übergeben wird.
Zu diesem Zeitpunkt haben wir ein Standard-Popover implementiert. Erstellen und starten Sie Ihr Projekt und tippen Sie auf die Plus-Schaltfläche, um ein Popup-Fenster anzuzeigen. Lassen Sie uns einen Blick auf die Grundlagen der Anpassung des Erscheinungsbildes werfen.
Accentsconagua
UIPopoverBackgroundView Um das Erscheinungsbild des Popovers anzupassen, müssen wir eine Unterklasse erstellen UIPopoverBackgroundView. Klicken Datei> Neu> Datei, wähle ein iOS Cocoa Touch Objective-C-Klasse, und klicken Sie auf Nächster.
Figur 3 Benennen Sie die Klasse PopoverBackgroundView und wähle UIPopoverBackgroundView von dem Unterklasse von Dropdown-Liste.
Figur 4 Es gibt zwei UIPopoverBackgroundView Eigenschaften, die überschrieben werden müssen. Fügen Sie den folgenden Code hinzu, um die Pfeilrichtung und den Pfeilversatz zu synthetisieren, und überschreiben Sie die Setter- und Getter-Methoden für diese beiden Eigenschaften.
@synthetisieren arrowDirection = _arrowDirection; @synthetisieren arrowOffset = _arrowOffset;
Es gibt drei Klassenmethoden, die überschrieben werden müssen. Definieren wir einige Werte, die mit den Methoden verwendet werden sollen.
#define kArrowBase 30.0f #define kArrowHeight 20.0f #define kBorderInset 8.0f
Fügen Sie den folgenden Code hinzu, um das zu überschreiben arrowBase, arrowHöhe und contentViewInsets Methoden.
+ (CGFloat) arrowBase return kArrowBase; + (CGFloat) arrowHeight return kArrowHeight; + (UIEdgeInsets) contentViewInsets return UIEdgeInsetsMake (kBorderInset, kBorderInset, kBorderInset, kBorderInset);
Das arrowBase Methode bestimmt die Breite des Pfeils, während die arrowHöhe Methode bestimmt die Höhe des Pfeils. Das contentViewInsets Diese Methode gibt an, wie weit vom Hintergrund entfernt der Inhalt angezeigt werden soll.
Fügen wir eine Hintergrundfarbe hinzu, damit wir die verschiedenen Teile deutlich sehen können. Fügen Sie den folgenden Code in das ob Aussage in der initWithFrame: Methode.
self.backgroundColor = [UIColor grayColor];
Bevor wir das Popover testen können, müssen wir die Popover-Hintergrundansicht-Klasseneigenschaft des Popover-Controllers importieren und festlegen. Klicke auf das ViewController.m Datei und importieren Sie die Popover-Hintergrundansicht-Header-Datei wie unten gezeigt.
#import "PopoverBackgroundView.h"
Während wir noch im sind ViewController.m Datei, fügen Sie die folgende Codezeile direkt unterhalb der Stelle ein, an der wir die Datei erstellt haben UIPopoverController in dem showPopover: Methode.
popController.popoverBackgroundViewClass = [PopoverBackgroundView-Klasse];
Erstellen Sie das Projekt, führen Sie es aus und tippen Sie auf die Plus-Schaltfläche, um den Popover anzuzeigen. Sie sehen, dass das Standard-Popover durch die Anpassungen ersetzt wurde, die wir bisher hinzugefügt haben. Die graue Umrandung des Popovers zeigt die zurückgesetzten Insets contentViewInsets Methode. Sie können die Einsätze nach Bedarf anpassen, um ein gewünschtes Aussehen zu erzielen. Wir werden später im Tutorial einen Pfeil zur Anzeige auf dem Bildschirm zeichnen.
Das wantsDefaultContentAppearance Diese Methode bestimmt, ob im Popover die standardmäßigen Einfügungsschatten und abgerundeten Ecken angezeigt werden. Durch die Rückkehr NEIN, In der Popover-Hintergrundansicht werden die Standardschatten und abgerundeten Ecken nicht mehr angezeigt, sodass Sie Ihre eigenen implementieren können. Fügen Sie den folgenden Code hinzu, um die Methode zu überschreiben.
+ (BOOL) wantDefaultContentAppearance return NO;
Erstellen und starten Sie das Projekt und Sie werden den Unterschied erkennen können.
Wir müssen den Pfeil selbst erstellen und verwalten. Lassen Sie uns eine Eigenschaft für eine Bildansicht deklarieren, in der der Pfeil angezeigt wird. Fügen Sie der Klassenerweiterung den folgenden Code hinzu.
@ property (nichtatomisch, stark) UIImageView * arrowImageView;
Jetzt können wir die Bildansicht instanziieren. Ersetzen Sie den Code im ob Aussage in initWithFrame: mit dem folgenden Code.
self.backgroundColor = [UIColor clearColor]; UIImageView * arrowImageView = [[UIImageView-Zuordnung] initWithFrame: CGRectZero]; self.arrowImageView = arrowImageView; [self addSubview: self.arrowImageView];
Ändern Sie den Grenzwert durch Aktualisieren der kBorderInset in PopoverBackgroundView.m mit dem folgenden Code definiert.
#define kBorderInset 0.0f
Um den Pfeil zeichnen zu können, müssen wir eine Methode zum Ausführen der Zeichnung angeben. Fügen Sie die folgende Methodendeklaration in der Klassenerweiterung in hinzu PopoverBackgroundView.m.
- (UIImage *) drawArrowImage: (CGSize) size;
Fügen Sie nun die Methodendefinition unter hinzu @Implementierung.
- (UIImage *) drawArrowImage: (CGSize) size UIGraphicsBeginImageContextWithOptions (size, NO, 0); CGContextRef ctx = UIGraphicsGetCurrentContext (); [[UIColor clearColor] setFill]; CGContextFillRect (ctx, CGRectMake (0.0f, 0.0f, Größe, Breite, Größe, Höhe)); CGMutablePathRef arrowPath = CGPathCreateMutable (); CGPathMoveToPoint (arrowPath, NULL, (size.width / 2.0f), 0.0f); CGPathAddLineToPoint (arrowPath, NULL, size.width, size.height); CGPathAddLineToPoint (arrowPath, 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 (); Bild zurückgeben;
Anstatt ein importiertes Bild zu verwenden, erstellt der Code oben programmgesteuert den Pfeil.
Jedes Mal, wenn sich die Grenzen der Popover-Hintergrundansicht-Unterklasse ändern, muss der Rahmen des Pfeils neu berechnet werden. Dies können wir durch Überschreiben erreichen layoutSubviews. Fügen Sie den folgenden Code hinzu PopoverBackgroundView.m.
- (void) layoutSubviews [super layoutSubviews]; CGSize arrowSize = CGSizeMake ([[self class] arrowBase], [[self class] arrowHeight]); self.arrowImageView.image = [self drawArrowImage: arrowSize]; self.arrowImageView.frame = CGRectMake ((((self.bounds.size.width - arrowSize.width) kBorderInset), 0.0f, arrowSize.width, arrowSize.height);
Der Rahmen der Bildansicht des Pfeils und das Bild des Pfeils werden basierend auf den Grenzen der Popover-Hintergrundansicht, den Einfügungen des Rahmens und der Basis und Höhe des Pfeils berechnet.
Erstellen Sie Ihr Projekt, und führen Sie es aus, um das benutzerdefinierte Popover anzuzeigen. Obwohl der Umrandungseinsatz auf Null gesetzt ist, wird der Pfeil so angepasst, dass er mit der Innenkante des rechten Einfügungsteils übereinstimmt. Durch die Subtraktion des Randeinschubs beim Bestimmen der x-Koordinate für den Bildansichtsrahmen für den Pfeil können wir die Bildansicht entsprechend ausrichten.
Dieses Tutorial soll Sie beim Anpassen eines Popovers unterstützen. Es gibt viele Richtungen, in die Sie das Projekt von hier aus einschlagen können. Fügen Sie beispielsweise eine weitere Bildansicht hinzu, um ein benutzerdefiniertes Rahmenbild anzuzeigen. Dazu folgen Sie einem ähnlichen Muster wie beim Erstellen der Bildansicht für den Pfeil. Darüber hinaus möchten Sie möglicherweise das Popover basierend auf der Pfeilrichtung anpassen. In layoutSubviews können Sie mithilfe einer Reihe von if-Anweisungen die Richtung des Pfeils überprüfen, sodass Sie den Pfeil entsprechend anpassen können. Hinterlassen Sie einen Kommentar oder eine Frage, wenn Sie eine bestimmte Richtung für Ihre Anpassungen haben möchten.
