Dispositivo di scorrimento

Puoi utilizzare i cursori per visualizzare un caricamento, un avanzamento o una barra di navigazione nella nella parte inferiore dello schermo. I cursori sono componenti UX globali e devono essere considerati con attenzione quando li implementi nei tuoi Glassware.


Dispositivo di scorrimento

I cursori di scorrimento vengono utilizzati per indicare la posizione di una scheda mentre scorri tramite più schede. Puoi creare lo stesso tipo di effetto utilizzando Slider.Scroller

  1. Utilizza le funzionalità di Slider.from() per creare un Slider che utilizza un View per visualizzare il cursore.
  2. Crea il Slider.Scroller utilizzando startScroller() e imposta la posizione massima e iniziale.

Ecco una semplice implementazione che anima uno scorrimento nella posizione successiva quando l'utente tocca:

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

Dispositivo di scorrimento del periodo di tolleranza

I cursori del periodo di tolleranza funzionano nelle attività in cui è utile per un utente vedrai una notifica, ma l'interazione dell'utente non è obbligatoria. Puoi aggiungere questo dell'animazione utilizzando Slider.GracePeriod

  1. Utilizza le funzionalità di Slider.from() per creare un Slider che utilizza un View per visualizzare il cursore.
  2. Crea un GracePeriod.Listener e implementare onGracePeriodEnd() e onGracePeriodCancel() per gestire questi eventi.
  3. Crea un Slider.GracePeriod e avvia l'animazione passando GracePeriod.Listener alla startGracePeriod().
  4. Sostituisci il valore dell'attività onBackPressed() per gestire il gesto di scorrimento verso il basso.
  5. Se l'utente scorre verso il basso, chiama cancel() il Slider.GracePeriod per ignorare il cursore.

Nell'esempio seguente, lo scorrimento del periodo di tolleranza viene avviato con un listener che riproduce un suono di effetto positivo al termine del ciclo e un suono ignorato se il cursore del periodo di tolleranza è annullato:

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

Dispositivo di scorrimento di determinazione

I cursori di determinazione vengono utilizzati principalmente per mostrare l'avanzamento, quando è possibile calcolare quando viene completata un'attività. Puoi aggiungere questa animazione utilizzando Slider.Determinate

  1. Utilizza le funzionalità di Slider.from() per creare un Slider che utilizza un View per visualizzare il cursore.
  2. Crea il Slider.Determinate utilizzando startScroller() e imposta la posizione massima e iniziale.
  3. Al termine dell'animazione, richiama il metodo hide() nella Slider.Determinate per nascondere il cursore.

Di seguito è riportata una semplice implementazione che anima lo scorrimento in una posizione impostata quando tocchi dell'utente:

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

Dispositivo di scorrimento di Indeterminato

Per caricare le schermate in cui è difficile utilizzare cursori di scorrimento indeterminati da calcolare al termine dell'attività. Puoi aggiungere questo dell'animazione utilizzando Slider.Indeterminate

  1. Utilizza le funzionalità di Slider.from() per creare un Slider che utilizza un View per visualizzare il cursore.
  2. Avvia l'animazione con Slider.startIndeterminate().
  3. Quando vuoi interrompere l'animazione, chiama il metodo hide() nella Slider.Indeterminate.

Ecco una semplice implementazione che crea lo scorrimento indeterminato quando l'utente tocca la scheda e la nasconde quando tocca di nuovo:

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