Wypełnić kształt z tekstem z dwoma innym kolorze

Question

starałem się to osiągnąć, ale jestem tylko w stanie osiągnąć celu wypełnienia obiektu (kształtu). Moim wymaganiem jest zmiana koloru tekstu wraz z wypełnieniem kształtu.

kształt może być wypełniona procent jak do
10% do 50% = zielony
51% do 80% = żółty
81% do 100% = czerwony

Gdy Żółty kolor wypełnia tło " : "w kształcie, zmieni kolor na" Biały ", który wcześniej był" Żółty ". Rozmiar tego kształtu jest również dynamiczny.

Co próbowałem i osiągnąłem?

Jestem w stanie wypełnić kształt procentem, ale nie udało się zmienić koloru, gdy dochodzi do krawędzi tekstu.

Answer 1

pisałem widoku niestandardowego. Ten efekt podwójnego koloru uzyskuje się za pomocą ścieżek API. Ale dla kompatybilności z Androidem 1+ powinieneś używać interfejsu API Regionu, a powyżej Kitkat (19+) możesz używać tylko Path API.

Chodźmy poprzez pojęcia jak osiągnąć ten efekt krok po kroku:

1. Istnieją trzy kształty musimy wyciągnąć - Outline Zaokrąglone Stroke + Pomarańczowy pasek postępu + sam tekst
2. Zwracamy skok jak to jest
3. Ale na pasku postępu, musimy usunąć tekst, który krzyżuje się z nim i po prostu sprawiają, że skrzyżowanie tekst przejrzyste. (RÓŻNICA)
4. Również dla paska postępu, musimy pokazać tylko część prostokąta, która przecina się z zewnętrzną zaokrągloną ścieżką obrysu. (PRZERWANIE)
5. Podobnie jak w przypadku tekstu, po lewej stronie w zasadzie odcinamy części, które przecinają się z paskiem postępu. Pokazujemy tylko prawą stronę tekstu w kolorze pomarańczowym. (Różnica znowu)

Jeśli używasz API 19+, to w jaki sposób krytyczny fragment kodu wygląda następująco:

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

Lines here i here.

Napisałem proof of concept dla tego projektu o nazwie Diffre na Github. Jeśli chcesz najpierw przetestować, cały kod jest w this repo.