Une vue de progression polie et flexible pour Android – The Startup
Progressbar est l’un des widgets les plus fréquemment utilisés dans le développement Android. Cependant, comme nous le savons, la barre de progression par défaut fournie par le SDK Android a de mauvaises options personnalisables. Il n’y a aucun moyen d’afficher la valeur de progression actuelle, aucune animation de progression, aucun attribut de base dégradé / arrondi. À chaque fois, nous devons créer un fichier XML dessinable différent, mais il est toujours limité. Cette publication est sur la façon de mettre en œuvre un poli et flexible ProgressView, entièrement personnalisable avec des animations et sa philosophie de conception UX.
En règle générale, progressBar ne dessine que la progression. Nous devons donc créer une TextView ou une autre vue pour montrer la progression aux utilisateurs.
Ce type de conception a quelques mauvais points.
– Nous devons gérer une autre ressource distincte comme TextView.
– Nécessite plus d’espaces dans la mise en page.
– Nous devons créer de nouvelles définitions de couleurs de texte pour prendre en charge le mode sombre.
– Du point de vue de l’expérience utilisateur, les utilisateurs doivent regarder deux vues séparées et fusionner en une seule dans leur tête.
Alors comment pouvons-nous l’améliorer?
L’intégration de TextView et de la barre de progression est une solution très simple. Nous devons maintenant résoudre un autre problème, la couleur de TextView. Si nous alignons le textView au centre, la couleur du TextView doit être modifiée à la suite de la progression. Le résultat sera donc que certaines lettres seront colorées et les autres ne seront pas colorées. Selon la couleur, la lisibilité peut être médiocre car la couleur du TextView n’a pas de cohérence.
Alors quel est le prochain candidat?
TextView est intégré dans la barre de progression et TextView se déplace de manière flexible en fonction de la progression. Si la largeur de la TextView est supérieure à la largeur de la progression, la TextView sera située à l’extérieur (côté droit) de la barre de progression. Nous pouvons considérer la couleur du TextView en fonction de la couleur d’arrière-plan du conteneur. Et si la taille de la largeur de la progression est supérieure à la taille de la largeur du TextView, le TextView sera situé à l’intérieur de la barre de progression.
Maintenant, le TextView a la cohérence des couleurs et semble plus poli!
J’ai été inspirée par Bella Choi qui a travaillé avec moi dans l’entreprise précédente en tant que designer UI / UX.
Maintenant, incluons le ProgressView dans notre projet!
Tout d’abord, nous devons ajouter un code de dépendance au fichier build.gradle de votre module.
dependencies {
implementation "com.github.skydoves:progressview:1.0.8"
}
Si vous souhaitez obtenir la dernière version, vous pouvez la vérifier ici.
Voici un exemple de base de mise en œuvre ProgressView dans votre mise en page XML.
Nous pouvons entièrement personnaliser les attributs de ProgressView, notamment les couleurs, la progression min / max / actuelle, l’animation, l’arrondi, le rembourrage, les espaces entre l’étiquette et la barre de progression.
Nous pouvons donner un effet de dégradé à la barre de progression en utilisant les attributs ci-dessous.
Nous pouvons changer la couleur de progression et les couleurs dégradées en utilisant les méthodes ci-dessous.
Nous pouvons implémenter des animations de progression lorsque la valeur de progression est modifiée. Cette bibliothèque contient quatre animations de base.
Nous pouvons contrôler l’animation de remplissage en utilisant les attributs ou la méthode ci-dessous.
Nous pouvons donner un effet de surbrillance sur la barre de progression lorsque vous cliquez dessus.
Nous pouvons écouter la valeur de progression est modifiée ou la barre de progression est cliquée.
Dans cette publication, nous avons examiné l’origine de la bibliothèque ProgressView et comment l’utiliser. Les développeurs Android doivent comprendre les philosophies de base liées à l’interface utilisateur / UX, car nous collaborons directement avec les concepteurs et, de toute façon, nous créons des choses visibles. Nous devons donc bien combiner les conceptions et la philosophie de développement pour convenir à chaque situation du projet de l’entreprise.
Vous pouvez référencer plus de détails sur le ProgressView dans le lien ci-dessous!
