Material Design 2.0 a introduit plusieurs nouveaux concepts. L'un d'eux porte une attention particulière aux formes géométriques des éléments d'interface. Et il existe un moyen facile de créer de belles formes personnalisées. Il s'appelle MaterialShapeDrawable. Voyons à quel point il est utile et facile à utiliser.
Il existe plusieurs façons d'ajouter des éléments graphiques à l'écran d'une application Android. Le plus simple est d'importer des bitmaps au format webp ou png. Une autre option consiste à utiliser VectorDrawable, qui vous permet d'étirer l'image à la taille dont vous avez besoin. Une autre façon d'ajouter des graphiques à l'écran consiste à utiliser ShapeDrawable. Ces derniers sont le moyen le plus simple d'ajouter un arrière-plan simple ou même de créer une icône. Les images créées avec ShapeDrawable sont indépendantes de la densité de pixels à l'écran. Ils peuvent être décrits dans le fichier xml, faire partie d'une autre ressource graphique (par exemple, StateListDrawable) et sont présents dans le SDK Android, à partir de l'API v.1.
Pour modifier l'apparence d'une figure, nous pouvons modifier plusieurs propriétés ShapeDrawable: le nom de la figure, la couleur de remplissage (ou dégradé) et la couleur de bordure de la figure. Pour les rectangles, vous pouvez également définir le rayon des coins. En utilisant ces propriétés, vous pouvez créer des graphiques qui seront utilisés comme images individuelles sur l'écran, des séparateurs, des arrière-plans de boutons ou à toute autre fin. Si l'application utilise l'API v.21 + et ShapeDrawable comme arrière-plan pour les éléments avec élévation, l'ombre sous ces éléments aura également la forme correcte:
ShapeDrawable est un outil pratique qui fait presque toujours bien son travail, mais avec l'avènement de Material Design 2.0, les développeurs ont besoin de quelque chose de plus flexible. Le nouveau système de conception encourage l'utilisation de différentes formes pour souligner leur signification, leur état et leur style d'application individuel. J'ai écrit ci-dessus qu'il existe plusieurs façons de faire ce qui est souhaité, mais la plus simple d'entre elles n'est plus pertinente. Est-ce à dire que nous devons commencer à utiliser des graphiques vectoriels et ainsi perdre la possibilité de «libérer» créer des ombres pour les éléments d'interface avec élévation? Ou vaut-il la peine de revenir à l'utilisation d'images raster et de créer des ressources graphiques pour six densités de pixels possibles à l'écran? Heureusement, avec l'avènement de Material Design 2.0, une toute nouvelle bibliothèque de composants est apparue.
Cette bibliothèque a été créée pour unifier l'apparence et le comportement de l'interface utilisateur Material Design sur toutes les versions d'Android et d'autres plates-formes (il existe des versions de cette bibliothèque pour iOS, le Web et pour Flutter). La bibliothèque de composants implémente de nombreuses fonctionnalités pour le nouveau Material Design. Par exemple, il inclut le composant BottomAppBar avec le comportement attendu. Parmi les autres composants et utilitaires, il existe la classe MaterialShapeDrawable. À mon avis, c'est un outil nécessaire pour résoudre les tâches que le nouveau système de conception pose aux développeurs.
Bien que MaterialShapeDrawable soit toujours considéré comme expérimental dans la version 1.0.0 de la bibliothèque, il peut être utilisé pour créer des effets sympas dans l'application. Dans la classe MaterialShapeDrawable, vous pouvez décrire une forme en spécifiant l'apparence de ses côtés et chacun de ses angles. Ces propriétés spécifiées peuvent être contrôlées par un interpolateur, ce qui leur permet de s'animer.
Pour créer votre propre MaterialShapeDrawable, vous pouvez utiliser le constructeur auquel vous devez passer un objet de type ShapePathModel dans les paramètres. Il stocke des informations sur chaque côté et chaque coin de la figure dans les classes EdgeTreatment et CornerTreatment, respectivement (il y a toujours exactement quatre côtés et angles, mais cela n'interfère pas avec la description de presque n'importe quelle figure avec leur aide). Vous pouvez spécifier des descriptions personnellement pour chaque côté et coin, ou les définir une fois pour la figure entière en appelant une méthode.
La bibliothèque possède déjà plusieurs descriptions prêtes à l'emploi du traitement des côtés et des angles, qui incluent la plupart des innovations concernant la forme des composants introduites dans Material Design 2.0. Déjà présent: RoundedCornerTreatment - pour les coins arrondis, CutCornerTreatment - pour les coins coupés, TriangleEdgeTreatment - pour couper ou ajouter un triangle sur le côté. Pour démontrer leur travail, il existe un exemple simple:
val shapePathModel = ShapePathModel().apply { setAllCorners(CutCornerTreatment(dip(5).toFloat())) setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true)) } val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply { setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) paintStyle = Paint.Style.FILL } textView.background = backgroundDrawable
Cela ressemblera à ceci:
Bien sûr, vous pouvez simplement créer vos propres descriptions de visages et d'angles. La forme est toujours définie pour l'élément supérieur gauche et Drawable effectuera les opérations de rotation / réflexion pour obtenir la forme finale. Il y a un petit exemple pour le démontrer:
class CutoutCornersTreatment(val size: Float) : CornerTreatment() { override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) { shapePath.reset(0.0f, size * interpolation) shapePath.lineTo(size * interpolation, size * interpolation) shapePath.lineTo(size * interpolation, 0f) } } class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) { shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f) } }
Si ce MaterialShapeDrawable est utilisé comme arrière-plan, le résultat sera le suivant:
Le package bottomappbar de la nouvelle bibliothèque de composants de matériaux a un BottomAppBarTopEdgeTreatment. Il décrit la découpe dans le BottomAppBar pour le bouton FloatingActionButton. Son côté supérieur peut être animé en fonction de la position et de la taille du bouton. Je vous conseille de lire le code de ces classes afin de voir de vos propres yeux que MaterialShapeDrawable est très flexible à utiliser et presque tout peut être fait avec.
Si nous parlons du ShapeDrawable habituel, il y a un autre détail qui mérite d'être mentionné - la possibilité de projeter une ombre de la forme correspondant au contour. Comme vous pouvez maintenant créer des contours de formes très inhabituelles à l'aide de MaterialShapeDrawable, il serait décevant de ne pas apporter la forme de l'ombre à la forme de l'image, surtout lorsque ces ombres peuvent être vues partout dans Matarial Design 2.0. MaterialShapeDrawable calcule également l'apparence de l'ombre. En utilisant la propriété shadowEnabled, vous pouvez activer l'ombre, qui suivra exactement le contour de la figure elle-même, il est également possible de déterminer le rayon, l'élévation et la couleur de l'ombre. Cela semble trop beau pour être vrai? Malheureusement, oui. Si vous utilisez l'ombre de MaterialShapeDrawable, vous obtenez une ombre normale (dessinée par la méthode setShadowLayer () de la classe Paint, qui a été créée pour dessiner des ombres sur le texte), mais rognée aux bordures du composant d'interface utilisateur dans lequel le résultat est affiché:
Gardez à l'esprit que MaterialShapeDrawable est toujours considéré comme expérimental, comme son API, et pourrait changer à l'avenir. Il convient également de noter que le code de la nouvelle bibliothèque de composants de matériaux est ouvert, donc la création de tickets dans un outil de suivi des bogues ou même de demandes de tir avec correction de problèmes connus est la bienvenue. En fait, lorsque vous lisez ces lignes, l'API est déjà légèrement différente dans la branche principale de la bibliothèque (par exemple, ShapeAppearanceModel sera utilisé à la place de ShapePathModel), ce qui indique le travail actif. L'une des fonctionnalités prometteuses de la prochaine version pourrait être la possibilité de déterminer les côtés / angles par défaut pour l'ensemble du thème de l'application. Vous pouvez en savoir plus à ce sujet dans la documentation officielle ou les sources de la bibliothèque.
Du traducteur:
C'est cool qu'il existe des outils qui ajoutent de nouvelles fonctionnalités au ShapeDrawable habituel et aident à créer des graphiques pas les plus simples. Cela permet au développeur de ne pas tirer le concepteur pour chaque petite chose, mais de résoudre le problème lui-même, et nécessite beaucoup moins de temps. Nous attendons les prochaines versions de la bibliothèque des composants de matériaux pour essayer de nouvelles façons de résoudre les problèmes existants.