如何明智地创建步骤-Android中的进度栏 [英] How to create Step wise - Progress Bar in Android

问题描述

我想输入3次用户语音作为输入.为此，我想创建一个UI( XML 文件)，该UI将在第一次录制完成时从步骤1移至步骤2进行动画处理，该操作由开始停止按钮控制.并最终移至步骤3 ..... 像这样-

I want to enroll user's voice as input for 3 times. For that I want to create a UI (the XML File) which would animate by moving from step 1 to step 2 when first recording is done which would be controlled by start stop buttons. and eventually move to step 3..... Something like this -

我不知道该如何向Google解释！请帮忙！

I dont know how to explain to google this! Please help!!

推荐答案

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

The most similar Android component to the image you provided is probably Android's discrete 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个对勾定界，这可以代表您的用户输入阶段.

style="@style/Widget.AppCompat.SeekBar.Discrete" together with android:max="3" will divide the bar in 3 parts and delimit them with 4 ticks which can represent in your case user input phases.

属性progress随后将反映具有整数值0、1、2、3的相位，您可以将其设置为继续进行进度:

The attribute progress will then reflect the phases with the integer values 0, 1, 2, 3 which you can set to go on with the progress:

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

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

请注意，SeekBar用于用户输入，因此，如果仅需通过按钮/语音输入事件来控制它，则必须禁用正常行为:

Note that SeekBar is intended for user input so if it has to be controlled only by your button/vocal input events the normal behavior has to be disabled:

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，则可以尝试使用LinearLayout或TableLayout将条形下方的4个TextView对齐，并进行调整layout_weight和宽度，此处在

If you want to display some text next to every step tick but don't want to extend SeekBar you can try to align 4 TextViews below the bar with a LinearLayout or TableLayout and tweak layout_weight and widths, here the even view distribution topic is discussed is it possible to evenly distribute buttons across the width of an android linearlayout.

但是，由于progress的值较小，因此动画在SeekBar的离散版本中将无法正常工作.如果您想要动画，则应使用正常的0-100进度SeekBar或创建自定义动画以支持步骤，如下所示:

However the animation won't work smoothly in the discrete version of SeekBar because of the small values of progress. If you want an animation you should use a normal 0-100 progress SeekBar or create your custom one to support steps, something like this:

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

可以在主题中自定义栏的外观:

The aspect of the bar can be customized in the theme:

<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?您可以在进度栏中找到有关如何添加文本的更多信息.

Here How add TextView in middle of SeekBar thumb? you can find more information on how to add text in the progress thumb.

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

The normal horizontal ProgressBar can also be used but it doesn't show an indicator, it has to be drawn in a custom implementation.

这篇关于如何明智地创建步骤-Android中的进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！