Puedes usar los controles deslizantes para mostrar la barra de carga, progreso o navegación en la parte inferior de la pantalla. Los controles deslizantes son componentes de UX globales y deben tratarse con cuidado cuando se implementan en la cristalería.
Control deslizante
Los controles deslizantes de desplazamiento se usan para indicar la posición de una tarjeta cuando te deslizas por varias tarjetas. Puedes crear el mismo tipo de efecto con Slider.Scroller
.
- Usa
Slider.from()
a fin de crear unSlider
que use unView
para mostrar el control deslizante. - Crea el
Slider.Scroller
constartScroller()
y establece las posiciones máximas y iniciales.
A continuación, se incluye una implementación simple que anima un desplazador a la siguiente posición cuando el usuario presiona:
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 de período de gracia
Los controles deslizantes de período de gracia funcionan en actividades en las que es útil que un usuario vea una notificación, pero no la interacción del usuario. Puedes agregar esta animación mediante Slider.GracePeriod
.
- Usa
Slider.from()
a fin de crear unSlider
que use unView
para mostrar el control deslizante. - Crea un
GracePeriod.Listener
y, luego, implementa los objetosonGracePeriodEnd()
yonGracePeriodCancel()
para controlar esos eventos. - Para crear una
Slider.GracePeriod
y comenzar la animación, pasa el objetoGracePeriod.Listener
al métodostartGracePeriod()
. - Anula el objeto
onBackPressed()
de la actividad para controlar el gesto de deslizar hacia abajo. - Si el usuario desliza el dedo hacia abajo, llama a
cancel()
enSlider.GracePeriod
para descartar el control deslizante.
En el siguiente ejemplo, el desplazador de 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 control deslizante del período de gracia se cancela:
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
Los controles deslizantes determinados se usan principalmente para mostrar el progreso cuando puedes calcular cuándo finaliza una tarea. Puedes agregar esta animación mediante Slider.Determinate
.
- Usa
Slider.from()
a fin de crear unSlider
que use unView
para mostrar el control deslizante. - Crea el
Slider.Determinate
constartScroller()
y establece las posiciones máximas y iniciales. - Cuando finalice la animación, llama al método
hide()
en elSlider.Determinate
para ocultar el control deslizante.
A continuación, se incluye una implementación simple que anima el desplazador a una posición establecida cuando 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
Los controles deslizantes indeterminados se pueden usar para cargar pantallas en las que es difícil calcular cuándo finaliza la tarea. Puedes agregar esta animación mediante Slider.Indeterminate
.
- Usa
Slider.from()
a fin de crear unSlider
que use unView
para mostrar el control deslizante. - Inicia la animación con el método
Slider.startIndeterminate()
. - Cuando estés listo para detener la animación, llama al método
hide()
en elSlider.Indeterminate
.
A continuación, se incluye una implementación simple que crea el desplazador indeterminado cuando el usuario presiona la tarjeta y la oculta cuando vuelve a presionar:
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);
}
}