Android Jetpack Compose: Erstellen Sie ein Ersatzmaterialthema Lähde: Pedro Glória | Januar 2022

Wir haben also unser Thema definiert, wie können wir dieses neue Thema nun zu komponierenden Elementen wie einer Schaltfläche hinzufügen? Beim ersten Versuch habe ich folgendes gemacht:

Und das Ergebnis war:

Nun, das sieht nicht so aus, wie wir es in unserem Thema definiert haben. Nicht wahr? Also habe ich mir angesehen, wie die Schaltfläche in MaterialTheme definiert ist

Wie ich schnell lernte (was, ehrlich gesagt, vollkommen erwartet wurde, verstand ich nicht nur anfangs die Auswirkungen der Erstellung unseres eigenen Designs), verwendet Button MaterialTheme-Attribute, die wir nicht definiert haben. Das bedeutet dann, dass wir die Button-Attribute komplett durch unsere eigenen ersetzen müssen. Und das taten wir.

Was wiederum diese Schaltfläche erstellt

Ok, es sieht besser aus, aber die Typografie sieht komisch aus, oder? Also habe ich mir den Material-Button-Code angesehen und wir können Folgendes sehen:

Nun, es scheint unseren TextStyle mit MaterialTheme-Typografie zu überwältigen. Ok, wir können das beheben, indem wir unseren eigenen TextStyle hinzufügen. Also ersetzen wir unseren Text durch den folgenden Code, der das Endergebnis liefert

Okay! Jetzt sieht es aus wie einer unserer Buttons!

Wie wir bereits gelernt haben, müssen wir Compilation-Theme-Materialien mit unseren Theme-Attributen in unsere eigenen Compiler packen. Lassen Sie uns versuchen, eine Oberfläche zu schaffen, die zu dunklen und hellen Themen passt. Auf den ersten Blick könnten wir einfach das mitgelieferte Surface verwenden. Aber jetzt erwarten wir schon, dass die Dinge nicht so funktionieren, wie wir wollen, oder?

Das helle Thema sieht gut aus (aber ist es das wirklich?), aber das dunkle ist nichts im Vergleich zu dem, was wir erwartet haben. Es sieht überhaupt nicht düster aus! Aber jetzt wissen wir, was das Problem ist. Wenn wir uns noch einmal die Definition von Compose Surface ansehen, sehen wir Folgendes:

Ja. Verwendet MaterialTheme-Farben. Also lassen Sie es uns um unsere Oberfläche wickeln

Ja! Das wollen wir. Hier sind einige Dinge zu beachten.

  1. Wir haben die Hintergrundfarbe als Oberflächenfarbe definiert. Aber hier wird es interessant. Da Sie Ihr eigenes Thema definieren, können Sie frei entscheiden, welche Farbe Sie für Ihre Oberflächen wünschen, Sie können jedes Farbattribut verwenden, das Sie in Ihrem Thema definiert haben: Primär, Sekundär, Hintergrund, Oberfläche oder sogar Banane.
  2. Aufmerksamere Leser haben vielleicht bemerkt, dass wir unsere eigenen definieren InhaltFarbe wie defaultContentColorFor (Farbe) Was ist das?

MaterialTheme gibt uns die Methode, die ist contentColorFor (Farbe) aber wir können es nicht verwenden, weil es die MaterialTheme-Spezifikation verwendet, die zur MaterialTheme-Farbgebung zurückkehrt. Daher verwenden wir unsere Methode, um die Farben unseres Themas abzurufen

Durch die Verwendung unserer Komponentenelemente, die vordefinierte Komponenten umschließen, und durch das Ändern einiger Attribute, wie z. B. der Farbe, können wir unser Design vollständig anpassen und die korrekte Anwendung der Dark- und Light-Eigenschaften ermöglichen.

Ich hoffe, dass Sie mit diesem Wissen diese Logik auf jede gewünschte Komponente anwenden und Ihr eigenes brandneues benutzerdefiniertes Design erstellen können.