Partager via

Introduction à iOS 7

  • Article

Cet article décrit les nouvelles API principales introduites dans iOS 7, notamment les transitions du contrôleur de vue, les améliorations apportées aux animations UIView, à UIKit Dynamics et au kit de texte. Il couvre également certaines des modifications apportées à l’interface utilisateur et les nouvelles fonctionnalités multitâche enchanced.

iOS 7 est une mise à jour majeure vers iOS. Il introduit une conception complète de l’interface utilisateur qui met le focus sur le contenu plutôt que sur le chrome de l’application. Outre les modifications visuelles, iOS 7 ajoute une pléthore de nouvelles API pour créer des interactions et des expériences plus riches. Ce document interroge les nouvelles technologies introduites avec iOS 7 et sert de point de départ pour une exploration plus approfondie.

Améliorations de l’animation UIView

iOS 7 augmente la prise en charge de l’animation dans UIKit, ce qui permet aux applications de faire des choses qui ont précédemment besoin de passer directement dans l’infrastructure Core Animation. Par exemple, UIView peut désormais effectuer des animations de printemps ainsi que des animations d’images clés, qui ont précédemment été CAKeyframeAnimation appliquées à un CALayer.

Spring Animations

UIView prend désormais en charge l’animation des modifications de propriété avec un effet spring. Pour ajouter cela, appelez la ou AnimateNotifyAsync la AnimateNotify méthode, en passant des valeurs pour le ratio d’amortissement du ressort et la vitesse initiale du printemps, comme décrit ci-dessous :

  • springWithDampingRatio : valeur comprise entre 0 et 1, où l’oscillation augmente pour une valeur plus petite.
  • initialSpringVelocity : vitesse initiale du printemps sous la forme d’un pourcentage de la distance totale d’animation par seconde.

Le code suivant produit un effet de printemps lorsque le centre de la vue d’image change :

void AnimateWithSpring ()
{
    float springDampingRatio = 0.25f;
    float initialSpringVelocity = 1.0f;

    UIView.AnimateNotify (3.0, 0.0, springDampingRatio, initialSpringVelocity, 0, () => {

        imageView.Center = new CGPoint (imageView.Center.X, 400);

    }, null);
}

Cet effet de printemps entraîne le rebond de l’affichage de l’image à mesure qu’il termine son animation à un nouvel emplacement central, comme illustré ci-dessous :

Cet effet de printemps provoque le rebond de l’affichage de l’image à mesure qu’il termine son animation dans un nouvel emplacement central

Animations d’images clés

La UIView classe inclut désormais la AnimateWithKeyframes méthode de création d’animations d’images clés sur un UIView. Cette méthode est similaire à d’autres UIView méthodes d’animation, sauf qu’une autre NSAction est passée en tant que paramètre pour inclure les images clés. Dans les NSActionimages clés, les images clés sont ajoutées en appelant UIView.AddKeyframeWithRelativeStartTime.

Par exemple, l’extrait de code suivant crée une animation de trame clé pour animer le centre d’une vue, ainsi que pour faire pivoter la vue :

void AnimateViewWithKeyframes ()
{
    var initialTransform = imageView.Transform;
    var initialCeneter = imageView.Center;

    // can now use keyframes directly on UIView without needing to drop directly into Core Animation

    UIView.AnimateKeyframes (2.0, 0, UIViewKeyframeAnimationOptions.Autoreverse, () => {
        UIView.AddKeyframeWithRelativeStartTime (0.0, 0.5, () => {
            imageView.Center = new CGPoint (200, 200);
        });

        UIView.AddKeyframeWithRelativeStartTime (0.5, 0.5, () => {
            imageView.Transform = CGAffineTransform.MakeRotation ((float)Math.PI / 2);
        });
    }, (finished) => {
        imageView.Center = initialCeneter;
        imageView.Transform = initialTransform;

        AnimateWithSpring ();
    });
}

Les deux premiers paramètres de la AddKeyframeWithRelativeStartTime méthode spécifient l’heure de début et la durée de l’image clé, respectivement, sous la forme d’un pourcentage de la longueur d’animation globale. L’exemple ci-dessus entraîne l’animation de la vue d’image sur son nouveau centre au cours de la première seconde, suivie d’une rotation de 90 degrés au cours de la seconde suivante. Étant donné que l’animation spécifie UIViewKeyframeAnimationOptions.Autoreverse comme option, les deux images clés s’animent également dans l’inverse. Enfin, les valeurs finales sont définies sur l’état initial dans le gestionnaire d’achèvement.

