Điền hình dạng với văn bản có hai màu khác nhau

Question

Tôi đã cố gắng để đạt được điều này nhưng tôi chỉ có thể đạt được để điền vào đối tượng (hình dạng). Yêu cầu của tôi là thay đổi màu văn bản cùng với việc điền hình.

Shape có thể được lấp đầy với tỷ lệ phần trăm như đến
10% đến 50% = Xanh
51% đến 80% = Vàng
81% đến 100% = Red

Khi màu vàng lấp đầy nền của " : "có hình dạng, nó sẽ đổi màu thành" Trắng "trước đây là" Vàng ". Kích thước của hình dạng này cũng năng động.

Điều gì tôi đã cố gắng và đạt được?

Tôi có thể điền hình dạng với tỷ lệ phần trăm nhưng không thể thay đổi màu khi nó đạt đến cạnh văn bản.

Answer 1

Tôi đã viết một giao diện tùy chỉnh. Bạn nhận được hiệu ứng màu kép này bằng cách sử dụng API đường dẫn. Nhưng đối với khả năng tương thích Android 1+, bạn nên sử dụng API vùng và trên Kitkat (19+), bạn có thể chỉ sử dụng API đường dẫn.

Hãy đi qua các khái niệm về làm thế nào để đạt được bước tác động này bước:

1. Có ba hình dạng chúng ta cần phải vẽ - Outline Tròn Stroke + Orange Progress Bar + văn bản tự
2. Chúng tôi vẽ đột quỵ vì nó là
3. Nhưng đối với thanh tiến trình, chúng ta cần phải loại bỏ văn bản giao cắt với nó và về cơ bản làm cho giao lộ văn bản trong suốt. (KHÁC BIỆT)
4. Cũng cho Thanh tiến trình, chúng tôi chỉ hiển thị phần hình chữ nhật giao cắt với đường nét tròn bên ngoài. (INTERSECTION)
5. Và tương tự, đối với văn bản, ở bên trái, chúng tôi về cơ bản cắt các phần giao cắt với thanh tiến trình. Và chúng tôi chỉ hiển thị bên phải của văn bản có màu cam. (SỰ KHÁC BIỆT lại)

Nếu bạn đang sử dụng API 19+, đây là cách các đoạn mã quan trọng trông giống như:

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

dòng here và here.

Tôi đã viết bằng chứng về khái niệm cho dự án này có tên là Diffre on Github. Nếu bạn muốn thử nghiệm nó trước, tất cả các mã là trong this repo.