Android Jetpack Compose : créer un thème de matériau de remplacement

Donc, nous avons défini notre thème, maintenant comment pouvons-nous ajouter ce nouveau thème aux éléments de composition, comme un bouton ? La première fois que j’ai essayé cela, j’ai fait ce qui suit:

Et le résultat était :

Eh bien, cela ne ressemble pas du tout à ce que nous avons défini dans notre thème. À droite? J’ai donc regardé comment le bouton est défini dans MaterialTheme

Comme je l’ai rapidement découvert (ce qui, en toute honnêteté, était parfaitement attendu, je ne comprenais pas seulement, au début, les implications de la création de notre propre thème), le bouton utilise des attributs MaterialTheme, que nous n’avons pas définis. Cela signifie alors que nous devons remplacer complètement les attributs Button par les nôtres. Et c’est ce que nous avons fait.

Qui à son tour crée ce bouton

Ok, ça a l’air mieux, mais la typographie a l’air bizarre, n’est-ce pas ? J’ai donc regardé le code du bouton Material et nous pouvons voir ce qui suit :

Eh bien, il semble qu’il remplace notre TextStyle par la typographie MaterialTheme. D’accord, nous pouvons résoudre ce problème en ajoutant notre propre TextStyle. Nous remplaçons donc notre texte par le code ci-dessous qui donnera le résultat final

D’ACCORD! Maintenant, cela ressemble à l’un de nos boutons !

Comme nous l’avons appris auparavant, nous devrons encapsuler les composables du thème matériel dans nos propres composables avec nos attributs de thème. Essayons de créer une surface qui corresponde aux thèmes sombres et clairs. À première vue, nous pourrions simplement utiliser la surface fournie. Mais maintenant, nous nous attendons déjà à ce que les choses ne fonctionnent pas comme nous le souhaitons, n’est-ce pas ?

Le thème Light a l’air correct (mais l’est-il vraiment ?) mais l’obscurité n’est rien comparée à ce à quoi nous nous attendions. Il ne semble pas sombre du tout ! Mais maintenant nous savons quel est le problème. En examinant à nouveau la définition de Compose Surface, nous voyons ce qui suit :

Ouais. Il utilise les couleurs MaterialTheme. Alors enroulons-le autour de notre propre surface

Ouais! C’est ce que nous voulons. Maintenant, quelques choses à noter ici.

1. Nous avons défini la couleur de fond comme la couleur de la surface. Mais c’est là que les choses deviennent intéressantes. Puisque vous définissez votre propre thème, vous êtes libre de décider quelle est la couleur que vous voulez pour vos surfaces, vous pouvez utiliser n’importe quel attribut de couleur que vous avez défini dans votre thème : primaire, secondaire, fond, surface ou même banane.
2. Des lecteurs plus avides ont peut-être remarqué que nous définissons notre contentColor à defaultContentColorFor(couleur) Qu’est-ce que c’est?

MaterialTheme nous fournit une méthode qui est contentColorFor(couleur) mais nous ne pouvons pas l’utiliser car il utilise la spécification MaterialTheme, qui revient à la coloration MaterialTheme. Par conséquent, nous utilisons notre méthode pour récupérer nos couleurs de thème

En utilisant nos éléments de composants, qui entourent les composants prédéfinis, et en modifiant certains attributs, comme la couleur, nous sommes en mesure de personnaliser entièrement notre thème et de permettre aux propriétés de Dark and Light de s’appliquer correctement.

J’espère qu’avec ces connaissances, vous pourrez appliquer cette logique à n’importe quel composant de votre choix et créer votre tout nouveau thème personnalisé.