Share
Le développement de widgets pour la plate-forme Android implique un ensemble de tâches légèrement différent de celui du développement d'applications standard. Dans cette série de didacticiels, nous allons suivre le processus de développement d’un widget horloge analogique personnalisable. L'horloge sera basée sur la classe Android AnalogClock et personnalisée avec vos propres graphiques..
Dans cette série de didacticiels, nous développons un widget d'horloge analogique Android personnalisable à l'aide de la classe AnalogClock et de graphiques personnalisés. Dans la première partie de la série, nous créons le projet en préparant le fichier Manifest et d’autres ressources. Dans cette partie, nous allons travailler sur la conception du widget. Cela impliquera la création de graphiques pour le cadran d'horloge et les aiguilles, ainsi que la mise en œuvre de la présentation en XML. Nous allons créer des graphiques pour différentes densités d'appareils. Dans la dernière partie de la série, nous allons implémenter afin de permettre à l'utilisateur de choisir parmi une sélection de modèles pour l'horloge. Nous allons donc créer trois options de conception ici..
Voici la deuxième partie de notre série consacrée à la création d’un widget horloge analogique Android personnalisable à partir de quatre didacticiels:
Le widget Android AnalogClock utilise trois images: le cadran de l'horloge, l'aiguille des minutes et l'aiguille des heures. Nous allons donc créer trois éléments de conception pour chaque version du widget Horloge que nous voulons que les utilisateurs puissent choisir entre. Nous allons également créer des options de conception alternatives avec les aiguilles du cadran, des heures et des minutes. Pour ce projet, nous devrons cibler différentes densités d'écran de périphériques, pour lesquelles nous allons créer des fichiers image à quatre échelles différentes..
Nous allons créer trois modèles d’horloge, chacun avec un cadran, une aiguille des minutes et une aiguille des heures. Vous pouvez bien sûr utiliser vos propres conceptions à la place, mais n'hésitez pas à utiliser les fichiers image que nous utilisons ici pour commencer. Les fichiers d’image correspondant à chaque motif et à chaque densité sont inclus dans le lien de téléchargement de ce didacticiel et le seront également dans le téléchargement de la partie 4..
Le premier est le cadran de l'horloge. N'oubliez pas que nous avons spécifié le widget comme étant large de deux cellules et haut de deux cellules, ce qui donne une taille maximale de 146dp (pixels indépendants de la densité). Pour cette série de tutoriels, nous allons créer quatre versions de chaque image pour répondre aux quatre catégories de densité..
Au lieu de créer des images pour chaque densité, vous pouvez également utiliser les graphiques NinePatch, qui sont des images bitmap pouvant être agrandies ou réduites pour s'adapter aux densités de périphérique, vous permettant de créer une seule image pour chaque conception. La faisabilité d'utiliser NinePatch dépend en partie du contenu des conceptions que vous utilisez, mais il existe des outils pour vous aider à les créer si vous le souhaitez..
C'est plus facile si vous commencez avec la densité moyenne, qui devrait être au maximum de 146 pixels sur les deux axes. Voici le cadran d'horloge par défaut que nous utilisons à densité moyenne, que vous pouvez utiliser soit comme référence pour vos propres motifs, soit si vous ne voulez pas créer les vôtres:
Dans ce cas, l'image est de 146 pixels sur les deux axes, mais vous pouvez la réduire si vous le souhaitez. Nous spécifierons une marge pour les périphériques exécutant des API Android inférieures à 14, mais ne fournirons pas de marge pour les périphériques de 14 ans et plus, car aux niveaux les plus récents de l'API, une marge automatique est placée entre les widgets. Vous pouvez utiliser à peu près n'importe quelle conception - votre horloge n'a même pas besoin d'être circulaire. Inclure des marques ou des chiffres indiquant les heures sur le cadran est recommandé du point de vue de la convivialité bien que cela ne soit pas essentiel.
Voici les deux modèles de cadrans d'horloge que nous utiliserons, l'un d'une pierre et l'autre métallique, présentés ici à densité moyenne:
Une fois que vous avez conçu vos cadrans d'horloge, vous pouvez créer des versions alternatives de chaque image pour les différentes densités. En fonction de vos conceptions, cela ne sera peut-être pas nécessaire, mais nous inclurons des versions personnalisées de chaque image pour les conceptions dans ce didacticiel. Ce qui suit indique la taille maximale que nous utilisons pour notre widget sur les axes X et Y à chaque densité:
Lorsque vous avez des fichiers image pour chaque conception de cadran d'horloge que vous souhaitez utiliser (et des versions pour chaque densité, le cas échéant), copiez-les dans les dossiers pouvant être dessinés dans l'espace de travail du projet de widget Android. Eclipse crée normalement un dossier pour chaque catégorie de densité automatiquement, mais si vous n'utilisez qu'une image pour toutes les densités, vous pouvez créer un dossier simplement nommé "drawable" et y placer l'image. Les dossiers pour chaque niveau de densité sont:
Android AVD Manager vous permettra de tester votre projet de widget terminé à chacune de ces densités. Après avoir enregistré vos images dans les différents dossiers pouvant être dessinés, assurez-vous d’avoir utilisé les mêmes noms dans chacun d’eux. Par exemple, l'un des modèles de numérotation que nous utilisons est nommé "clock_dial_stone". Il s'agit du nom de fichier de l'image correspondant au cadran en pierre de chaque dossier de densité, bien que le contenu de chaque version soit différent, ne serait-ce que par sa taille. Si vous avez encore des doutes sur la façon dont cela devrait fonctionner, il vous suffit de télécharger les fichiers image à l'aide du lien de téléchargement en haut de ce didacticiel et de parcourir les dossiers pour en avoir l'idée..
Créez ensuite une image pour les aiguilles des heures et des minutes de votre horloge, avec des images pour chaque motif et chaque densité que vous ciblez. Voici nos aiguilles de minutes de densité moyenne pour chaque motif:
Encore une fois, n'hésitez pas à les utiliser pour commencer ou pour élaborer votre propre projet. Notez que ces fichiers image contiennent un espace transparent autour de la main. Vous devez concevoir chacune de vos images avec la hauteur du cadran d'horloge sur laquelle elles seront utilisées. Chaque main doit être dans la position exacte où elle se trouverait lorsque vous pointerez vers douze, placée sur l’image du cadran et à mi-chemin de celle-ci. La main doit également se trouver horizontalement au centre de son fichier image, car elle sera pivotée à partir de son point central lors de l'affichage de l'heure. La longueur des aiguilles dans le fichier image dépend vraiment de vous, à condition que la hauteur totale de l'image soit identique à celle du cadran..
Le diagramme ci-dessous montre la pleine échelle des images de l'aiguille avec l'aiguille des minutes à 12 heures et l'aiguille des heures à trois heures (l'aiguille des heures a été tournée de 90 degrés dans le sens des aiguilles d'une montre sur son point central):
Une fois que vous avez trié vos conceptions des aiguilles des minutes, enregistrez-en une de nouveau pour chaque densité, en les redimensionnant pour les faire correspondre à la hauteur du cadran de l'horloge. Copiez-les à nouveau dans vos dossiers pouvant être dessinés, en utilisant le même nom pour chaque motif dans les dossiers de densité, comme pour les images de numérotation..
Procédez ensuite au même processus pour vos aiguilles des heures. Voici les aiguilles des heures pour les trois modèles que nous utilisons:
Le principe est le même que pour les aiguilles des minutes, à ceci près que les aiguilles des heures doivent généralement être plus courtes. Concevez vos aiguilles des heures vers 12 heures et préparez des versions pour chaque densité, en les copiant dans vos dossiers pouvant être tirés comme pour les aiguilles des minutes..
La conception du widget va utiliser certaines données que nous inclurons dans les dossiers "Valeurs" de notre projet. À partir de l'API Android 14, le système inclut automatiquement les marges entre les widgets, tels qu'ils apparaissent sur l'écran d'accueil de l'utilisateur. Cependant, sur les versions précédentes de l'API, ce n'était pas le cas. Pour cette raison, nous voulons spécifier une marge à inclure autour du widget Widget sur les appareils exécutant des niveaux Android inférieurs à 14. Ceci est un cas dans lequel nous pouvons exploiter le fait que nous avons des dossiers de valeurs ciblant ces deux catégories de niveaux d'API utilisateur..
Nous définirons les marges dans notre fichier de présentation XML en faisant référence à une ressource de dimension. Dans le répertoire "values", créez un nouveau fichier nommé "dimensions.xml" - sélectionnez le dossier "values" dans Eclipse et cliquez avec le bouton droit de la souris ou choisissez "Fichier", puis "Nouveau", "Fichier" et entrez le nom du fichier..
Lorsque vous cliquez sur le bouton "Terminer", Eclipse crée et ouvre le fichier. Sélectionnez l'onglet "dimensions.xml" pour modifier le code. Entrez les informations suivantes:
8dp
Ce code répertorie simplement une valeur de dimension utilisant des pixels indépendants de la densité avec un nom afin que nous puissions y faire référence ailleurs..
Enregistrez le fichier. Maintenant, copiez-le en cliquant dessus avec le bouton droit de la souris dans le dossier "Valeurs" ou en le sélectionnant, puis en choisissant "Éditer" - puis en sélectionnant "Copier". Collez-le dans le dossier "values-v14" que nous avons créé la dernière fois. Cliquez avec le bouton droit de la souris ou sélectionnez le dossier, choisissez "Modifier", puis "Coller". Le fichier apparaîtra dans le dossier "values-v14", qui cible les niveaux de l'API à partir de 14. Ouvrez cette nouvelle copie du fichier et modifiez la valeur de la dimension pour indiquer une marge de zéro comme suit:
0dp
Désormais, lorsque la présentation XML fait référence à cette valeur de dimension à l'aide de son nom, une valeur de zéro sera utilisée sur les périphériques exécutant l'API 14 plus et une valeur de 8dp sera utilisée sinon..
Définissons maintenant notre widget en XML. N'oubliez pas que nous avons spécifié une présentation initiale pour le widget dans le fichier XML dans lequel nous avons défini ses propriétés de base. La disposition à laquelle nous avons fait référence était "clock_widget_layout", alors créez ce fichier maintenant. Cliquez avec le bouton droit de la souris ou sélectionnez votre dossier "Mise en page" et choisissez "Fichier" puis "Nouveau", "Fichier". Entrez "clock_widget_layout.xml" comme nom de fichier et cliquez sur "Terminer".
Sélectionnez l'onglet "clock_widget_layout.xml" quand Eclipse ouvre le fichier afin de pouvoir modifier le code XML. Nous utilisons une disposition relative pour notre widget. Si vous souhaitez utiliser une conception différente, vous pouvez également utiliser une disposition linéaire ou une disposition de cadre, car ce sont les seules prises en charge par les widgets. Pour utiliser la disposition relative, ajoutez le plan suivant à votre fichier de disposition XML:
Ici, nous spécifions un ID pour le widget, que nous utiliserons pour implémenter des clics dessus dans notre code Java de la partie 4. Notez que le code fait également référence à la valeur de dimension que nous avons créée, à l’aide de la syntaxe standard - le nom des "dimensions". Le fichier ".xml" n'a pas d'importance, il vous suffit de lister un élément "dimen" dans un fichier de valeurs pour s'y référer de cette façon.
Dans la disposition relative, ajoutez votre widget AnalogClock comme suit:
Il s’agit de l’élément standard Analog Clock d’Android, qui nous permet de personnaliser l’affichage. Nous utilisons un attribut ID afin de pouvoir faire référence au widget en Java. Les trois derniers attributs spécifient les ressources pouvant être extraites que nous avons créées pour les aiguilles du cadran, des minutes et des heures. Si vous avez enregistré le vôtre avec des noms de fichiers différents, modifiez ce code pour les refléter. Android sélectionnera le fichier pouvant être dessiné dans le dossier de densité correspondant sur chaque appareil utilisateur..
Étant donné que nous permettons aux utilisateurs de choisir un modèle, nous allons en fait inclure les trois modèles dans notre code XML, ce qui signifie que tous sauf un sont initialement invisibles. Assurez-vous que le premier motif que vous incluez est celui que vous voulez afficher par défaut, puis ajoutez les autres comme suit:
Encore une fois, modifiez les noms tirables pour refléter les noms des cadrans, des images des minutes et des aiguilles des heures pour chacune de vos conceptions. Vous pouvez inclure plus de trois motifs si vous le souhaitez - assurez-vous que la visibilité de tous les masques sauf un d'entre eux est définie sur invisible, afin qu'un seul motif (l'option par défaut) apparaisse initialement. Nous serons en mesure d'implémenter le choix de l'utilisateur entre ces conceptions en Java en utilisant les attributs ID d'élément Analog Clock, qui se terminent tous par des entiers commençant à zéro et s'incrémentant avec chaque conception. Enregistrez votre fichier de mise en page.
Voici des captures d'écran de chacune de nos conceptions une fois le widget terminé:
C'est le processus de conception de notre widget horloge complet. Si vous ne souhaitez pas créer vos propres images de conception à ce stade, utilisez d'abord les images du dossier de téléchargement. Dans le prochain tutoriel, nous utiliserons la classe AppWidgetProvider pour implémenter notre widget en Java. Dans la dernière partie de la série, nous allons implémenter les clics utilisateur sur le widget, en présentant un choix entre les conceptions et en mettant à jour les préférences de l'utilisateur pour afficher en continu l'option choisie..
Accentsconagua