Vous pouvez utiliser des curseurs pour afficher une barre de chargement, de progression ou de navigation sur la en bas de l'écran. Les curseurs sont des composants UX globaux et doivent être traités avec précaution lorsque vous les installez dans votre appareil Glassware.
Curseur de défilement
Les curseurs de défilement sont utilisés pour indiquer la position d'une carte lorsque vous la faites glisser
sur plusieurs fiches. Vous pouvez créer le même type d'effet en utilisant
Slider.Scroller
- Utilisez
Slider.from()
pour créerSlider
qui utilise unView
pour afficher le curseur. - Créez le
Slider.Scroller
avecstartScroller()
et définir les positions maximale et initiale.
Voici une implémentation simple qui anime un conteneur de défilement jusqu'à la position suivante. Lorsque l'utilisateur appuie:
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();
}
}
Curseur du délai de grâce
Les curseurs du délai de grâce fonctionnent dans les activités où il est utile pour un utilisateur de
une notification, mais l'interaction de l'utilisateur n'est pas requise. Vous pouvez ajouter ceci
en utilisant
Slider.GracePeriod
- Utilisez
Slider.from()
pour créerSlider
qui utilise unView
pour afficher le curseur. - Créez un
GracePeriod.Listener
et implémenteronGracePeriodEnd()
etonGracePeriodCancel()
pour gérer ces événements. - Créez un
Slider.GracePeriod
et lancer l'animation en transmettantGracePeriod.Listener
jusqu'àstartGracePeriod()
. - Remplacer les paramètres
onBackPressed()
pour gérer le geste de balayage vers le bas. - Si l'utilisateur balaie l'écran vers le bas, appelez
cancel()
leSlider.GracePeriod
pour ignorer le curseur.
Dans l'exemple suivant, le conteneur de défilement du délai de grâce est initié avec un écouteur qui émet un son "réussite" à la fin des règles et un son ignoré si le le curseur du délai de grâce est annulé:
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();
}
}
}
Déterminer un curseur
Les curseurs de détermination sont principalement utilisés pour montrer la progression où vous pouvez calculer quand
une tâche se termine. Vous pouvez ajouter cette animation en utilisant
Slider.Determinate
- Utilisez
Slider.from()
pour créerSlider
qui utilise unView
pour afficher le curseur. - Créez le
Slider.Determinate
avecstartScroller()
et définir les positions maximale et initiale. - Une fois l'animation terminée, appelez la méthode
hide()
sur laSlider.Determinate
pour masquer le curseur.
Voici une implémentation simple qui anime le conteneur de défilement à une position définie lorsque la appuis des utilisateurs:
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);
}
}
Curseur indéterminé
Des curseurs indéterminés peuvent être utilisés pour charger des écrans lorsqu'il est difficile
pour calculer une fois la tâche terminée. Vous pouvez ajouter ceci
en utilisant
Slider.Indeterminate
- Utilisez
Slider.from()
pour créerSlider
qui utilise unView
pour afficher le curseur. - Commencez l'animation par
Slider.startIndeterminate()
. - Lorsque vous êtes prêt à arrêter l'animation, appelez la méthode
hide()
sur laSlider.Indeterminate
Voici une implémentation simple qui crée le conteneur de défilement indéterminé lorsque le l'utilisateur appuie sur la carte et la masque lorsqu'il appuie à nouveau:
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);
}
}