Comprendre le système de disposition WatchKit

étiquette. Vous pouvez considérer un groupe comme un conteneur pour d'autres éléments d'interface. Un groupe possède de nombreuses propriétés que vous pouvez personnaliser directement dans Interface Builder..

Étape 1: Définissez la mise en page de votre application

Il est important de planifier la mise en page en détail avant de commencer le développement. Cela vous épargnera des heures et des heures de maux de tête si, à un moment donné, vous vous rendez compte que la fonctionnalité vraiment cool que vous voulez créer n'est pas possible ou n'a pas l'air bien sur un périphérique physique. Assurez-vous d'avoir lu les consignes relatives à l'interface humaine Apple Watch..

Pour cet exemple, je vais vous apprendre à créer une mise en page pour une application hôtelière dans laquelle vous pouvez trouver des hôtels proches de votre position actuelle. Je conçois l'écran qui montrera les détails d'un hôtel en particulier. Comme je l’ai mentionné dans l’introduction, je n’écrirai aucun code. Au lieu de cela, je vais me concentrer sur la compréhension du mécanisme du nouveau système de présentation.

Laissant de côté mes compétences en dessin, voici ce que j'ai en tête pour ma mise en page. le nom de l'Hotel sera en haut de l'écran et en dessous, il y aura quelques icônes étoiles montrant la note de l'hôtel. Je veux ensuite ajouter un image avec ses adresse et deux boutons.

Étape 2: Ajout d'un groupe

Notre contrôleur d'interface est vide pour le moment et il n'y a pas de groupe de base. Pour ajouter de nouveaux éléments, faites-les glisser de la liste. Bibliothèque d'objets à droite dans le Contrôleur d'interface. le Navigateur de scène sur la gauche est utile pour vérifier si les éléments sont correctement positionnés. La première chose à faire est d’ajouter un groupe, ce qui nous permettra de faire défiler verticalement si le contenu ne correspond pas à l’écran. Faites glisser un groupe du Bibliothèque d'objets et déposez-le dans le Contrôleur d'interface comme indiqué ci-dessous.

Maintenant que vous avez un groupe dans votre contrôleur d’interface, vous pouvez voir ses attributs dans Inspecteur d'attributs sur la droite. Regardons certains d'entre eux plus en détail.

• Disposition: La disposition détermine si les éléments du groupe sont disposés horizontalement ou verticalement. Lorsque vous ajoutez un élément, il sera placé à côté ou au-dessous du précédent..
• Insets: Cet attribut détermine les encarts supérieur, inférieur, gauche et droit du groupe..
• Espacement: Comme son nom l'indique, il détermine l'espacement entre les éléments du groupe..
• Contexte: Vous pouvez définir une image comme arrière-plan du groupe et l'animer en nommant les images de manière séquentielle..
• Position: L'attribut position détermine la position horizontale (gauche, centrale, droite) et verticale (haut, centre, bas) du groupe..
• Taille: L'attribut size détermine la largeur et la hauteur de l'élément. Il y a trois valeurs, Taille adaptée au contenu (ajusté automatiquement en fonction du contenu), Relatif au conteneur (prend la taille du conteneur et le multiplie par la valeur définie), Fixé (valeur constante).

Gardez à l'esprit que Apple Watch est disponible en deux tailles. Vous devez utiliser la même présentation dans les deux cas, mais vous pouvez rencontrer quelques petites différences. En cliquant sur l'icône plus à gauche d'un attribut, vous pouvez définir un attribut qui ne sera appliqué que lorsque l'application sera exécutée sur le périphérique spécifié..

Continuons à construire notre mise en page. Changer la Disposition de groupe à Verticale de sorte que le contenu défile verticalement lorsque j'ajoute plus d'éléments. Met le Horizontal position à Centre afin que le contenu soit centré. Enfin, définissez le Largeur attribuer à Largeur par rapport au conteneur avec le multiplicateur réglé à 1. Cela élargira le groupe pour remplir toute la largeur de l'écran.

Étape 3: Ajout d'une étiquette

Maintenant que nous avons défini les propriétés principales de notre groupe de conteneurs, ajoutons une étiquette au groupe. Du Bibliothèque d'objets, ajoutez une étiquette au groupe que vous avez ajouté il y a un instant. Si vous sélectionnez l'étiquette, vous verrez que sa largeur n'occupe pas tout l'espace disponible. Réglons cela en modifiant l'attribut width en Relatif au conteneur. Pour centrer l'étiquette, changez le Horizontal attribuer à Centre Et mettre Alignement du texte à Centre.

Que se passe-t-il si le nom de l'hôtel est trop long? Je veux qu'il s'agrandisse et grandisse verticalement. Pour cela, changez le Lignes attributde l'étiquette à 0. Cela signifie que le nom de l'hôtel s'étendra sur plusieurs lignes si nécessaire. Changez le texte de l'étiquette pour voir le résultat vous-même. Le résultat devrait ressembler à la capture d'écran ci-dessous.

