MVVMCross Native Android Элемент перемещения индикатора выполнения с текущим прогрессом

Question

У меня есть индикатор выполнения, как показано на следующем рисунке. Моя проблема в том, что я хочу переместить TextView, который показывает текущий шаг прогресса, а также прогресс.

Итак, на шаге 3 / 7 он должен двигаться вместе с прогрессом. Внутренний чертеж - это стиль xml, нарисованный в форме.

rounded_corners_progress_bar

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@android:id/background">
    <shape>
      <corners android:radius="8dp"/>
      <solid android:color="@color/progressbarBgColor"/>
    </shape>
  </item>

  <item android:id="@android:id/progress"
        android:top="1dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">

    <scale android:scaleWidth="100%">
      <shape>
        <corners android:radius="8dp"/>
        <solid android:color="?attr/colorAccent"/>
      </shape>
    </scale>
  </item>
</layer-list>

Общий макет (Это MVVMCross родной Android проект настолько локальный: MvxBind относится к этому)

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <ProgressBar
            android:id="@+id/determinateBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="320dp"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"
            local:MvxBind="Max TotalProgressSteps; Progress CurrentProgress"
            />
        <TextView
            android:text="1 / 7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/determinateBar"
            android:layout_alignStart="@id/determinateBar"
            android:paddingLeft="15dp"
            android:id="@+id/steps" />

    </RelativeLayout>

Answer 1

Это моё решение. Я создал класс и расширил его с помощью RelativeLayout, накачав макет (который вы можете видеть в приведенном выше вопросе).

Добавлен слушатель для прослушивания изменений макета _progressBar.ViewTreeObserver.GlobalLayout += ViewTreeObserver_GlobalLayout;

private void ViewTreeObserver_GlobalLayout(object sender, EventArgs e)
        {
            _progressBar.ViewTreeObserver.GlobalLayout -= ViewTreeObserver_GlobalLayout;

            SetProgressTextPosition();
        }

и затем я просто вычисляю текущий прогресс и SetX соответственно.

//_progressBar = FindViewById<Android.Widget.ProgressBar>(Resource.Id.progressBar);
//_currentProgressStep = FindViewById<TextView>(Resource.Id.currentProgressStep);

private void SetProgressTextPosition()
        {
            if (!TotalStepCount.HasValue || !CurrentStep.HasValue)
            {
                return;
            }

            if (CurrentStep.Value > TotalStepCount.Value)
            {
                throw new ArgumentOutOfRangeException($"Please ensure that the current step does not exceed the total step amount.");
            }

            _currentProgressStep.Text = $"{CurrentStep.Value} / {TotalStepCount.Value}";

            float startPosition = _progressBar.GetX();
            float totalWidth = startPosition + _progressBar.Width;
            float stepSize = totalWidth / TotalStepCount.Value;
            float currentPosition = stepSize * CurrentStep.Value;

            _currentProgressStep.SetX(currentPosition - _currentProgressStep.Width);
        }

Answer 2

Я предлагаю воспользоваться макетом ограничений, который даст вам лучший механизм для реализации. Сначала создайте один макет ограничений и поместите в него свой индикатор выполнения, а также поместите текстовое представление, в котором вы хотите настроить процесс количества текста и сместить смещение в соответствии с вашими требованиями. Процент процесса, как показано ниже

Макет

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:id="@+id/mConstraintLayout"
            android:layout_height="wrap_content">

            <ProgressBar
                android:layout_width="match_parent"
                android:id="@+id/mProgressBar"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:id="@+id/mTVValue"
                android:text="7/10"
                app:layout_constraintStart_toStartOf="@+id/mProgressBar"
                app:layout_constraintEnd_toEndOf="@+id/mProgressBar"
                android:layout_height="wrap_content" />
        </androidx.constraintlayout.widget.ConstraintLayout>

Затем, после выполнения кода ниже в вашем классе

/**
     * Method move progress label as per progress change
     * @param constraintLayout constraint layout object 
     * @param textViewId text view id which you want to move also text id same which you used in design
     * @param percentProgress Progress in percentages means total moved progress percent which from 100
     */
    private void moveProgressPercent(ConstraintLayout constraintLayout,int textViewId,float percentProgress){
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);
        constraintSet.setHorizontalBias(textViewId, percentProgress / 100);
        constraintSet.applyTo(constraintLayout);
    }

Согласно приведенному выше просмотра это как

ConstraintLayout constraintLayout=findViewById(R.id.mConstraintLayout);
moveProgressPercent(constraintLayout,R.id.mTVValue,25);