android - MVVMCross Native Android Progressbar 使用当前进度移动元素

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项目所以local: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

我建议借助约束布局，它可以为您提供最佳的实现机制 首先，创建一个约束布局并将进度条放入其中，同时放置 TextView ，您希望在其中设置文本量过程并根据您的过程百分比移动偏差，如下所示

布局

<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);