水平プログレスバーは円インジケーターを追加します

ダーコペトコフスキー

次のように、一定量の円インジケーターを含むカスタムの水平プログレスバーを作成しようとしています。 ここに画像の説明を入力してください

誰かがこの効果を達成する方法を教えてもらえますか(円インジケーターの追加)?

ニック・カルドソ

サークルインジケーターがすべて設定された間隔(同じ距離)にあると仮定すると、次のことが最も論理的な解決策のように思われます

  1. カスタムビューを作成する
  2. ProgressBarを拡張して、現在のすべての機能を継承し、独自のsetProgressメソッド(などを作成する必要がないようにします
  3. カスタムプロパティ 'tickInterval'を作成します(これは、dp of viewではなく%points of valueとして提案しますが、どちらを使用してもかまいません
  4. xmlからビューを使用する場合は、カスタム属性のXMLファイルを作成します
  5. ビューが描画されたら、間隔ごとにインジケーターをペイントします

サークル用のスペースがあることを確認するために、ビューのパディングを調整する必要がある場合があります。以下は、必要なものの簡単なアイデアです。

public class TickedProgressBarView extends ProgressBar {

    private static final float DEFAULT_INTERVAL = 25f;
    private float INDICATOR_RADIUS;
    private Paint mTickPaint;
    private float mInterval; //%

    public TickedProgressBarView(Context context) {
        super(context);
        initPainters(context, null); //because draw is called a lot of times, don't want to do loads of allocations in onDraw
    }

    public TickedProgressBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
         initPainters(context, attrs);
    }

    public TickedProgressBarView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initPainters(context, attrs);
    }

    private void initPainters(Context context, @Nullable AttributeSet attrs) {
        if (attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TickedProgressBarView, 0, 0);
            mInterval = a.getFloat(R.styleable.TickedProgressBarView_tickInterval, DEFAULT_INTERVAL);
        } else {
            mInterval = DEFAULT_INTERVAL;
        }
        //5 on the line below is HALF how many Dp wide you want the circles - ie a 10 Dp circle results from this
        INDICATOR_RADIUS = 5 * getResources().getDisplayMetrics().density + 0.5f;
        mTickPaint = new Paint();
        mTickPaint.setColor(ContextCompat.getColor(getContext(), R.color.my_color));
        mTickPaint.setStyle(Paint.Style.FILL);
        mTickPaint.setStrokeCap(Paint.Cap.ROUND);
    }

    public void setTickInterval(float intervalPercentage) {
        mInterval = intervalPercentage;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mInterval > 0f) {
            final float midHeight = canvas.getHeight() / 2f;
            final int end = canvas.getWidth();
            final int intervalPx = (int) ((end / 100f) * mInterval);
            int nextInterval = intervalPx;
            while (nextInterval <= end) {
                canvas.drawCircle(nextInterval, midHeight, INDICATOR_RADIUS, mTickPaint);
                nextInterval += intervalPx;
            }
        }
    }

}

attrs.xml

<declare-styleable name="TickedProgressBarView">
    <attr name="tickInterval" format="float" />
</declare-styleable>

attr宣言を使用すると、xmlからビューを使用できます

<!-- draw a circle every 10% along the bar -->
<com.my.packge.TickedProgressBarView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tickInterval="10.0"
/>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

水平プログレスバーは円インジケーターを追加します

分類Dev

楕円形のプログレスバーの垂直インジケーター

分類Dev

サークルインジケーターアンドロイド付き水平プログレスバー

分類Dev

円のプログレスバーにエンドポイントを追加するには?

分類Dev

XMLは、progressDrawableプロパティを持つ水平プログレスバーを円形にどのように変更しますか?

分類Dev

Androidで水平方向の「マテリアルプログレスインジケーター」を使用するにはどうすればよいですか?

分類Dev

Androidは中央から水平プログレスバーを開始します

分類Dev

プログレスバーに丸められたプログレスラインを追加します

分類Dev

バンドルパッケージはgemをグローバルにインストールしますか

分類Dev

タスクスケジューラコンソールアプリケーションは、プログラムの再実行を防ぐ例外でジャストインタイムデバッガを表示します

分類Dev

npmでグローバルパッケージ(エクスプレス)をアンインストールします

分類Dev

npxはグローバルにインストールされたパッケージを探しますか?

分類Dev

プログレスバーを円に沿って均等に配置します

分類Dev

