Share
Sympli est un service qui simplifie la conversion d’une interface utilisateur conçue de manière professionnelle en un format compatible avec les applications (par exemple, un scénarimage pour iOS ou un XML pour Android). Cela fonctionne du transfert de la conception dans Sketch et Photoshop à la mise en œuvre pour Android, iOS ou Web. Si vous n'avez pas travaillé avec Sympli et souhaitez en savoir plus sur la manière dont il facilite le transfert de la conception aux développeurs, veuillez lire notre article ici sur Envato Tuts +, qui présente Sympli du point de vue du concepteur. Un autre article sur Sympli paraîtra prochainement et couvrira des aspects plus généraux de la manière dont les développeurs peuvent utiliser Sympli pour une mise en œuvre plus rapide sous Android Studio et Xcode..
Dans cet article, je vais vous montrer comment, en tant que développeur, utiliser les conceptions d'interface créées avec Sympli et les importer facilement dans Xcode pour vos applications iOS..
Lorsque vous utilisez Sympli gratuitement, vous pouvez avoir un seul projet pouvant contenir de nombreuses conceptions. Si vous souhaitez suivre, un fichier PSD (document Photoshop) est inclus avec les fichiers de projet terminés sur GitHub pour ce tutoriel, que nous utiliserons comme conception. Sinon, si vous ne possédez pas Photoshop et que vous travaillez avec un concepteur, demandez-leur d'importer leur conception PSD ou Sketch dans un projet iOS Sympli pour le partager avec vous et rejoindre la partie Xcode du didacticiel..
Pour créer un projet, rendez-vous sur le site Web de Sympli et connectez-vous (ou inscrivez-vous et vérifiez un nouveau compte si vous n'en avez pas déjà un). Une fois que vous vous êtes connecté, vous devriez être amené à votre Projets écran avec le message suivant au milieu:
Cliquer sur Créer un nouveau projet et définissez les détails de votre nouveau projet comme suit:
Vous pouvez appeler votre nouveau projet comme vous le souhaitez mais, en raison du PSD fourni, vous devez vous assurer que vous réglez Plate-forme à iOS et Résolution à @ 2x.
Tout d'abord, pour ajouter le PSD à votre projet Sympli, téléchargez le plugin Sympli Photoshop et installez-le. Une fois le plugin installé, ouvrez le fichier PSD téléchargé et cliquez sur le bouton Sympli dans la barre d’outils de droite de Photoshop:
Si vous ne trouvez pas ce bouton, vous pouvez également ouvrir le plug-in en accédant à Fenêtre> Extensions> Sympli dans la barre de menu. Vous devrez d’abord vous connecter à Sympli, puis l’écran suivant devrait apparaître:
Avec le Interface.psd fichier ouvert (comme indiqué en haut de la fenêtre du plugin Sympli), il suffit de cliquer sur le bouton Sync bouton pour télécharger votre interface dans votre projet.
Maintenant, avec notre projet et notre conception, nous sommes prêts à commencer à travailler dans Xcode..
Tout d’abord, vous devrez télécharger le plugin Sympli pour Xcode. Une fois téléchargé, ouvrez le .Dmg déposer et exécuter le programme d'installation.
Vous pouvez maintenant exécuter Xcode normalement. Cette première fois que vous ouvrez Xcode après avoir installé Sympli, l'alerte suivante s'affichera:
Assurez-vous que vous appuyez sur Charger le paquet activer les fonctionnalités de Sympli dans Xcode.
Après cette installation très simple, vous êtes maintenant prêt à utiliser Sympli.!
Sympli peut être utilisé immédiatement avec n’importe quel projet existant, mais pour ce tutoriel, je vais tout recommencer à zéro. iOS> Application> Application à vue unique modèle. Si vous suivez, vous pouvez créer votre propre projet à partir de ce modèle..
Tout d'abord, vous verrez qu'il y a un nouveau bouton dans le coin en haut à droite de votre fenêtre Xcode:
Cliquez sur ce bouton pour afficher l'invite suivante vous permettant de vous connecter à votre compte Sympli:
Une fois que vous vous êtes connecté avec succès, vous devriez alors voir tous vos projets listés dans le volet Sympli de votre fenêtre Xcode:
Cliquez sur le projet à partir duquel vous souhaitez charger votre interface, puis cliquez à nouveau sur le design que vous souhaitez utiliser sur l'écran suivant:
Avant de commencer à créer notre interface avec Sympli, ouvrez le dossier de votre projet. Tableau principal fichier, supprimez le contrôleur de vue existant et faites glisser un contrôleur de navigation Bibliothèque d'objets. Pour faciliter votre travail, modifiez également la classe de taille en Largeur compacte et Hauteur régulière. Votre story-board devrait maintenant ressembler à ceci:
Avant de commencer à faire glisser des éléments d’interface, cliquez sur le bouton situé dans le coin supérieur droit du volet Sympli et sélectionnez le menu contextuel. Importer des actifs option:
Vous verrez alors l'invite suivante:
Cette invite vous permet de choisir les actifs que vous souhaitez importer dans votre projet. Par défaut, Sympli importera tous vos actifs de toutes les tailles requises dans le répertoire principal de votre projet. Assets.xcassests catalogue.
Il est temps que nous commencions à créer notre interface! Il est important de noter que, même si vos fichiers PSD peuvent avoir l’air identique à une interface iOS, Sympli ne peut créer que des éléments d’interface de base, tels que UIView, UIImageView, et UIButton. Pour les vues spécifiques à la plate-forme et générées par le système, telles que Barre de navigation et UITableView, vous devrez toujours les créer et les configurer manuellement dans votre storyboard.
Tout d'abord, nous allons configurer notre vue table. Cliquez sur la vue de votre table dans votre storyboard et dans le Inspecteur de taille, met le Hauteur de la rangée à 90:
Vous pouvez voir les dimensions spécifiées par la conception en cliquant sur l'un des éléments de votre interface dans le volet Sympli. Dans ce cas, si vous cliquez sur l’un des éléments de la vue tableau, vous verrez une hauteur de ligne de 90 pt:
Comme nous allons simplement créer une cellule, puis la réutiliser, nous devons créer la cellule initiale avec tous les éléments d'interface requis. Pour ce faire, nous allons copier les éléments d’interface du dernier Captures d'écran élément de vue de table.
Les vues d'une conception Sympli peuvent simplement être glissées et déposées directement dans votre scénarimage. Par défaut, lorsqu'il est placé dans votre storyboard, Sympli positionne votre élément de la même façon que dans le PSD d'origine. Cela fonctionne bien pour la plupart des interfaces, mais cela peut être gênant pour les cellules de table. En effet, elles sont le plus souvent placées en dehors des limites de la cellule que vous modifiez..
De ce fait, il peut être plus facile d’utiliser l’interface Sympli pour appliquer des parties spécifiques de votre conception à une vue. Cela peut être fait en sélectionnant un élément dans le volet Sympli et en cliquant sur le bouton Appliquer bouton sur de nombreux attributs de la vue, tels que la couleur, la taille et les bordures de l'arrière-plan. Quand vous cliquez Appliquer, les attributs sont immédiatement attribués à la vue actuellement sélectionnée. Essayez ceci en faisant glisser une vue dans la cellule de votre vue tableau, en sélectionnant le carré d'aperçu rouge dans Sympli, puis en appliquant les attributs taille, couleur d'arrière-plan et présentation:
Veuillez noter que lorsque vous appliquez la couleur de remplissage, vous pouvez choisir entre le Texte ou Contexte. Sélectionner Texte lorsque vous utilisez une étiquette, une vue de texte ou quelque chose de similaire.
De même pour les étiquettes, Sympli extrait le texte et les détails de police de Photoshop ou de Sketch pour que vous puissiez facilement les glisser-déposer ou les appliquer à d’autres étiquettes de votre interface:
En utilisant l'interface intuitive de Sympli, il est aussi simple que cela de créer une interface d'application dans un story-board à partir d'un fichier Sketch ou PSD. Une fois que vous avez ajouté tous vos éléments d'interface, il vous reste toutefois à mettre en œuvre la mise en page automatique et à créer des contraintes pour toutes vos vues. Sympli simplifie simplement le processus de transition de la phase de conception à la phase de développement complet.
Bien que Sympli soit principalement destiné à être utilisé dans Xcode avec des fichiers de storyboard, il offre également une fonction de programmation très petite mais très utile..
Si vous modifiez un fichier de code avec Sympli ouvert, lorsque vous passez la souris sur un attribut de couleur, un petit copie bouton apparaîtra. Lorsque vous cliquez dessus, Sympli copiera le code requis pour créer une UIColor objet représentant cette couleur dans votre presse-papiers. Vous pouvez ensuite coller cela directement dans votre code, ce qui est beaucoup plus rapide que de rechercher les valeurs RVB d'une couleur puis de les saisir manuellement..
Il est également important de noter qu'en haut de la barre latérale de Sympli, vous pouvez sélectionner le langage de programmation que vous utilisez afin de créer le code correct:
Dans l’ensemble, Sympli facilite beaucoup, en tant que développeur, la copie et la mise en oeuvre de l’interface utilisateur d’un concepteur. Bien que certains travaux manuels spécifiques à la plate-forme restent à effectuer en termes de mise en page automatique et d'éléments d'interface spécialisés, Sympli élimine de nombreux processus manuels fastidieux, tels que la correspondance exacte des couleurs et des tailles..
Comme toujours, veillez à laisser vos commentaires dans les commentaires ci-dessous. N'oubliez pas de consulter notre autre didacticiel sur Sympli et restez à l'écoute pour en savoir plus.!
Accentsconagua