MVVMCross Native Android Progressbar移动元素与当前进度 [英] MVVMCross Native Android Progressbar move element with the current progress

问题描述

我有一个进度条，如下图所示.我的问题是我想移动显示进度的当前步骤的TextView，以及进度.

I have a progressbar as shown in the following image. My problem is that I want to move the TextView that shows the current step of the progress, along with the progress.

因此，在步骤3/7中，它应随进度移动.内部drawable是样式化的xml形状drawable.

So in the step 3/7 it should move with the progress. The inside drawable is a styled xml shape drawable.

rounded_corners_progress_bar

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与之相关)

Overall layout (It is an MVVMCross native Android project so local:MvxBind relate to that)

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

推荐答案

我建议利用约束布局，它为您提供了最佳的实现机制首先，创建一个约束布局，然后将进度条放在其中，同时在文本视图中设置文本量过程，并根据过程百分比移动偏差，例如波纹管

I suggest take help of constraint layout which give you the best mechanism to implement First, create one constraint layout and put your progress bar inside it also put text view in which you want to set text amount process and move bias as per your process percent like bellow

布局

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

然后在您的课堂上完成下面的代码

Then After doing the bellow code in your class

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

这篇关于MVVMCross Native Android Progressbar移动元素与当前进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！