iOS 9: une introduction à 3D Touch

introduction

Avec les iPhone 6s et 6s Plus, Apple a introduit une toute nouvelle façon d’interagir avec nos appareils appelée 3D Touch. 3D Touch fonctionne en détectant la quantité de pression que vous appliquez sur l’écran de votre téléphone afin d’effectuer différentes actions. Dans ce tutoriel, je vais vous montrer comment tirer parti de 3D Touch afin que vous puissiez utiliser cette nouvelle technologie dans vos propres applications iOS 9.

Conditions préalables

Ce didacticiel nécessite que vous exécutiez Xcode 7.1 ou une version ultérieure. Au moment de la rédaction de cet article, le simulateur iOS ne prend pas encore en charge 3D Touch, ce qui signifie que tout test doit être effectué sur un appareil physique, iPhone 6s ou iPhone 6s Plus. Si vous souhaitez suivre, commencez par télécharger le projet de démarrage de GitHub.

1. Peek and Pop dans les storyboards

Dans cette première section, je vais vous montrer comment implémenter Peek et Pop fonctionnalité dans votre application à l’aide de storyboards et d’un peu de code. Si vous ne savez pas ce qu’est Peek and Pop, c’est essentiellement une façon d’appuyer sur un élément de l’interface utilisateur avec un peu plus de force pour avoir un “Peek”.

À partir d’un tel aperçu, vous pouvez alors soit lever votre doigt pour le rejeter, soit le pousser un peu plus fort pour le «Pop» en plein écran. Les éléments “Peekable” peuvent être n’importe quel contrôleur de vue, y compris des éléments tels que des e-mails, des messages et des pages Web, comme indiqué dans la capture d’écran ci-dessous.

Jetant un œil sur une page Web

Ouvrez le projet de démarrage dans Xcode et accédez à Main.storyboard. Effectuez un zoom arrière sur le storyboard en pinçant votre trackpad ou en appuyant sur Commande + –. Sélectionnez la séquence montrée dans la capture d’écran suivante.

Sélectionné Segue

Avec cette séquence sélectionnée, ouvrez le Les attributs Inspecteur et recherchez une nouvelle section nommée Peek et Pop. Cochez la case et configurez le comportement comme indiqué ci-dessous.

Options Peek et Pop

Dans ce menu, vous pouvez attribuer des identifiants personnalisés à la fois au Peek (Aperçu) et Pop (Commettre) segues. Le commit segue a également des options pour configurer tout ce que vous pouvez pour un segue régulier dans des storyboards tels que Classe, Module, et Gentil.

Créez et exécutez votre application sur votre iPhone et appuyez sur le bouton + bouton dans le coin supérieur droit pour créer un nouvel élément.

Nouvel élément créé

Appuyez fermement sur l’élément et vous verrez que nous obtenons un aperçu du contrôleur de vue détaillée de cet élément.

Aperçu de l'article

Vous verrez que notre vue détaillée n’affiche pas encore les bonnes données pour l’élément que nous prévisualisons. En effet, nous n’avons pas encore configuré la vue pour la séquence d’aperçu personnalisée que nous avons définie dans le storyboard. De retour dans votre projet, ouvrez MasterViewController.swift et remplacez le prepareForSegue(_:sender:) méthode avec l’implémentation suivante:

La première if la déclaration reste inchangée. Si ce code n’est pas exécuté, nous vérifions alors si l’expéditeur est un UITableViewCell et l’identifiant de segue est égal à "showDetailPeek". Si ces deux conditions sont remplies, nous configurons le detailItem au texte de la cellule.

Créez et exécutez à nouveau votre application. Cette fois, lorsque vous regardez un élément, vous devriez obtenir un aperçu correctement configuré, comme indiqué ci-dessous.

Aperçu correct de l'élément

Une chose importante à noter est que ces configurations de storyboard pour Peek and Pop ne fonctionneront que sur les appareils exécutant iOS 9.1 ou une version ultérieure. Pour prendre en charge les appareils exécutant iOS 9.0, vous devrez configurer votre fonctionnalité Peek and Pop dans le code, comme indiqué dans la section suivante.

2. Peek and Pop dans le code

Bien qu’un peu plus compliqué que la configuration du storyboard, la mise en œuvre par programme de Peek and Pop vous permet également d’ajouter des actions supplémentaires à vos aperçus lorsque l’utilisateur glisse vers le haut. Jetez un œil à la capture d’écran suivante pour mieux comprendre ce que je veux dire.

