5

アプリの UI の改善に取り組んでいます。そして、私が使用しているデザインには、特定の時間に進行状況バーとして機能する TextView があります。ruslt は次のようになります。

ここに画像の説明を入力

問題は、進行状況が変化している間、テキストの一部の色が変わることです

私はアンドロイドでspannablestringを調べましたが、進行状況でカバーされている文字を見つけることができればうまくいきます(しかし、これは簡単/正確ではないと思います)

私が今計画していることは、次を使用することです。

  • FrameLayout with :
  • 緑のテキストと白の背景を持つ background textView。
  • フロント 進行しながら幅が変化する Linearlayout 。
  • フレームレイアウトの幅に一致する緑色の背景と白いテキストの TextView。

より良いアプローチはありますか？

4

3 に答える 3

9

はるかに優れたアプローチでは、TextView クラスをオーバーライドする必要があります。クリッピングを使用して、TextView を分割し、2 つの部分を異なる色で描画できます。

TextView tv = new TextView(this){
    @Override
    public void draw(Canvas canvas) {
        int color1 = Color.WHITE;
        int color2 = Color.GREEN;

        canvas.save();
        setTextColor(color1);
        setBackgroundColor(color2);
        canvas.clipRect(new Rect(0, 0, (int)(getWidth() * percent), getHeight()));
        super.draw(canvas);
        canvas.restore();

        canvas.save();
        setTextColor(color2);
        setBackgroundColor(color1);
        canvas.clipRect(new Rect((int)(getWidth() * percent), 0, getWidth(), getHeight()));
        super.draw(canvas);
        canvas.restore();
    }  
};

ポイントを理解していただければ幸いです

于 2013-02-20T10:42:22.820 に答える
2

これは古い質問であることは知っていますが、これを投稿しているのは、他の誰かが同様の状況を調べているのに役立つ可能性があるためです。これが例です

1 2 3

私の解決策は基本的に、を使用してキャンバスに描画することdrawTextです。ここでのコツは、2 つのテキストを描画することです。1 つはバーの境界内に、もう 1 つはビューの境界内に、次の Z-index 順序を使用します (使用されている例に従って)。

  • 文字（白）
  • 赤いバー
  • 文字（黒）
  • 背景を見る

これを実装する方法の例を作成しました。このサンプル/ライブラリでは、カスタムのイメージビューを使用して実行しました。とにかく好きなように自由に使用してください: https://github.com/danilodanicomendes/InvertedTextProgressBar

于 2016-04-11T00:04:15.737 に答える
1

最も簡単な解決策は、相対レイアウトでProgressBarとTextViewを使用することです。あなたは両方にあなた自身のスタイルを提供します、そしてそれはそれです。ProgressBarに必要なものがすべて揃っているときに、TextViewでそれを実行しようとしても意味がありません。レイアウトは次のようになります。

<RelativeLayout android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ProgressBar android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"/>

        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Doing something"
            android:gravity="center"
            android:layout_centerVertical="true"/>          
</RelativeLayout>

あなたはそれらを望むように幅と高さで遊ぶ必要があります:)

于 2013-02-20T10:54:03.623 に答える