Débuter avec UIKit Dynamics

1. Introduction

Dans le tutoriel précédent, j'avais expliqué quelques nouvelles fonctionnalités d'iOS 7 qui vous permettaient d'ajouter des animations subtiles et une plus grande interactivité avec étonnamment peu de code pour simuler la physique du monde réel. Dans ce tutoriel, je vais vous montrer comment créer un formulaire masqué sur une page de résultats de recherche..

Nous utiliserons un comportement de gravité et un comportement de collision pour déterminer si le formulaire est actuellement visible ou non. Nous aurons également une animation subtile de rebond gratuitement lorsque le panneau apparaîtra à la vue. Commençons.

2. Créer le projet

Ouvrez Xcode et sélectionnez Nouveau> Projet… du Fichier menu. Choisir Application à vue unique de la liste des Application iOS modèles et cliquez Suivant.

Entrez un nom pour votre projet, j'ai appelé le mien Dynamique. Entrez le nom de votre organisation, l'identifiant de l'entreprise et le préfixe de la classe. Choisir iPhone du Dispositifs liste, cliquez Suivant, et choisissez un emplacement pour enregistrer le projet.

3. Créer le storyboard

Étape 1

Ouvrir Tableau principal et supprimer le contrôleur de vue qui est là par défaut.

Étape 2

Faites glisser un Contrôleur de navigation du Bibliothèque d'objets. Xcode 5, le contrôleur de vue racine du contrôleur de navigation est par défaut un UITableViewController exemple. Sélectionnez le contrôleur de vue de table et supprimez-le. Nous allons créer un contrôleur de vue personnalisé pour ce projet..

Étape 3

Faites glisser un Contrôleur de vue du Bibliothèque d'objets et placez-le à gauche du contrôleur de navigation. Cliquez avec le bouton droit sur le contrôleur de navigation pour afficher le Inspecteur de connexions. Cliquez sur le plus à gauche de contrôleur de vue racine et choisissez le contrôleur de vue que vous venez d'ajouter.

Étape 4

Sélectionnez l'élément de navigation du contrôleur de vue et remplacez le titre par Résultats de la recherche dans le Inspecteur d'attributs sur la droite.

Étape 5

Générez et exécutez le projet pour vous assurer que les vues et les contrôleurs de vue sont correctement connectés..

4. Préparez le contrôleur de vue

Étape 1

Ouvrez dans le fichier d'en-tête du contrôleur de vue le navigateur de projet. Ajouter un UITableView propriété, un UIView propriété pour la vue formulaire, un UIBarButtonItem pour le bouton pour afficher le formulaire, et un UIButton cacher le formulaire. Ajouter une action pour le UIBarButtonItem ainsi qu'une action pour le UIButton.

La classe de contrôleur de vue doit également se conformer à la UITableViewDataSource et UITableViewDelegate protocoles. Le fichier d'en-tête du contrôleur de vue devrait maintenant ressembler à ceci:

#importation  @interface ViewController: UIViewController @property (nonatomic, faible) IBOutlet UITableView * tableView; @property (nonatomic, faible) IBOutlet UIView * filterFormView; @property (nonatomic, faible) IBOutlet UIBarButtonItem * filterButton; @property (nonatomic, faible) IBOutlet UIButton * applyFilterButton; - (IBAction) filterButtonTapped; - (IBAction) applyFilterButtonTapped; @fin

Étape 2

Dans le fichier d'implémentation du contrôleur de vue, éditez le viewDidLoad méthode. Après [super viewDidLoad], dis le UITableView exemple d'utiliser le UITableViewCell classe à peupler elle-même:

[self.tableView registerClass: [classe UITableViewCell] pourCellReuseIdentifier: @ "Cell"];

Étape 3

Ensuite, implémentez le UITableViewDataSource protocole dans le fichier d'implémentation du contrôleur de vue. Le tableau doit comporter une section, 100 lignes et chaque ligne doit afficher le numéro de ligne de la cellule..

- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return 100;  - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: @ "Cell"]; cell.textLabel.text = [NSString stringWithFormat: @ "% ld", (long) indexPath.row]; cellule de retour; 

5. Ajouter la vue de table

Étape 1

Revisiter Tableau principal et sélectionnez le contrôleur de vue que nous avons ajouté précédemment. Changer sa classe en ViewController dans le Inspecteur d'identité afin que nous puissions connecter les points de vente que nous avons créés plus tôt.

Étape 2

Faites glisser un UITableView exemple de la Bibliothèque d'objets dans la vue du contrôleur de vue. Assurez-vous que la vue de table se trouve en haut du contrôleur de vue et la couvre complètement. Utilisez le Inspecteur de connexions pour définir le contrôleur de vue en tant que vue de la table la source de données et déléguer.

Étape 3

Générez et exécutez votre application. Vous devriez voir un tableau avec 100 lignes contenant, chaque ligne affichant son numéro de ligne.

6. Ajouter le formulaire de filtrage

Étape 1

Dans Tableau principal faites glisser un UIView exemple au contrôleur de vue. Assurez-vous que la vue n'est pas ajoutée en tant qu'en-tête de la vue de table. Vous pouvez le vérifier en ouvrant le Sommaire du document à gauche et en vérifiant que la vue que vous venez d'ajouter est un pair de la vue table, pas une sous-vue.

Étape 2

Définissez la couleur d'arrière-plan de la vue sur gris clair, son origine sur (0.0, 0.0), et sa taille à (320.0, 568.0) de sorte qu'il remplisse tout l'écran, couvrant la vue de la table.

Étape 3

Accrochez cette vue au filterFormView sortie que nous avons déclaré dans le fichier d'en-tête du contrôleur de vue.

Étape 4

Ajoutez quelques contrôles à la vue, imaginez que ce soit un formulaire pour filtrer les résultats de la recherche présentés dans la vue tableau. Ajoutez un certain nombre de champs de texte et un bouton, comme indiqué dans la capture d'écran ci-dessous..

Étape 5

Connectez le Appliquer bouton avec le applyFilterButton sortie nous avons déclaré plus tôt et connectez le Retouche à l'intérieur événement au applyFilterButtonTapped action.

Étape 6

Revisitez le fichier d'implémentation du contrôleur de vue et ajoutez une déclaration de méthode vide pour applyFilterButtonTapped de sorte que l'application ne plante pas si vous appuyez accidentellement sur le bouton.

- (void) applyFilterButtonTapped 

Étape 7

Générez et exécutez votre application. Vous devriez voir le formulaire couvrant la vue de table.

7. Ajouter l'élément du bouton de la barre

Étape 1

Ajouter un UIBarButtonItem exemple à la barre de navigation. Changer son titre en Filtre et connectez-le au filtreButton sortie nous avons déclaré dans le fichier d'en-tête du contrôleur de vue. Connectez le filterButtonTapped action à la filtreButton élément de bouton de barre.

Étape 2

Revenez dans le fichier d'implémentation du contrôleur de vue et ajoutez une déclaration de méthode vide pour filterButtonTapped de sorte que l'application ne se bloque pas si vous appuyez sur l'élément de bouton de barre.

- (void) filterButtonTapped 

8. Ajouter des comportements dynamiques

Étape 1

Avant d'ajouter des comportements dynamiques, il est utile de prendre une seconde pour réfléchir à ce que nous voulons que nos comportements fassent et à la façon dont nous pouvons y parvenir..

Lorsque le formulaire de filtre n'est pas visible, il devrait être hors écran. Nous pouvons utiliser un Comportement de gravité agir à la hausse pour l'empêcher de tomber. Quand le Filtre le bouton est exploité, la gravité devrait commencer à agir vers le bas, la forme devenant visible à la suite.

Nous avons aussi besoin d'un UICollisionBehavior avec des limites de sorte que le formulaire monte pour être juste hors écran et ne tombe que jusqu'au bas de l'écran. La capture d'écran suivante montre les deux états finaux du formulaire, les lignes roses indiquant les limites de la collision. Traduisons cela en code.