AndroidXエラー:古いデータバインディングパッケージと新しいデータバインディングパッケージの両方が依存関係で利用可能です。フラッタープロジェクトをAndroidXにアップグレードしています

分類Dev

プログレスバー(シークバー)の最後にあるモバイルフレンドリーな「ドットグラブ」をカスタムhtm5オーディオプレーヤーに追加します

分類Dev

xamrin.iosは、右端ではなく上端から円形のプログレスバーを描画します

分類Dev

自動スケーリング グループ インスタンスをロード バランサーに直接アタッチします。

分類Dev

アンドロイドで水平プログレスバーに行く方法はありますか

分類Dev

プレスオープニングブラケットにクロージングブラケットを追加します

分類Dev

CSS空白:preは常にFirefoxで水平スクロールバーをレンダリングします

分類Dev

グレースケールフィルターは、画像オーバーレイの表示を停止します

分類Dev

WPFアプリケーションでプログレスバーをプログラムで生成します

分類Dev

プログレスバーに負の値を追加します

分類Dev

レンダリング遅延用の読み込みインジケーターまたはスピナーを追加します (サブスクリプション対応ではありません)

分類Dev

動的に追加されたボタンは、ログインページにポストバックします

分類Dev

アプリケーションサーバーまたはデータベースにロジックを追加する必要があります

分類Dev

QMLダイヤルの円形プログレスバーをどのように変更しますか?

分類Dev

パンダはタイムスタンプをTimeGrouper頻度グループにバケットします

分類Dev

JSを介して制御されたパーセンテージの円形プログレスバー

Related 関連記事

  1. 1

    水平プログレスバーは円インジケーターを追加します

  2. 2

    楕円形のプログレスバーの垂直インジケーター

  3. 3

    サークルインジケーターアンドロイド付き水平プログレスバー

  4. 4

    円のプログレスバーにエンドポイントを追加するには?

  5. 5

    XMLは、progressDrawableプロパティを持つ水平プログレスバーを円形にどのように変更しますか?

  6. 6

    Androidで水平方向の「マテリアルプログレスインジケーター」を使用するにはどうすればよいですか?

  7. 7

    Androidは中央から水平プログレスバーを開始します

  8. 8

    プログレスバーに丸められたプログレスラインを追加します

  9. 9

    バンドルパッケージはgemをグローバルにインストールしますか

  10. 10

    タスクスケジューラコンソールアプリケーションは、プログラムの再実行を防ぐ例外でジャストインタイムデバッガを表示します

  11. 11

    npmでグローバルパッケージ(エクスプレス)をアンインストールします

  12. 12

    npxはグローバルにインストールされたパッケージを探しますか?

  13. 13

    プログレスバーを円に沿って均等に配置します

  14. 14

    AndroidXエラー:古いデータバインディングパッケージと新しいデータバインディングパッケージの両方が依存関係で利用可能です。フラッタープロジェクトをAndroidXにアップグレードしています

  15. 15

    プログレスバー(シークバー)の最後にあるモバイルフレンドリーな「ドットグラブ」をカスタムhtm5オーディオプレーヤーに追加します

  16. 16

    xamrin.iosは、右端ではなく上端から円形のプログレスバーを描画します

  17. 17

    自動スケーリング グループ インスタンスをロード バランサーに直接アタッチします。

  18. 18

    アンドロイドで水平プログレスバーに行く方法はありますか

  19. 19

    プレスオープニングブラケットにクロージングブラケットを追加します

  20. 20

    CSS空白:preは常にFirefoxで水平スクロールバーをレンダリングします

  21. 21

    グレースケールフィルターは、画像オーバーレイの表示を停止します

  22. 22

    WPFアプリケーションでプログレスバーをプログラムで生成します

  23. 23

    プログレスバーに負の値を追加します

  24. 24

    レンダリング遅延用の読み込みインジケーターまたはスピナーを追加します (サブスクリプション対応ではありません)

  25. 25

    動的に追加されたボタンは、ログインページにポストバックします

  26. 26

    アプリケーションサーバーまたはデータベースにロジックを追加する必要があります

  27. 27

    QMLダイヤルの円形プログレスバーをどのように変更しますか?

  28. 28

    パンダはタイムスタンプをTimeGrouper頻度グループにバケットします

  29. 29

    JSを介して制御されたパーセンテージの円形プログレスバー

ホットタグ

アーカイブ