如何使文本视图沿进度栏移动

Question

Context：我想构建一个带有某些值的水平进度栏，并希望将一些沿该进度栏下方移动的文本放置。所以我的最终想法是这样的（我已经建立了progress bar，我只留下了下面的[[text views）

我当前的代码是这样的：

这是我的

StackedHorizo​​ntalProgressBar类

：

public class StackedHorizontalProgressBar extends ProgressBar {
  private Paint paint;
  int primary_progress, max_value;

  public StackedHorizontalProgressBar(Context context) {
    super(context);
    init();
  }

  public StackedHorizontalProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  @Override public synchronized void setMax(int max) {
    this.max_value = max;
    super.setMax(max);
  }

  @Override public synchronized void setProgress(int progress) {
    if (progress > max_value) {
      progress = max_value;
    }
    this.primary_progress = progress;
    super.setProgress(progress);
  }



  @Override public synchronized void setSecondaryProgress(int secondaryProgress) {
    if ((primary_progress + secondaryProgress) > max_value) {
      secondaryProgress = (max_value - primary_progress);
    }
    super.setSecondaryProgress(primary_progress + secondaryProgress);
  }

  private void init() {
    paint = new Paint();
    paint.setColor(Color.BLACK);
    primary_progress = 0;
    max_value = 100;
  }
}

这是我的
Main Activity

布局（在class上方使用）

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

  <github.nisrulz.stackedhorizontalprogressbar.StackedHorizontalProgressBar
      android:id="@+id/stackedhorizontalprogressbar"
      style="?android:attr/progressBarStyleHorizontal"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="16dp"
      android:progressDrawable="@drawable/stacked_horizontal_progress"
      app:layout_constraintTop_toTopOf="parent"
      tools:layout_editor_absoluteX="16dp" />

</android.support.constraint.ConstraintLayout>

这是我的
MainActivity类

：

public class MainActivity extends AppCompatActivity {

    int max = 100;
    int countPrimary = 20;
    int countSecondary = 30;
    StackedHorizontalProgressBar stackedHorizontalProgressBar;

    TextView txt_primary, txt_secondary;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        stackedHorizontalProgressBar =
                (StackedHorizontalProgressBar) findViewById(R.id.stackedhorizontalprogressbar);
        stackedHorizontalProgressBar.setMax(max);

        stackedHorizontalProgressBar.setProgress(countPrimary);
        txt_primary.setText("Primary Value : " + countPrimary + "%");

        stackedHorizontalProgressBar.setSecondaryProgress(countSecondary);
        txt_secondary.setText("Secondary Value : " + countSecondary + "%");

    }

}

我认为我必须为此使用
canvas

，因此，如果有任何有经验的人可以为我提供帮助。

Answer 1

我首先做的是扩展了ProgressBar类，并添加了所有构造函数方法。然后，我重写了onDraw方法，如下所示：

@Override
protected synchronized void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    //Create the paint for the text
    Paint textPaint = new Paint();
    textPaint.setAntiAlias(true);
    textPaint.setColor(Color.WHITE);
    textPaint.setTextSize(getHeight()/4);
    Rect bounds = new Rect();
    textPaint.getTextBounds(textPrimary, 0, textPrimary.length(), bounds);

    //mTypeface is a typeface that I have being set in another function so
    //you don't have to use the default! :D
    if(mTypeface != null) {
        textPaint.setTypeface(mTypeface);
    }

    //I believe this is done to be able to put values in dp
    float density = getContext().getResources().getDisplayMetrics().density;

    //Point to draw text for primary progress
    float percentage = getProgress() / 100f; //get the total progress
    // distance the text should be from the end of the progress in dp
    // (paddingPrimary) is number of dp
    float x = getWidth() * percentage - (paddingPrimary * density);
    // center the text vertically
    float y = getHeight() / 2 - bounds.centerY();

    //Point to draw text for secondary progress
    float percentageSecondary = getSecondaryProgress() / 100f;
    float x2 = getWidth() * percentageSecondary - (paddingSecondary * density);
    float y2 = getHeight() / 2 - bounds.centerY();

    //Draw the numbers to the canvas
    //(textPrimary and textSecondary are the text to be drawn)
    canvas.drawText(textPrimary, x, y, textPaint);
    canvas.drawText(textSecondary, x2, y2, textPaint);
}

官方：Click me
希望这对您有帮助

Answer 2

public class ProgressBarAvtivity extends AppCompatActivity {
ProgressBar progressBar;
TextView tvProgress;
    int d = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar_avtivity);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        progressBar.setProgress(d);
        tvProgress = (TextView)findViewById(R.id.tvProgress);
        tvProgress.setText(String.valueOf(d));
        if (d > 40) {
        tvProgress.setX(((width )* d / 100) - (d/2));
         } 
        else {
        tvProgress.setX(((width )* d / 100));

    }
 }}

Answer 3

public class ProgressBarAvtivity extends AppCompatActivity {
ProgressBar progressBar;
TextView tvProgress;
    int d = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar_avtivity);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        progressBar.setProgress(d);
        tvProgress = (TextView)findViewById(R.id.tvProgress);
        tvProgress.setText(String.valueOf(d));
        if (d > 40) {
        tvProgress.setX(((width )* d / 100) - (d/2));
         } 
        else {
        tvProgress.setX(((width )* d / 100));

    }
 }}