Share
Les popovers sont un excellent moyen d’afficher des informations supplémentaires dans une application iPad. Inévitablement, comme avec la plupart des objets iOS, une petite personnalisation peut grandement contribuer à créer un design unique et adapté à votre propre application. Dans ce didacticiel, nous allons créer un popover de base, puis explorer les personnalisations une à une, en vous donnant un chemin facile à suivre pour implémenter des personnalisations dans votre propre application..
Lancez Xcode et choisissez Fichier> Nouveau> Projet créer un nouveau projet. Sélectionnez un Application de vue unique iOS et cliquez Suivant.
Figure 1 Remplissez les champs de texte avec le nom de votre projet, le nom de l'organisation et l'identificateur de la société. Sélectionner iPad du Dispositifs dérouler et assurez-vous que la case à côté de Utiliser le comptage automatique des références est vérifié. Laissez les cases pour Utiliser des storyboards et Inclure les tests unitaires décoché et cliquez Suivant. Choisissez un emplacement pour enregistrer votre fichier et cliquez sur Créer.
Figure 2 Utilisons un contrôleur de navigation pour pouvoir ajouter un bouton permettant d'afficher le popover. Cliquer sur AppDelegate.m et trouver le application: didFinishLaunchingWithOptions: méthode. Ajoutez le code suivant pour créer un contrôleur de navigation et le définir comme contrôleur de vue racine..
UINavigationController * navController = [[UINavigationController alloc]] initWithRootViewController: self.viewController]; self.window.rootViewController = navController;
Nous pouvons maintenant ajouter un bouton plus à la barre de navigation. Cliquer sur ViewController.m et ajoutez le code suivant à la viewDidLoad méthode juste en dessous [super viewDidLoad];.
UIBarButtonItem * popoverButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemAdd cible: action autonome: @selector (showPopover :)]; self.navigationItem.rightBarButtonItem = popoverButton;
le UIBarButtonSystemItemAdd crée un bouton plus; nous l'ajouterons à droite de la barre de navigation. Ensuite, nous allons mettre en œuvre le showPopover: méthode utilisée comme sélecteur.
Avant de mettre en œuvre le showPopover: méthode, ajoutons une propriété pour le contrôleur popover. Clique sur le ViewController.h déposer et ajouter la propriété suivante.
@property (nonatomic, strong) UIPopoverController * popController;
Revenez à la ViewController.m déposer et déclarer le showPopover: méthode dans l'extension de classe comme démontré ci-dessous.
@interface ViewController () - (void) showPopover: (id) expéditeur; @fin
Ajoutez le code suivant pour définir la méthode sous @la mise en oeuvre.
- (void) showPopover: (id) expéditeur if (self.popController.popoverVisible) [self.popController licencierPopoverAnimated: YES]; revenir; UIViewController * contentViewController = [[UIViewController alloc] init]; contentViewController.view.backgroundColor = [UIColor yellowColor]; UIPopoverController * popController = [[UIPopoverController alloc]] initWithContentViewController: contentViewController]; popController.popoverContentSize = CGSizeMake (300.0f, 600.0f); self.popController = popController; [self.popController presentPopoverFromBarButtonItem: expéditeur autoriséArrowDirections: UIPopoverArrowDirectionUp animated: YES];
Nous vérifions d’abord si le popover est déjà affiché à l’écran. Si elle est visible, la popover est rejetée et la méthode retourne. Si le popover n'est pas affiché à l'écran, nous créons un contrôleur de vue à afficher dans le popover. Ensuite, nous créons le contrôleur popover et définissons sa taille. La dernière ligne de code indique au contrôleur popover de se présenter à partir du bouton de la barre de navigation qui a été tapé (dans ce cas, le bouton plus) et permet au sens de la flèche de ne pointer que vers le haut. L'un des avantages de cette méthode est que si l'utilisateur appuie sur un autre bouton de la barre de navigation, celui-ci est transmis à la barre de navigation..
À ce stade, nous avons mis en place un popover standard. Générez et exécutez votre projet et appuyez sur le bouton plus pour afficher un popover de base. Jetons un coup d'oeil aux bases de la personnalisation de son apparence.
Accentsconagua
UIPopoverBackgroundView Afin de personnaliser l'apparence de la popover, nous devrons sous-classer UIPopoverBackgroundView. Cliquez sur Fichier> Nouveau> Fichier, choisir un Classe Objective-C iOS Cocoa Touch, et cliquez Suivant.
figure 3 Nommez la classe PopoverBackgroundView et choisir UIPopoverBackgroundView du Sous-classe de menu déroulant.
Figure 4 Il y en a deux UIPopoverBackgroundView propriétés qui doivent être remplacées. Ajoutez le code suivant pour synthétiser la direction et le décalage de la flèche, en remplaçant les méthodes setter et getter pour ces deux propriétés..
@synthesize arrowDirection = _arrowDirection; @synthesize arrowOffset = _arrowOffset;
Trois méthodes de classe doivent être remplacées. Définissons quelques valeurs à utiliser avec les méthodes.
#define kArrowBase 30.0f #define kArrowHeight 20.0f #define kBorderInset 8.0f
Ajoutez le code ci-dessous pour remplacer le arrowBase, flècheHauteur et contentViewInsets les méthodes.
+ (CGFloat) arrowBase return kArrowBase; + (CGFloat) arrowHeight return kArrowHeight; + (UIEdgeInsets) contentViewInsets retourne UIEdgeInsetsMake (kBorderInset, kBorderInset, kBorderInset, kBorderInset);
le arrowBase méthode détermine la largeur de la base de la flèche, tandis que la flècheHauteur Cette méthode détermine la hauteur de la flèche. le contentViewInsets méthode indique à quelle distance du bord de l'arrière-plan afficher le contenu.
Ajoutons une couleur de fond pour que nous puissions voir les différentes pièces clairement. Ajoutez le code suivant à l'intérieur du si déclaration dans le initWithFrame: méthode.
self.backgroundColor = [UIColor greyColor];
Avant de pouvoir tester le popover, nous devons importer et définir la propriété de la classe de vue en arrière-plan du contrôle popover du contrôleur popover. Clique sur le ViewController.m archivez et importez le fichier d'en-tête de la vue d'arrière-plan popover comme indiqué ci-dessous.
#import "PopoverBackgroundView.h"
Alors que nous sommes encore dans le ViewController.m fichier, ajoutez la ligne de code suivante juste en dessous de l'endroit où nous avons créé le UIPopoverController dans le showPopover: méthode.
popController.popoverBackgroundViewClass = [classe PopoverBackgroundView];
Générez et exécutez le projet et appuyez sur le bouton plus pour afficher le popover. Vous pouvez constater que le popover standard a été remplacé par les personnalisations que nous avons ajoutées jusqu'à présent. La bordure grise autour du popover montre les encarts renvoyés du contentViewInsets méthode. Vous pouvez ajuster les encarts au besoin pour obtenir le look souhaité. Nous allons dessiner une flèche plus tard dans le tutoriel à afficher à l'écran.
le wantedDefaultContentAppearance Cette méthode détermine si les ombres incrustées et les coins arrondis par défaut sont affichés dans la fenêtre. En retournant NON, la vue d'arrière-plan popover ne montrera plus les ombres par défaut et les coins arrondis, ce qui vous permettra d'implémenter les vôtres. Ajoutez le code suivant pour remplacer la méthode.
+ (BOOL) wantedDefaultContentAppearance return NO;
Construisez et exécutez le projet et vous pourrez voir la différence.
Nous devrons créer et gérer la flèche nous-mêmes; déclarons une propriété pour une vue d'image qui affichera la flèche. Ajoutez le code suivant à l'extension de classe.
@property (nonatomic, strong) UIImageView * arrowImageView;
Nous pouvons maintenant instancier la vue de l'image. Remplacez le code à l'intérieur du si déclaration dans initWithFrame: avec le code suivant.
self.backgroundColor = [UIColor clearColor]; UIImageView * arrowImageView = [[UIImageView alloc] initWithFrame: CGRectZero]; self.arrowImageView = arrowImageView; [auto addSubview: self.arrowImageView];
Changeons l'encadré en mettant à jour le kBorderInset défini dans PopoverBackgroundView.m avec le code suivant.
#define kBorderInset 0.0f
Pour dessiner la flèche, nous devrons déclarer une méthode pour effectuer le dessin. Ajoutez la déclaration de méthode suivante dans l'extension de classe dans PopoverBackgroundView.m.
- (UIImage *) drawArrowImage: (CGSize) taille;
Ajoutez maintenant la définition de la méthode sous @la mise en oeuvre.
- (UIImage *) drawArrowImage: (CGSize) size UIGraphicsBeginImageContextWithOptions (size, NO, 0); CGContextRef ctx = UIGraphicsGetCurrentContext (); [[UIColor clearColor] setFill]; CGContextFillRect (ctx, CGRectMake (0.0f, 0.0f, size.width, size.height)); 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 (); renvoyer l'image;
Au lieu d'utiliser une image importée, le code ci-dessus crée par programme la flèche.
Chaque fois que les limites de la sous-classe de la vue d'arrière-plan popover changent, le cadre de la flèche doit être recalculé. Nous pouvons accomplir cela en annulant layoutSubviews. Ajoutez le code suivant à PopoverBackgroundView.m.
- (void) layoutSubviews [super layoutSubviews]; CGSize arrowSize = CGSizeMake ([[classe auto] arrowBase], [[classe auto] arrowHeight]); self.arrowImageView.image = [self drawArrowImage: arrowSize]; self.arrowImageView.frame = CGRectMake (((self.bounds.size.width - arrowSize.width) kBorderInset), 0.0f, arrowSize.width, arrowSize.height);
Le cadre de la vue d'image de la flèche et l'image de la flèche sont calculés en fonction des limites de la vue d'arrière-plan déroulante, des incrustations de la bordure, de la base et de la hauteur de la flèche..
Générez et exécutez votre projet pour afficher le popover personnalisé. Même si la bordure est définie sur zéro, la flèche est ajustée pour s'aligner sur le bord intérieur de la bordure droite. En soustrayant la bordure insérée lors de la détermination de la coordonnée x pour le cadre de vue de l'image pour la flèche, nous sommes en mesure d'aligner la vue de l'image de manière appropriée..
Ce tutoriel est conçu pour vous aider à personnaliser un popover. Vous pouvez prendre le projet à partir de nombreuses directions. Par exemple, ajouter une autre vue d'image pour afficher une image de bordure personnalisée. Pour ce faire, vous suivriez un schéma similaire à celui que nous avions suivi lorsque nous avions créé la vue de l’image pour la flèche. De plus, vous pouvez personnaliser le popover en fonction de la direction de la flèche. Dans layoutSubviews, une série d'instructions if peut vous aider à vérifier la direction de la flèche et à l'ajuster en conséquence. Laissez un commentaire ou une question ci-dessous si vous souhaitez une direction spécifique avec vos personnalisations..