En relation :  Comment voir une police dans un document même si elle n'est pas installée?
Aperçu des actions

Peek and pop est géré dans le code par le UIViewControllerPreviewingDelegate protocole. Dans votre projet, créez un nouveau iOS> Source> Fichier Swift et nommez-le MasterPrévisualisation.

Fichier source Swift

Ajoutez le code suivant à MasterPreviewing.swift:

Nous faisons le MasterViewController classe conforme à la UIViewControllerPreviewingDelegate protocole.

dans le previewingContext(_:viewControllerForLocation:) méthode, nous instancions une ForceViewController à partir du storyboard et renvoyez cet objet. le preferredContentSize détermine la taille de l’aperçu Peek qui apparaîtra à l’écran. Quand une taille de (0, 0) est utilisé, l’aperçu devient automatiquement aussi grand que possible pour l’écran actuel.

dans le previewingContext(_:commitViewController:) méthode, nous terminons la transition de la MasterViewController instance et Pop le ForceViewController nous avons créé au stade Peek sur l’écran.

Pour utiliser ce nouveau code, nous devons également enregistrer des vues spécifiques pour lesquelles nous voulons générer un aperçu lorsqu’elles sont poussées fermement. Pour ce faire, ouvrez MasterViewController.swift et ajoutez le code suivant à viewDidLoad():

Nous vérifions d’abord si 3D Touch est disponible sur l’appareil (appelé Force Touch par l’API). Si tel est le cas, nous enregistrons le forceButton (celui au bas du tableau) comme vue éligible pour Peek and Pop avec.

Enfin, pour ajouter des actions à un aperçu, vous devez les définir dans l’aperçu afficher la classe de contrôleur. Ouvert ForceViewController.swift et ajoutez la méthode suivante à la classe:

Nous créons trois actions à afficher avec le ForceViewController Aperçu. La première est une action régulière et est la plus courante. Lorsque cette action est sélectionnée, le bloc de code (actuellement vide) que vous définissez lors de la création de l’action sera exécuté. La seconde est une action destructrice qui fonctionnera exactement de la même manière que la première, mais elle apparaîtra en rouge sur l’écran de prévisualisation. Enfin, nous créons un groupe d’actions qui regroupe un nombre quelconque d’autres actions sous un seul bouton.

Créez et exécutez à nouveau votre application. Cette fois, poussez fermement sur le Obliger bouton pour voir un nouveau ForceViewController aperçu comme indiqué ci-dessous.

Aperçu de la force

Faites glisser cet aperçu vers le haut pour voir les actions que nous avons définies dans le ForceViewController classe.

Forcer les actions d'aperçu

Enfin, appuyez sur le Groupe… action pour ouvrir les actions contenues dans ce groupe.

Forcer les actions d'aperçu du groupe

3. Détection de la force à travers UITouch

Sur les appareils compatibles 3D Touch, le UITouch class gagne également de nouvelles fonctionnalités sous la forme de deux nouvelles propriétés, force et maximumPossibleForce. Ces propriétés sont très utiles pour tout cas d’utilisation où vous souhaitez une mesure précise de la pression appliquée à l’écran.

Commencez par ajouter la méthode suivante au ForceViewController classe:

Nous détectons chaque fois qu’une touche sur l’écran se déplace, y compris vers et loin de l’écran. Nous récupérons la force actuelle appliquée à partir du premier UITouch objet dans le jeu et afficher les valeurs à l’écran.

Créez et exécutez votre application et appuyez sur le bouton Obliger bouton pour ouvrir le ForceViewController. Appuyez n’importe où sur l’écran avec différentes quantités de pression et vous verrez que l’étiquette à l’écran se met à jour en conséquence pour afficher la force appliquée actuelle ainsi que la force maximale qui peut être appliquée.

Force détectée

Notez que ces valeurs ne sont associées à aucune unité physique et sont indépendantes des paramètres de sensibilité 3D Touch de l’utilisateur. Une valeur de 1.0 représente la force appliquée sur un toucher moyen.

En relation :  La quête pour créer une campagne de marketing sur les réseaux sociaux

4. Actions rapides de l’écran d’accueil

