Anda dapat menggunakan penggeser untuk menampilkan menu pemuatan, progres, atau navigasi di bagian bawah layar. Penggeser adalah komponen UX global dan harus ditangani dengan hati-hati saat menerapkannya di Glassware.
Penggeser Scroller
Penggeser scroller digunakan untuk menunjukkan posisi kartu saat Anda menggeser beberapa kartu. Anda dapat membuat jenis efek yang sama menggunakan
Slider.Scroller
.
- Gunakan
Slider.from()
untuk membuatSlider
yang menggunakanView
untuk menampilkan penggeser. - Buat
Slider.Scroller
menggunakanstartScroller()
dan tetapkan posisi maksimum dan awal.
Berikut adalah implementasi sederhana yang menganimasikan scroller ke posisi berikutnya saat pengguna mengetuk:
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();
}
}
Penggeser Masa Tenggang
Penggeser masa tenggang berfungsi dalam aktivitas yang memungkinkan pengguna
melihat notifikasi, tetapi interaksi pengguna tidak diperlukan. Anda dapat menambahkan animasi ini dengan menggunakan Slider.GracePeriod
.
- Gunakan
Slider.from()
untuk membuatSlider
yang menggunakanView
untuk menampilkan penggeser. - Buat
GracePeriod.Listener
dan implementasikanonGracePeriodEnd()
danonGracePeriodCancel()
untuk menangani peristiwa tersebut. - Buat
Slider.GracePeriod
dan mulai animasi dengan meneruskanGracePeriod.Listener
ke metodestartGracePeriod()
. - Ganti
onBackPressed()
aktivitas untuk menangani gestur geser ke bawah. - Jika pengguna menggeser ke bawah, panggil
cancel()
diSlider.GracePeriod
untuk menutup penggeser.
Pada contoh berikut, scroller masa tenggang diinisialisasi dengan pemroses yang memutar suara sukses saat periode berakhir dan suara yang ditutup jika penggeser masa tenggang dibatalkan:
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();
}
}
}
Penggeser Pasti
Penggeser determinasi terutama digunakan untuk menampilkan progres tempat Anda dapat menghitung saat
tugas selesai. Anda dapat menambahkan animasi ini menggunakan
Slider.Determinate
.
- Gunakan
Slider.from()
untuk membuatSlider
yang menggunakanView
untuk menampilkan penggeser. - Buat
Slider.Determinate
menggunakanstartScroller()
dan tetapkan posisi maksimum dan awal. - Setelah animasi selesai, panggil metode
hide()
padaSlider.Determinate
untuk menyembunyikan penggeser.
Berikut adalah implementasi sederhana yang menganimasikan scroller ke posisi yang ditetapkan saat pengguna mengetuk:
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);
}
}
Penggeser Tidak Tetap
Penggeser tidak tentu dapat digunakan untuk memuat layar saat sulit
dihitung saat tugas selesai. Anda dapat menambahkan animasi ini dengan menggunakan Slider.Indeterminate
.
- Gunakan
Slider.from()
untuk membuatSlider
yang menggunakanView
untuk menampilkan penggeser. - Mulai animasi dengan metode
Slider.startIndeterminate()
. - Setelah Anda siap menghentikan animasi, panggil
metode
hide()
padaSlider.Indeterminate
.
Berikut adalah implementasi sederhana yang membuat scroller yang tidak tentu saat pengguna mengetuk kartu dan menyembunyikannya saat pengguna mengetuk lagi:
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);
}
}