Introduction à iOS 7

Article
07/13/2023

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

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

Améliorations apportées à l’animation UIView

iOS 7 augmente la prise en charge des animations dans UIKit, ce qui permet aux applications d’effectuer des tâches qui auparavant devaient être déposés directement dans l’infrastructure Core Animation. Par exemple, UIView peut maintenant effectuer des animations de ressort ainsi que des animations d’image clé, qui étaient précédemment CAKeyframeAnimation appliquées à un CALayer.

Animations de printemps

UIView prend désormais en charge l’animation des modifications de propriété avec un effet spring. Pour ajouter cela, appelez la AnimateNotify méthode ou AnimateNotifyAsync , en transmettant des valeurs pour le rapport d’amortissement du ressort et la vitesse initiale du ressort, 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 ressort en pourcentage de la distance d’animation totale par seconde.

Le code suivant produit un effet spring 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 ressort fait apparaître la vue d’image à rebondir à mesure qu’elle termine son animation vers un nouvel emplacement central, comme illustré ci-dessous :

Cet effet spring fait que la vue image semble rebondir au fur et à mesure qu’elle termine son animation vers 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 méthodes d’animation UIView , sauf qu’un autre NSAction est passé en tant que paramètre pour inclure les images clés. Dans le NSAction, les images clés sont ajoutées en appelant UIView.AddKeyframeWithRelativeStartTime.

Par exemple, l’extrait de code suivant crée une animation d’image clé pour animer le centre d’une vue et 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 respectivement l’heure de début et la durée de l’image clé sous forme de pourcentage de la longueur globale de l’animation. L’exemple ci-dessus entraîne l’animation de la vue d’image vers 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 à 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 à travers les images clés :

Cette capture d’écran illustre l’animation combinée à travers les images clés

UIKit Dynamics

UIKit Dynamics est un nouvel ensemble d’API dans UIKit qui permet 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. 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 prend soin d’appliquer les comportements physiques déclarés aux éléments dynamiques - éléments qui implémentent IUIDynamicItem, tels qu’un UIView.

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

UIAttachmentBehavior : attache deux éléments dynamiques afin 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 aux collisions.
UIDynamicItemBehavior : spécifie un ensemble général de propriétés à appliquer aux é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 le sens gravitationnel.
UIPushBehavior : applique la force à un élément dynamique.
UISnapBehavior : permet à un élément dynamique de s’aligner sur une position avec un effet de ressort.

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 d’UIKit Dynamics est cohérent entre les comportements :

Créez un animateur dynamique.
Créer un ou plusieurs comportements.
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 pour cet exemple. Tout d’abord, ajoutez un 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 que l’image « tombe » avec gravité, créez un 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 en fonction des comportements attachés.

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

var gravity = new UIGravityBehavior (dynItems);

Le comportement est transmis à un tableau de IUIDynamicItem, qui dans ce cas contient le seul UIImageView instance que nous animarons.

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 début de l’image Emplacement de l’image de fin

Étant donné que rien ne limite les limites de l’écran, la vue d’image tombe simplement du bas. Pour limiter la vue afin que l’image entre en collision avec les bords de l’écran, nous pouvons ajouter un UICollisionBehavior. Nous aborderons cela dans la section suivante.

UICollisionBehavior

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

Modifiez le code pour inclure :UICollisionBehavior

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);
}

a UICollisionBehavior une proprié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 sur le bas de l’écran avant de s’y installer.

UIDynamicItemBehavior

Nous pouvons contrôler davantage le comportement de la vue d’image descendante avec des comportements supplémentaires. Par exemple, nous pourrions ajouter un UIDynamicItemBehavior pour augmenter l’élasticité, ce qui fait que la vue d’image rebondit davantage lorsqu’elle entre en collision avec le bas de l’écran.

L’ajout d’un UIDynamicItemBehavior suit les mêmes étapes qu’avec 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);

Une fois 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 de contrôleur et les animations UIView améliorées décrites ci-dessus, iOS 7 introduit diverses modifications visuelles de l’interface utilisateur et les modifications d’API associées pour différents affichages et contrôles. Pour plus d’informations, consultez 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 disposition et de rendu de texte. Il s’appuie sur l’infrastructure texte de base de bas niveau, mais il est beaucoup plus facile à utiliser que le texte principal.

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 maintient plus les applications éveillées lorsque les tâches s’exécutent en arrière-plan, et les applications sont réveillées pour le traitement en arrière-plan d’une manière non contiguë. iOS 7 ajoute également trois nouvelles API pour la mise à 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 de charger et de télécharger des données, telles que des fichiers volumineux, sans limite de temps fixe.

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

Résumé

Cet article décrit plusieurs nouveaux ajouts majeurs à iOS. Tout d’abord, il montre comment ajouter des transitions personnalisées à Afficher les contrôleurs. 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 qui nécessitaient auparavant la programmation directement sur Core Animation. Enfin, la nouvelle API UIKit Dynamics, qui apporte un moteur physique à UIKit, est introduite parallèlement à la prise en charge de texte enrichi désormais disponible dans l’infrastructure Text Kit.