Étape 4: Ajout d'étoiles

Nous voulons également montrer la note de l'hôtel. L'idée est d'avoir un groupe juste en dessous du nom de l'hôtel avec le nombre d'étoiles de l'hôtel. Ajoutez un autre groupe au groupe que nous avons déjà. En d'autres termes, le nouveau groupe est imbriqué dans le premier groupe. 

Je veux que les cinq étoiles soient sur la même ligne et centrées. Comme je l'ai déjà mentionné, je ne peux pas ajouter ou supprimer des objets au moment de l'exécution, mais je peux masquer et afficher des objets. Je vais ajouter cinq images au groupe. Si l'hôtel a moins d'étoiles, je les cacherai au moment de l'exécution.

Faites glisser cinq images dans le groupe imbriqué et définissez la largeur de chaque étoile sur Relatif au conteneur. Changer le multiplicateur de 1 à 0,2. La raison du choix 0,2 comme le multiplicateur est simple. Si je veux que cinq images tiennent dans l'espace disponible sur la même ligne, je veux que chaque image représente 20% de la largeur du groupe. Changer la Horizontal position à Centre afin qu'ils soient toujours centrés, peu importe le nombre d'étoiles,.

Ensuite, assignons une image cool à chaque image. Vous pouvez trouver les images que j'utilise dans les fichiers source de ce tutoriel. Met le Image attribuer à star.png et changez le mode pour Aspect Fit pour s'assurer que le format d'image est respecté.

Le résultat devrait ressembler à l'image animée ci-dessous. Vous pouvez même essayer de vérifier la Caché propriété de l'une des images de la Inspecteur d'attributs et voyez comment les étoiles sont toujours centrées.

Étape 5: Ajout de l'image de l'hôtel

Commencez par télécharger l'exemple d'image d'un hôtel à partir d'images gratuites. Je souhaite ajouter une image de l'hôtel pour montrer à l'utilisateur à quoi cet hôtel ressemble. Ajouter une nouvelle image à partir du Bibliothèque d'objets comme vous venez de le faire pour les étoiles. Changer la Image attribuer à l'image que vous avez téléchargée et définir le Mode à Aspect Fit.

Changer la Horizontal position à Centre et le Largeur à Relatif au conteneur. Assurez-vous toujours d’ajouter l’image en tant qu’élément imbriqué du groupe principal en vérifiant la hiérarchie des calques dans Navigateur de scène sur la gauche. Ensemble la taille être Taille adaptée au contenu redimensionner automatiquement l'image en fonction de ses dimensions.

Étape 6: Ajout de l'adresse

Sous l'image, j'aimerais ajouter une étiquette d'adresse. Nous pourrions aussi ajouter une carte, mais utilisons une étiquette pour cet exemple. Faites glisser une étiquette du Bibliothèque d'objets et placez-le sous l'image de l'hôtel. Ensemble Lignes à 0 et Largeur à Relatif au conteneur. Changez le texte pour qu'il soit une adresse aléatoire de votre choix.

Comme vous l'avez peut-être remarqué, le contrôleur d'interface est maintenant plus grand. Il redimensionne automatiquement dans le storyboard afin que vous puissiez voir son contenu.

Étape 7: Ajout de boutons

Le contrôleur d'interface doit avoir deux boutons en bas. Je veux que les boutons aient la moitié de la largeur de l'écran et soient placés côte à côte. Comme notre groupe principal a une disposition verticale, nous devons ajouter un groupe imbriqué afin que les boutons soient positionnés horizontalement au lieu de verticalement..

Ajoutez un nouveau groupe comme indiqué ci-dessous et ajoutez deux boutons. Définir leur Largeur attribuer à Relatif au conteneur et mettre le multiplicateur à 0.5. Met le Verticale position des deux boutons pour Centre pour les centrer verticalement.

Définissez le texte du premier bouton sur "À partir de 99 $" et la couleur de fond à un beau rouge. Définissez le texte du deuxième bouton sur "Afficher plus" et la couleur de fond au bleu. Le contrôleur d'interface devrait maintenant ressembler à ceci:

Assurez-vous d’avoir sélectionné le bon schéma et appuyez sur Commande-R exécuter l'application WatchKit.

Lorsque le simulateur iOS s'ouvre, il vous reste une dernière chose à faire. Sélectionnez le simulateur iOS et choisissez Matériel> Écrans externes> Apple Watch 42 mm. L'Apple Watch Simulator apparaîtra à côté de votre iPhone Simulator. Vous pouvez maintenant voir votre mise en page de travail en action. Voir le résultat dans la vidéo ci-dessous.

Conclusion

Dans ce tutoriel, je vous ai présenté les principales fonctionnalités et concepts permettant de créer des mises en page complexes dans WatchKit. Nous avons examiné l’ajout et le positionnement d’éléments d’interface utilisateur et de quelques meilleures pratiques. Vous êtes maintenant en mesure de transformer vos idées d'applications Apple Watch en réalité. J'espère que vous avez apprécié ce tutoriel.