Hogyan hozzunk létre lépésről lépésre haladó sávot Androidon

Az Ön által megadott képhez leginkább hasonló Android-komponens valószínűleg az Android diszkrét 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" />

A style="@style/Widget.AppCompat.SeekBar.Discrete" és a android:max="3" a sávot 3 részre osztja és 4 pipával határolja el őket, amelyek az Ön esetében a felhasználói beviteli fázisokat jelenthetik.

A progress attribútum ezután tükrözi a fázisokat a 0, 1, 2, 3 egész értékekkel, amelyeket beállíthat, hogy folytassa a folyamatot:

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

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

Ne feledje, hogy a SeekBar felhasználói bevitelre szolgál, így ha csak a gombokkal/hangbeviteli eseményekkel kell vezérelnie, a normál viselkedést le kell tiltani:

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

Ha szöveget szeretne megjeleníteni minden lépés mellett, de nem szeretne kiterjeszteni SeekBar, akkor megpróbálhat 4 TextViews-ot a sáv alá igazítani egy LinearLayout vagy TableLayout jellel, és módosítani layout_weight és a szélességeket, itt az egyenletes nézetelosztás témakörét tárgyaljuk lehetséges-e egyenletesen eloszthatja a gombokat egy androidos lineáris elrendezés szélességében.

Az animáció azonban nem működik zökkenőmentesen a SeekBar diszkrét verziójában a progress kis értékei miatt. Ha animációt szeretne, használjon normál 0-100 előrehaladást SeekBar, vagy hozzon létre egy egyénit a lépések támogatásához, például:

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

A sáv aspektusa testreszabható a témában:

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

Itt Hogyan adhat hozzá TextView-t a SeekBar hüvelykujj közepéhez? további információt találhat a szöveg hozzáadásával kapcsolatban a folyamatjelző hüvelykujjban.

A normál vízszintes ProgressBar is használható, de nem mutat indikátort, ezt egyedi megvalósításban kell megrajzolni.