如何创建 Step wise - Android 中的进度条

Question

我想将用户的声音注册为 3 次输入。为此，我想创建一个 UI（XML文件），当第一次录制完成时，它会通过从第 1 步移动到第 2 步来制作动画，这将由开始停止按钮控制。并最终进入第 3 步..... 像这样 -

我不知道如何向谷歌解释这个！请帮忙！！

Answer 1

与您提供的图像最相似的 Android 组件可能是 Android 的离散组件SeekBar：

<SeekBar
        android:id="@+id/seekbar"
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="3" />

style="@style/Widget.AppCompat.SeekBar.Discrete"withandroid:max="3"将把条形分成 3 部分，并用 4 个刻度分隔它们，这可以代表您的案例用户输入阶段。

progress然后，该属性将反映具有整数值 0、1、2、3 的阶段，您可以将其设置为继续进行：

private SeekBar mSeekBar = (SeekBar) findViewById(R.id.seekbar);

public void nextPhase() {
    mSeekBar.setProgress(mSeekBar.getProgress() + 1);
}

请注意，这SeekBar是用于用户输入，因此如果它必须仅由您的按钮/声音输入事件控制，则必须禁用正常行为：

mSeekBar.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // True doesn't propagate the event
        // the user cannot move the indicator
        return true;
    }
});

如果您想在每个步骤刻度旁边显示一些文本但不想扩展，SeekBar您可以尝试将TextView条形下方的4 s 与 a LinearLayoutor对齐TableLayout并调整layout_weight和宽度，这里讨论的是均匀视图分布主题是否可以均匀在 android linearlayout 的宽度上分布按钮。

但是，SeekBar由于 的值较小，动画在 的离散版本中无法顺利运行progress。如果你想要一个动画，你应该使用正常的 0-100 进度SeekBar或创建你的自定义进度来支持步骤，如下所示：

public class StepsSeekBar extends SeekBar {

    int mSteps;
    int mCurrentStep;
    int mStepWidth;

    public StepsSeekBar(Context context, AttributeSet attrs, int steps) {
        super(context, attrs);
        mSteps = steps;
        mCurrentStep = 0;
        mStepWidth = 100 / mSteps;
    }

    public nextStep() {
        // Animate progress to next step
        ObjectAnimator animator = ObjectAnimator.ofInt(this, "progress", mStepWidth * mCurrentStep, mStepWidth * (++mCurrentStep));
        animator.setDuration(/* Duration */);
        animator.start();
    }
}

可以在主题中自定义栏的方面：

<style name="StepsSeekBar" parent="Base.Widget.AppCompat.SeekBar">
    <item name="android:indeterminateOnly"></item>
    <item name="android:progressDrawable"></item>
    <item name="android:indeterminateDrawable"></item>
    <item name="android:thumb"><!-- The circle drawable --></item>
    <item name="android:focusable"></item>
</style>
<!-- In the discrete SeekBar -->
<item name="tickMark"><!-- The circles indicating steps --></item>

这里如何在 SeekBar 拇指中间添加 TextView？您可以找到有关如何在进度缩略图中添加文本的更多信息。

ProgressBar也可以使用普通水平，但它不显示指示器，它必须在自定义实现中绘制。