Füllen Form mit Text mit zwei verschiedenen Farben

Question

Ich habe versucht, dies zu erreichen, aber ich bin nur in der Lage zu erreichen, Objekt (Form) zu füllen. Meine Anforderung ist, Textfarbe zusammen mit Formfüllung zu ändern.

Form kann wie bis
10% bis 50% = Grün
51% bis 80% = Yellow
81% bis 100% = Red

Wenn gelbe Farbe Hintergrund füllt von "mit prozentualer gefüllt werden : "in Form, wird es die Farbe zu ändern" Weiß "das ist zuvor" Gelb ". Die Größe dieser Form ist ebenfalls dynamisch.

Was habe ich versucht und erreicht?

Ich bin in der Lage, Form mit Prozent zu füllen, konnte aber nicht die Farbe ändern, wenn es bis zum Rand des Textes reicht.

Answer 1

Ich schrieb eine benutzerdefinierte Ansicht. Sie erhalten diesen doppelten Farbeffekt mit Path-APIs. Aber für die Kompatibilität mit Android 1+ sollten Sie die Region-API verwenden und über Kitkat (19+) können Sie nur die Pfad-API verwenden.

Gehen wir durch das Konzept, wie dieser Effekt Schritt für Schritt zu erreichen:

1. Es gibt drei Formen, die wir ziehen müssen - Gliederung Abgerundete Stroke + Orange Progress Bar + den Text selbst
2. Wir ziehen der Strich, wie es ist
3. Aber für den Fortschrittsbalken müssen wir den Text entfernen, der sich mit ihm schneidet und im Grunde den Textschnittpunkt transparent machen. (UNTERSCHIED)
4. Auch für den Fortschrittsbalken müssen wir nur den Teil des Rechtecks ​​zeigen, das den äußeren gerundeten Strichweg schneidet. (INTERSECTION)
5. Und ähnlich, für den Text, auf der linken Seite hacken wir im Grunde die Teile, die sich mit dem Fortschrittsbalken schneidet. Und wir zeigen nur die rechte Seite des Textes, der orange ist. (Differenz wieder)

Wenn Sie mit API 19+, das ist, wie die kritischen Code-Schnipsel wie folgt aussehen:

croppedProgressPath.op(progressPath, textPath, Path.Op.DIFFERENCE); 
croppedProgressPath.op(progressStrokePath, Path.Op.INTERSECT); 
———————————— 
croppedTextPath.op(textPath, progressPath, Path.Op.DIFFERENCE); 

Linien here und here.

Ich habe eine Proof of Concept für dieses Projekt namens Diffre auf Github geschrieben. Wenn Sie es zuerst testen möchten, ist der gesamte Code in this repo.