2017-02-15 9 views
5

私はこれを達成しようとしましたが、私はオブジェクト(形状)を塗りつぶすことしかできませんでした。 私の要件は、形状の塗りつぶしとともにテキストの色を変更することです。2つの異なる色でテキストを塗りつぶす

形状はまで
10%〜50%のような割合で充填することができる=グリーン
51%〜80%=イエロー
81%黄色が "の背景を埋める

=赤100%まで "の形をとると、以前に" イエロー "である" "に色が変わります。この図形のサイズも動的です。

私は何を試み、達成しましたか?

%で図形を塗りつぶすことはできますが、テキストの端に達したときに色を変更できませんでした。

enter image description here

enter image description here

答えて

6

私は、カスタムビューを書きました。 Path APIを使用してこの2色効果を得ます。しかし、Android 1+との互換性を確保するには、Region APIを使用し、Kitkat(19+以上)を使用する必要があります。パスAPIだけを使用できます。丸いストローク+オレンジプログレスバー+テキスト自体我々が描く

  • 概要 - 私たちは描画する必要がある

    1. 三頭の形があります。

      のステップにより、この効果のステップを達成する方法の概念を見ていきましょうストロークそのままです

    2. しかし、プログレスバーでは、テキストと交差するテキストを削除し、基本的にテキストの交差を透明にする必要があります。
    3. プログレスバーについても、外側の丸いストロークパスと交差する矩形の部分のみを表示する必要があります。 (INTERSECTION)
    4. 同様に、テキストの場合、左側では基本的にプログレスバーと交差する部分が切り取られます。そして、オレンジ色のテキストの右側だけを表示します。

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

      herehere:(DIFFERENCE再び)

    あなたはAPI 19+を使用している場合は、これは重要なコードスニペットがどのように見えるかです。

    私はDiffre on Githubというこのプロジェクトの概念実証を書いています。最初にテストしたい場合は、すべてのコードはthis repoです。

    Diffre demo gif

  • +1

    これは素晴らしいです。ありがとう:) –

    関連する問題