Étape 2

Dans ViewController.h déclarer un UIDynamicAnimator propriété. Nous transmettrons nos comportements à cet animateur, qui déterminera ce qui doit se passer avec la vue formulaire. Déclarer un Comportement de gravitéet un UICollisionBehavior.

@property (nonatomic, strong) UIDynamicAnimator * animateur; @property (nonatomic, strong) UIGravityBehavior * gravité; @property (nonatomic, strong) UICollisionBehavior * collision;

Étape 3

Dans viewDidLoad, initialiser animateur en tant qu'animateur dynamique avec la vue du contrôleur de vue comme vue de référence. Ensuite, initialisez  la gravité et configurez-le pour agir dans une direction ascendante avec un angle de -M_PI_2 sur le filterForm vue.

Il est maintenant temps d'initialiser le contrôleur de vue collision propriété en invoquant initWithItems: et en passant un tableau avec seulement self.filterForm en elle. Nous ajoutons deux limites, une en bas de la vue et une en haut de la vue. C’est ainsi que la mise en œuvre mise à jour de viewDidLoad ressemble à:

- (void) viewDidLoad [super viewDidLoad]; [self.tableView registerClass: [classe UITableViewCell] pourCellReuseIdentifier: @ "Cell"]; self.animator = [[UIDynamicAnimator alloc] initWithReferenceView: self.view]; self.gravity = [[UIGravityBehavior alloc] initWithItems: @ [self.filterFormView]]; self.gravity.angle = -M_PI_2; [self.animator addBehavior: self.gravity]; self.collision = [[UICollisionBehavior alloc]] initWithItems: @ [self.filterFormView]]; [self.collision addBoundaryWithIdentifier: @ "TopOfView" dePoint: CGPointMake (0., -self.filterFormView.bounds.size.height) versPoint: CGPointMake (self.view.bounds.size.width, -self.filterFormView.bounds.size) .la taille)]; [self.collision addBoundaryWithIdentifier: @ "BottomOfView" fromPoint: CGPointMake (0., self.view.bounds.size.height) toPoint: CGPointMake (self.view.bounds.size.width, self.view.bounds.size.height )]; [self.animator addBehavior: self.collision]; 

Étape 4

Lorsque vous appuyez sur le bouton du filtre, nous voulons le désactiver pour éviter toute confusion de l'utilisateur. Nous souhaitons également que la gravité commence à agir de manière descendante pour que le formulaire soit visible. Mettre à jour le filterButtonTapped action comme suit:

Étape 5

Quand le Appliquer appuyez sur le bouton de la vue formulaire, nous voulons que la gravité commence à agir à nouveau pour s’assurer que le formulaire glisse hors de l’écran. Nous activons également le Filtre bouton à nouveau. Mettre à jour le applyFilterButtonTapped action comme suit:

- (void) applyFilterButtonTapped self.gravity.angle = -M_PI_2; self.filterButton.enabled = YES; 

9. Étapes finales

Étape 1

Avant de générer et d'exécuter le projet pour la dernière fois, déplaçons le formulaire de filtre hors de l'écran afin que les utilisateurs ne voient pas la diapositive de formulaire hors de l'écran lors du lancement de l'application. Met le y position pour la vue de forme de filtre à -568.

Étape 2

Créez et exécutez l'application. Appuyez sur le Filtre bouton et la forme doit glisser dans la vue, tombant en place avec un léger rebond. Appuyez sur le Appliquer bouton et regarder la forme glisser doucement hors écran à nouveau.

Conclusion

Il a fallu un peu de travail pour configurer l'interface utilisateur, mais une fois que nous avions terminé, il était très difficile d'ajouter une animation basée sur la physique. Il ne nous a fallu que quelques lignes de code.

Nous n'avions pas besoin de coder le fonctionnement de la physique, telle que le rebond. Grâce à UIKit Dynamics, il nous suffisait de spécifier les comportements souhaités et de laisser le UIDynamicAnimator objet faire le travail pour nous.