Control deslizante

Puedes usar los controles deslizantes para mostrar una barra de carga, progreso o navegación en la parte inferior de la pantalla. Los controles deslizantes son componentes globales de UX y deben tratarse. con cuidado cuando los implementes en Glassware.


Control deslizante de desplazamiento

Los controles deslizantes de desplazamiento se usan para indicar la posición de una tarjeta cuando deslizas el dedo a través de varias tarjetas. Puedes crear el mismo tipo de efecto con Slider.Scroller

  1. Usa Slider.from() para crear un Slider que utiliza un View para mostrar el control deslizante.
  2. Crea el Slider.Scroller mediante startScroller() y establecer las posiciones iniciales y máximas.

Esta es una implementación simple que anima un desplazador a la siguiente posición cuando el usuario toca:

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

Control deslizante del período de gracia

Los controles deslizantes del período de gracia funcionan en actividades en las que es útil que un usuario ven una notificación, pero no es necesaria la interacción del usuario. Puedes agregar esto animación con Slider.GracePeriod

  1. Usa Slider.from() para crear un Slider que utiliza un View para mostrar el control deslizante.
  2. Crea un GracePeriod.Listener e implementaremos onGracePeriodEnd() y onGracePeriodCancel() para manejar esos eventos.
  3. Crea un Slider.GracePeriod y comienza la animación pasando el valor GracePeriod.Listener a la método startGracePeriod().
  4. Anular el valor de onBackPressed() para controlar el gesto de deslizar hacia abajo.
  5. Si el usuario desliza el dedo hacia abajo, llama cancel() en la Slider.GracePeriod para descartar el control deslizante.

En el siguiente ejemplo, el desplazador del período de gracia se inicia con un objeto de escucha. que reproduce un sonido de éxito cuando termina el período y un sonido descartado si el Se cancela el control deslizante del período de gracia:

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

Control deslizante de Determinación

Los controles deslizantes de determinación se usan principalmente para mostrar el progreso. Allí podrás calcular cuándo finaliza una tarea. Para agregar esta animación, usa Slider.Determinate

  1. Usa Slider.from() para crear un Slider que utiliza un View para mostrar el control deslizante.
  2. Crea el Slider.Determinate mediante startScroller() y establecer las posiciones iniciales y máximas.
  3. Cuando finalice la animación, llama al hide() en la Slider.Determinate para ocultar el control deslizante.

Esta es una implementación simple que anima la barra de desplazamiento a una posición establecida cuando la el usuario presiona:

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

Control deslizante indeterminado

Se pueden usar controles deslizantes indeterminados para cargar pantallas en las que sea difícil para calcular cuándo finaliza la tarea. Puedes agregar esto animación con Slider.Indeterminate

  1. Usa Slider.from() para crear un Slider que utiliza un View para mostrar el control deslizante.
  2. Comienza la animación con Slider.startIndeterminate().
  3. Cuando quieras detener la animación, llama al hide() en la Slider.Indeterminate

Esta es una implementación simple que crea el desplazador indeterminado cuando el usuario presiona la tarjeta y la oculta cuando vuelve a presionarla:

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