En plus de la nouvelle fonctionnalité intégrée à l’application offerte par 3D Touch, vous pouvez également ajouter jusqu’à quatre raccourcis pour des fonctions spécifiques de votre application sur l’icône de votre application. Ces actions rapides sont accessibles lorsqu’un utilisateur appuie profondément sur l’icône de votre application sur l’écran d’accueil, comme indiqué dans la capture d’écran suivante.

Actions rapides Safari

Il existe deux principaux types d’actions rapides que vous pouvez créer pour votre application, statique et dynamique. Les actions rapides statiques sont définies dans votre application Info.plist et sont disponibles à tout moment pour votre application. Des actions rapides dynamiques sont créées dans votre code et sont ajoutées au fichier partagé UIApplication objet pour votre application.

Pour notre application, nous allons créer une action rapide statique et dynamique qui aura exactement la même implémentation, en ajoutant un nouvel élément à la vue de table. Il vous montrera comment utiliser les deux types d’actions dans vos propres applications.

Les actions rapides sont représentées par le nouveau UIApplicationShortcutItem class, qui a les propriétés suivantes:

  • localizedTitle le titre principal de l’action rapide (par exemple Nouvel onglet dans la capture d’écran ci-dessus)
  • localizedSubtitle un sous-titre optionnel pour l’action rapide, qui est affiché sous le titre principal
  • type un identifiant de chaîne unique à utiliser pour déterminer quelle action rapide a été sélectionnée
  • icon un optionnel UIApplicationShortcutIcon objet pouvant afficher une icône fournie par le système ou une image personnalisée
  • userInfo un dictionnaire optionnel, utile pour associer des données à une action rapide

Tout d’abord, nous allons créer l’action rapide statique. Ouvrez la cible Info.plist et ajoutez les éléments suivants exactement comme indiqué dans la capture d’écran ci-dessous:

Touches d'élément de raccourci

Notez que le UIApplicationShortcutItemIconType la clé peut être échangée avec la UIApplicationShortcutItemIconFile clé avec la valeur étant le nom du fichier image que vous souhaitez utiliser. le UIApplicationShortcutItemUserInfo La valeur que nous avons fournie n’est également qu’un exemple de dictionnaire de base pour vous montrer comment configurer vos propres données personnalisées.

Ensuite, nous allons créer l’action dynamique. Ouvert MasterViewController.swift et ajoutez les deux lignes de code suivantes dans le viewDidLoad() méthode:

Juste comme ça, vous avez créé une action rapide statique et dynamique pour votre application.

Enfin, nous devons gérer la logique de notre application lorsque ces actions rapides sont réellement sélectionnées à partir de l’écran d’accueil. Ceci est géré par le délégué de votre application application(_:performActionForShortcutItem:completionHandler:) méthode. Ouvert AppDelegate.swift et ajoutez la méthode suivante au AppDelegate classe:

Nous vérifions d’abord le type de l’action rapide puis accédons au MasterViewController objet. Sur cet objet, nous appelons le insertNewObject(_:) pour insérer un nouvel élément dans la vue tableau. Notez que cette méthode est fournie par le iOS> Application> Application Master-Detail modèle et nécessite un AnyObject paramètre. Ce paramètre n’est cependant pas utilisé dans l’implémentation réelle de la méthode et peut être n’importe quel objet. Enfin, nous appelons le completionHandler avec une valeur booléenne pour indiquer au système si l’action rapide a été exécutée avec succès ou non.

Créez et exécutez votre application une dernière fois. Une fois qu’il est chargé, accédez à l’écran d’accueil de votre appareil et appuyez fermement sur l’icône de l’application. Vous verrez que deux actions rapides sont disponibles pour votre application.

Actions rapides de l'application

Ensuite, appuyez sur l’un d’entre eux et votre application devrait s’ouvrir avec un nouvel élément ajouté à la vue de table.

Nouvel élément ajouté via un raccourci

Conclusion

Vous devriez maintenant être à l’aise avec les API 3D Touch disponibles dans iOS 9, y compris Peek et Pop, détectant la force via UITouchet actions rapides de l’écran d’accueil. 3D Touch offre de nombreuses nouvelles façons d’interagir avec votre appareil et j’encourage vivement chacun à l’adopter dans ses propres applications.

Comme toujours, vous pouvez laisser vos commentaires et commentaires ci-dessous.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.