Les captures d’écran ci-dessous illustrent l’animation combinée par le biais des images clés :

Cette capture d’écran illustre l’animation combinée par le biais des images clés

UIKit Dynamics

UIKit Dynamics est un nouvel ensemble d’API dans UIKit qui permettent aux applications de créer des interactions animées basées sur la physique. UIKit Dynamics encapsule un moteur physique 2D pour rendre cela possible.

L’API est déclarative par nature. Vous déclarez comment les interactions physiques se comportent en créant des objets , appelés comportements, pour exprimer des concepts physiques tels que la gravité, les collisions, les ressorts, etc. Ensuite, vous attachez le ou les comportements à un autre objet, appelé animateur dynamique, qui encapsule une vue. L’animateur dynamique s’occupe de l’application des comportements physiques déclarés aux éléments dynamiques - éléments qui implémentent IUIDynamicItem, tels qu’un UIView.

Il existe plusieurs comportements primitifs différents pour déclencher des interactions complexes, notamment :

  • UIAttachmentBehavior : attache deux éléments dynamiques de sorte qu’ils se déplacent ensemble, ou attache un élément dynamique à un point de pièce jointe.
  • UICollisionBehavior : permet aux éléments dynamiques de participer à des collisions.
  • UIDynamicItemBehavior : spécifie un ensemble général de propriétés à appliquer à des éléments dynamiques, tels que l’élasticité, la densité et la friction.
  • UIGravityBehavior - Applique la gravité à un élément dynamique, ce qui entraîne l’accélération des éléments dans la direction gravitationnelle.
  • UIPushBehavior : applique la force à un élément dynamique.
  • UISnapBehavior : permet à un élément dynamique de s’aligner sur une position avec un effet de printemps.

Bien qu’il existe de nombreuses primitives, le processus général d’ajout d’interactions basées sur la physique à une vue à l’aide de UIKit Dynamics est cohérent entre les comportements :

  1. Créez un animateur dynamique.
  2. Créez un ou plusieurs comportements.
  3. Ajoutez des comportements à l’animateur dynamique.

Exemple Dynamics

Examinons un exemple qui ajoute la gravité et une limite de collision à un UIView.

UIGravityBehavior

L’ajout de la gravité à une vue d’image suit les 3 étapes décrites ci-dessus.

Nous allons travailler dans la ViewDidLoad méthode de cet exemple. Tout d’abord, ajoutez une UIImageView instance comme suit :

image = UIImage.FromFile ("monkeys.jpg");

imageView = new UIImageView (new CGRect (new CGPoint (View.Center.X - image.Size.Width / 2, 0), image.Size)) {
                    Image =  image
                }

View.AddSubview (imageView);

Cela crée une vue d’image centrée sur le bord supérieur de l’écran. Pour rendre l’image « chute » avec gravité, créez une instance d’un UIDynamicAnimator:

dynAnimator = new UIDynamicAnimator (this.View);

Prend UIDynamicAnimator une instance d’une référence UIView ou d’un UICollectionViewLayout, qui contient les éléments qui seront animés par le ou les comportements attachés.

Ensuite, créez une UIGravityBehavior instance. Vous pouvez passer un ou plusieurs objets implémentant le IUIDynamicItem, par exemple :UIView

var gravity = new UIGravityBehavior (dynItems);

Le comportement est passé à un tableau de IUIDynamicItem, qui, dans ce cas, contient l’instance unique UIImageView que nous ananimons.

Enfin, ajoutez le comportement à l’animateur dynamique :

dynAnimator.AddBehavior (gravity);

Cela entraîne l’animation de l’image vers le bas avec gravité, comme illustré ci-dessous :

Emplacement de l’image de départEmplacement de l’image de fin

Étant donné qu’il n’y a rien qui limite les limites de l’écran, la vue d’image tombe simplement en bas. Pour limiter la vue afin que l’image entre en collision avec les bords de l’écran, nous pouvons ajouter un UICollisionBehavior. Nous allons aborder cela dans la section suivante.

UICollisionBehavior

Nous allons commencer par créer un UICollisionBehavior élément et l’ajouter à l’animateur dynamique, comme nous l’avons fait pour le UIGravityBehavior.

Modifiez le code pour inclure les UICollisionBehavioréléments suivants :

