创建步骤 - 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"与android: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与条形下方的LinearLayout对齐TableLayout }或layout_weight并使用SeekBar和宽度播放，此处讨论偶数视图分布主题is it possible to evenly distribute buttons across the width of an android linearlayout。

然而，由于progress的值较小，动画在SeekBar的离散版本中无法顺利运行。如果你想要一个动画，你应该使用正常的0-100进度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>

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

ProgressBar

在这里How add TextView in middle of SeekBar thumb?，您可以找到有关如何在进度缩略图中添加文字的更多信息。

也可以使用正常水平onscroll，但它不显示指标，必须在自定义实现中绘制。