Schieberegler

Mit Schiebereglern können Sie am unteren Bildschirmrand eine Lade-, eine Fortschritts- oder Navigationsleiste einblenden. Slider sind globale UX-Komponenten und sollten mit Sorgfalt behandelt werden, wenn sie in Ihrer Glassware implementiert werden.


Schieberegler

Mit Schiebereglern wird die Position einer Karte beim Wischen durch mehrere Karten angegeben. Mit Slider.Scroller können Sie denselben Effekt erstellen.

  1. Verwenden Sie Slider.from(), um einen Slider zu erstellen, der ein View zum Anzeigen des Schiebereglers verwendet.
  2. Erstellen Sie den Slider.Scroller mit startScroller() und legen Sie die maximale und die Anfangsposition fest.

Hier sehen Sie eine einfache Implementierung, bei der ein Scroller zur nächsten Position animiert wird, wenn der Nutzer tippt:

public final class SliderActivity extends Activity {

    private static final int MAX_SLIDER_VALUE = 5;
    private static final long ANIMATION_DURATION_MILLIS = 5000;

    private CardScrollView mCardScroller;
    private Slider mSlider;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                processSliderRequest(position+1);
            }
        });

        setContentView(mCardScroller);
    }

    private void processSliderRequest(position) {
        Slider.Scroller scroller = mSlider.startScroller(MAX_SLIDER_VALUE, 0);

        // Animate the slider to the next position. The slider
        // automatically hides after the duration has elapsed
        ObjectAnimator.ofFloat(scroller, "position", 0, position)
            .setDuration(ANIMATION_DURATION_MILLIS)
            .start();
    }
}

Kulanzzeitraum-Schieberegler

Schieberegler für Kulanzzeiträume funktionieren in Aktivitäten, bei denen es für einen Nutzer hilfreich ist, eine Benachrichtigung anzusehen. Eine Nutzerinteraktion ist jedoch nicht erforderlich. Sie können diese Animation mit Slider.GracePeriod hinzufügen.

  1. Verwenden Sie Slider.from(), um einen Slider zu erstellen, der ein View zum Anzeigen des Schiebereglers verwendet.
  2. Erstellen Sie einen GracePeriod.Listener und implementieren Sie onGracePeriodEnd() und onGracePeriodCancel(), um diese Ereignisse zu verarbeiten.
  3. Erstellen Sie einen Slider.GracePeriod und starten Sie die Animation. Dazu übergeben Sie den GracePeriod.Listener an die Methode startGracePeriod().
  4. Überschreiben Sie die onBackPressed() der Aktivität, um die Wischbewegung nach unten zu verarbeiten.
  5. Wenn der Nutzer nach unten wischt, ruf cancel() auf Slider.GracePeriod auf, um den Schieberegler zu schließen.

Im folgenden Beispiel wird der Kulanzzeitraum-Scroller mit einem Listener gestartet, der nach Ablauf des Zeitraums einen Erfolgton ausgibt, und einen verworfenen Ton, wenn der Schieberegler für den Kulanzzeitraum abgebrochen wird:

public final class SliderActivity extends Activity {

    ...
    private Slider.GracePeriod mGracePeriod;

    private final GracePeriod.Listener mGracePeriodListener =
        new GracePeriod.Listener() {

        @Override
        public void onGracePeriodEnd() {
            // Play a SUCCESS sound to indicate the end of the grace period.
            AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
            am.playSoundEffect(Sounds.SUCCESS);
            mGracePeriod = null;
        }

        @Override
        public void onGracePeriodCancel() {
            // Play a DIMISS sound to indicate the cancellation of the grace period.
            AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
            am.playSoundEffect(Sounds.DISMISSED);
            mGracePeriod = null;
        }
    };

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                mGracePeriod = mSlider.startGracePeriod(mGracePeriodListener);
            }
        });

        setContentView(mCardScroller);
    }

    @Override
    public void onBackPressed() {
        // If the Grace Period is running,
        // cancel it instead of finishing the Activity.
        if (mGracePeriod != null) {
            mGracePeriod.cancel();
        } else {
            super.onBackPressed();
        }
    }
}

Schieberegler bestimmen

Bestimmte Schieberegler werden hauptsächlich zum Anzeigen des Fortschritts verwendet, bei dem Sie den Abschluss einer Aufgabe berechnen können. Sie können diese Animation mit Slider.Determinate hinzufügen.

  1. Verwenden Sie Slider.from(), um einen Slider zu erstellen, der ein View zum Anzeigen des Schiebereglers verwendet.
  2. Erstellen Sie den Slider.Determinate mit startScroller() und legen Sie die maximale und die Anfangsposition fest.
  3. Wenn die Animation abgeschlossen ist, rufen Sie die Methode hide() in Slider.Determinate auf, um den Schieberegler auszublenden.

Hier sehen Sie eine einfache Implementierung, bei der der Scroller an eine festgelegte Position animiert wird, wenn der Nutzer tippt:

public final class SliderActivity extends Activity {

    ...
    private Slider.Determinate mDeterminate;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                   int position, long id) {
                mDeterminate = mSlider.startDeterminate(MAX_SLIDER_VALUE, 0);
                ObjectAnimator animator = ObjectAnimator.ofFloat(mDeterminate,
                    "position", 0, MAX_SLIDER_VALUE);

                // Hide the slider when the animation stops.
                animator.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        mDeterminate.hide();
                    }
                });

                // Start an animation showing the different positions of the slider.
                animator.setDuration(ANIMATION_DURATION_MILLIS).start();
            }
        });

        setContentView(mCardScroller);
    }
}

Unbestimmter Schieberegler

Unbestimmte Schieberegler können zum Laden von Bildschirmen verwendet werden, deren Abschluss nach Abschluss der Aufgabe schwierig zu berechnen ist. Sie können diese Animation mit Slider.Indeterminate hinzufügen.

  1. Verwenden Sie Slider.from(), um einen Slider zu erstellen, der ein View zum Anzeigen des Schiebereglers verwendet.
  2. Starten Sie die Animation mit der Methode Slider.startIndeterminate().
  3. Wenn Sie die Animation beenden möchten, rufen Sie die Methode hide() auf der Slider.Indeterminate auf.

Mit dieser einfachen Implementierung wird der unbestimmte Scroller erstellt, wenn der Nutzer auf die Karte tippt und ausgeblendet, wenn der Nutzer noch einmal tippt:

public final class SliderActivity extends Activity {

    ...
    private Slider.Indeterminate mIndeterminate;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                   int position, long id) {
                // Toggle between showing/hiding the indeterminate slider.
                if (mIndeterminate != null) {
                    mIndeterminate.hide();
                    mIndeterminate = null;
                } else {
                    mIndeterminate = mSlider.startIndeterminate();
                }
        });

        setContentView(mCardScroller);
    }
}