using (image = UIImage.FromFile ("monkeys.jpg")) {

    imageView = new UIImageView (new CGRect (new CGPoint (View.Center.X - image.Size.Width / 2, 0), image.Size)) {
        Image =  image
    };

    View.AddSubview (imageView);

    // 1. create the dynamic animator
    dynAnimator = new UIDynamicAnimator (this.View);

    // 2. create behavior(s)
    var gravity = new UIGravityBehavior (imageView);
    var collision = new UICollisionBehavior (imageView) {
        TranslatesReferenceBoundsIntoBoundary = true
    };

    // 3. add behaviors(s) to the dynamic animator
    dynAnimator.AddBehaviors (gravity, collision);
}

La UICollisionBehavior propriété a été appelée TranslatesReferenceBoundsIntoBoundry. La définition de cette valeur true entraîne l’utilisation des limites de la vue de référence comme limite de collision.

Maintenant, lorsque l’image s’anime vers le bas avec gravité, elle rebondit légèrement en bas de l’écran avant de s’installer pour s’y reposer.

UIDynamicItemBehavior

Nous pouvons contrôler davantage le comportement de la vue d’image tombante avec des comportements supplémentaires. Par exemple, nous pourrions ajouter un UIDynamicItemBehavior pour augmenter l’élasticité, ce qui entraîne le rebond de l’affichage de l’image plus lorsqu’il se heurte au bas de l’écran.

L’ajout d’un UIDynamicItemBehavior suit les mêmes étapes que les autres comportements. Commencez par créer le comportement :

var dynBehavior = new UIDynamicItemBehavior (dynItems) {
    Elasticity = 0.7f
};

Ensuite, ajoutez le comportement à l’animateur dynamique :

dynAnimator.AddBehavior (dynBehavior);

Avec ce comportement en place, la vue d’image rebondit davantage lorsqu’elle entre en collision avec la limite.

Modifications générales de l’interface utilisateur

Outre les nouvelles API UIKit telles que UIKit Dynamics, les transitions du contrôleur et les animations UIView améliorées décrites ci-dessus, iOS 7 introduit diverses modifications visuelles apportées à l’interface utilisateur et les modifications d’API associées pour différents affichages et contrôles. Pour plus d’informations, consultez la vue d’ensemble de l’interface utilisateur iOS 7.

Kit de texte

Le Kit de texte est une nouvelle API qui offre de puissantes fonctionnalités de mise en page et de rendu de texte. Il est basé sur l’infrastructure Core Text de bas niveau, mais est beaucoup plus facile à utiliser que Core Text.

Pour plus d’informations, consultez notre TextKit

Multitâche

iOS 7 change quand et comment le travail en arrière-plan est effectué. L’achèvement des tâches dans iOS 7 ne permet plus aux applications de se réveiller lorsque les tâches s’exécutent en arrière-plan et que les applications sont réveillées pour le traitement en arrière-plan de manière non contiguë. iOS 7 ajoute également trois nouvelles API pour mettre à jour des applications avec un nouveau contenu en arrière-plan :

  • Extraction en arrière-plan : permet aux applications de mettre à jour le contenu en arrière-plan à intervalles réguliers.
  • Notifications à distance : permet aux applications de mettre à jour le contenu lors de la réception d’une notification Push. Les notifications peuvent être silencieuses ou afficher une bannière sur l’écran de verrouillage.
  • Service de transfert en arrière-plan : permet le chargement et le téléchargement de données, tels que les fichiers volumineux, sans limite de temps fixe.

Pour plus d’informations sur les nouvelles fonctionnalités multitâche, consultez les sections iOS du guide d’arrière-plan Xamarin.

Résumé

Cet article traite de plusieurs nouveaux ajouts majeurs à iOS. Tout d’abord, il montre comment ajouter des transitions personnalisées aux contrôleurs d’affichage. Ensuite, il montre comment utiliser des transitions dans les vues de collection, à partir d’un contrôleur de navigation, ainsi que de manière interactive entre les vues de collection. Ensuite, il présente plusieurs améliorations apportées aux animations UIView, montrant comment les applications utilisent UIKit pour les éléments précédemment nécessaires à la programmation directement sur Core Animation. Enfin, la nouvelle API Dynamics UIKit, qui apporte un moteur physique à UIKit, est introduite en même temps que la prise en charge du texte enrichi désormais disponible dans l’infrastructure du Kit de texte.