AvatarView pour Android : faites passer vos images de profil au niveau supérieur | de Jaewoong Eum | février 2022
PLes images de profil sont une partie essentielle de toute application moderne. Stream a récemment annoncé la bibliothèque open-source AvatarView pour Android afin que vous puissiez facilement créer et personnaliser vos propres images de profil élégantes.
AvatarView prend en charge le chargement des images de profil avec un style fractionnaire, des bordures, des indicateurs et des initiales pour Android. Il fournit également des chargeurs d’images internes pour charger les images de profil avec vos stratégies de chargement.
Pour vous montrer à quel point l’API est utile, cet article vous montrera comment utiliser AvatarView afin que vous puissiez implémenter vos propres images de profil élégantes dans votre prochain projet Android.
Avant de commencer, importez AvatarView dans votre projet. Ajoutez la dépendance ci-dessous au niveau de votre application build.gradle fichier:
Noter: Pour voir la dernière version du SDK, consultez le Versions de GitHub page.
AvatarView utilise Coil pour charger les images en interne, assurez-vous donc que votre projet utilise la même version de Coil. Si votre projet utilise Glide pour charger des images, consultez AvatarView-Glide.
Vous pouvez implémenter vos propres images de profil élégantes en ajoutant io.getstream.avatarview.AvatarView dans votre fichier de mise en page XML, comme illustré dans l’exemple suivant :
Vous pouvez également personnaliser AvatarView en définissant des attributs personnalisés dans votre fichier XML. AvatarView vous permet de personnaliser la bordure, les initiales, la forme, l’indicateur et la prise en charge RTL avec les attributs personnalisés.
Pour en savoir plus sur les attributs, vous pouvez consulter la documentation AvatarView Attributes.
Vous pouvez facilement charger une image de profil sur votre AvatarView avec le loadImage (données) une fonction:
Vous pouvez passer les paramètres suivants pour charger une image :
- Chaîne de caractères
- URI
- HttpUrl
- Fichier
- DrawableRes
- Dessinable
- Bitmap
Une image de profil de style fractionnaire combine plusieurs images de profil en une seule image cohérente et est l’un des styles les plus largement utilisés pour représenter les profils de groupe et de canal. AvatarView prend en charge le chargement d’images de profil de style fractionnaire à l’aide de plusieurs URL, comme illustré dans l’exemple ci-dessous :
Vous pouvez charger jusqu’à quatre images par défaut. Mais, si vous souhaitez limiter le nombre de sections quels que soient les paramètres, vous pouvez le contrôler avec le avatarViewMaxSectionSize attribut dans votre mise en page XML :
AvatarView prend en charge des attributs entièrement personnalisables pour la bordure, la forme, l’indicateur et les initiales, de sorte que vous avez un contrôle total sur l’apparence de nos images de profil. Voyons comment personnaliser les composants d’AvatarView.
Vous pouvez personnaliser la couleur et l’épaisseur de la bordure avec les attributs ci-dessous :
- avatarVoirBordureCouleur: détermine la couleur de la bordure
- avatarViewBorderWidth: détermine l’épaisseur de la bordure
Vous pouvez utiliser les attributs ci-dessus dans votre mise en page XML comme dans l’exemple suivant :
Table des matières
Tableau de couleurs pour les bordures
Si vous souhaitez rendre votre image de profil plus colorée, vous pouvez le faire avec le avatarVueIndicateurBordureCouleurTableau qui applique un tableau de couleurs à votre bordure.
Tout d’abord, déclarez votre tableau de couleurs dans votre couleurs.xml fichier:
Ensuite, définissez le tableau de couleurs sur votre AvatarView :
Par défaut, AvatarView prend en charge cercle et rectangle formes pour personnaliser vos images de profil.
Cercle
Vous pouvez définir la forme d’un cercle en définissant le avatarViewShape attribuer à cercle comme on le voit dans le code ci-dessous :
Remarque : Le réglage par défaut du avatarViewShape est déjà cerclevous n’avez donc pas besoin de le définir explicitement si vous souhaitez en faire une forme circulaire.
Rectangle
Vous pouvez définir la forme d’un rectangle en définissant le avatarViewShape attribuer à rond_rect. En outre, vous pouvez modifier le rayon de la bordure avec le avatarViewBorderRadius attribut:
AvatarView prend en charge les indicateurs, qui sont utilisés pour indiquer le statut en ligne d’un utilisateur dans les applications de messagerie ou pour ajouter des badges personnalisés. Vous pouvez activer les indicateurs en passant vrai à la avatarViewIndicatorEnabled attribut:
Vous pouvez également personnaliser l’indicateur avec vos propres ressources drawable :
https://gist.github.com/skydoves/9b881bcb9add795ef9d1768e24a30561.js “
Les espaces réservés sont une fonctionnalité importante dans UX. AvatarView prend en charge les types d’espaces réservés suivants : Chargement en cours et Erreur.
Vous pouvez afficher un espace réservé avec votre ressource drawable pendant le chargement de votre image comme dans l’exemple suivant :
Vous pouvez également afficher un espace réservé avec votre ressource drawable lorsque la demande d’image échoue, comme illustré dans l’exemple suivant :
Les initiales sont un autre moyen populaire de représenter les informations d’un utilisateur. AvatarView prend en charge le style des initiales et vous pouvez entièrement personnaliser chaque attribut :
Si vous souhaitez charger les initiales lorsque votre demande d’image échoue, vous pouvez le faire avec des écouteurs personnalisés et le avatarInitiales propriété comme dans l’exemple suivant :
AvatarView’s AvatarCoil prend en charge la personnalisation des chargeurs d’images internes Coil. En personnalisant le AvatarCoilvous pouvez généraliser toutes les requêtes de chargement d’images AvatarView.
Vous pouvez définir un ImageLoader de généraliser les requêtes de chargement avec le AvatarCoil comme dans l’exemple suivant :
AvatarView fournit une usine par défaut – appelée AvatarImageLoaderFactory – pour charger des images avec les vôtres ImageLoader.
Vous pouvez également personnaliser les fabriques de bitmaps pour exploiter les bitmaps d’images avant de les charger sur AvatarView. Pour plus d’informations, consultez la Custom AvatarBitmapFactory.
AvatarView prend en charge une solution d’intégration avec Stream Chat SDK pour Android.
Pour commencer, ajoutez d’abord la dépendance ci-dessous :
Remarque : Vous pouvez consulter la version la plus récente sur GitHub.
Ensuite, vous devez définir le StreamAvatarBitmapFactory sur le AvatarCoil avec ce qui suit :
Nous vous recommandons de placer le code au-dessus de votre classe Application pour l’initialiser immédiatement.
Enfin, définissez vos modèles User ou Channel sur votre AvatarView comme dans l’exemple suivant :
Noter: L’image du canal sera chargée en premier. Cependant, si l’image du canal n’existe pas, le style fractionnaire des membres sera chargé.
Dans cet article, vous avez vu comment implémenter des images de profil élégantes avec AvatarView qui se démarquent et correspondent à l’apparence de votre application.
N’oubliez pas : AvatarView est un référentiel open source, donc tout le monde peut contribuer à l’amélioration du code, de la documentation ou soumettre des demandes de fonctionnalités.
Vous pouvez trouver l’auteur d’AvatarView sur GitHub à github / skydoves pour toute question ou commentaire. Vous pouvez également nous suivre sur Twitter @getstream_io pour le contenu technique à venir.
Comme toujours, bon codage !
– Jaewoong
Commentaires
Laisser un commentaire