Penggeser

Anda dapat menggunakan penggeser untuk menampilkan bilah pemuatan, kemajuan, atau navigasi di di bagian bawah layar. Penggeser adalah komponen UX global dan harus diperlakukan berhati-hatilah saat menerapkannya di Gelas Anda.


Penggeser Scroller

Penggeser scroller digunakan untuk menunjukkan posisi kartu saat Anda menggeser melalui beberapa kartu. Anda bisa membuat jenis efek yang sama menggunakan Slider.Scroller

  1. Gunakan Slider.from() untuk membuat Slider yang menggunakan View untuk menampilkan penggeser.
  2. Buat Slider.Scroller menggunakan startScroller() 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 bekerja dalam aktivitas yang berguna bagi pengguna untuk melihat notifikasi, tetapi interaksi pengguna tidak diperlukan. Anda dapat menambahkan animasi menggunakan Slider.GracePeriod

  1. Gunakan Slider.from() untuk membuat Slider yang menggunakan View untuk menampilkan penggeser.
  2. Buat GracePeriod.Listener serta menerapkan onGracePeriodEnd() dan onGracePeriodCancel() untuk menangani peristiwa tersebut.
  3. Buat Slider.GracePeriod dan memulai animasi dengan meneruskan GracePeriod.Listener ke Metode startGracePeriod().
  4. Ganti onBackPressed() untuk menangani {i>gesture <i}geser ke bawah.
  5. Jika pengguna menggeser ke bawah, panggil cancel() di Slider.GracePeriod untuk menutup penggeser.

Pada contoh berikut, scroller masa tenggang dimulai dengan pemroses yang memutar suara sukses saat periode berakhir dan suara yang dihentikan 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 Penentuan

Penggeser tertentu terutama digunakan untuk menampilkan progres agar Anda dapat menghitung selesai menyelesaikan tugas. Anda dapat menambahkan animasi ini menggunakan Slider.Determinate

  1. Gunakan Slider.from() untuk membuat Slider yang menggunakan View untuk menampilkan penggeser.
  2. Buat Slider.Determinate menggunakan startScroller() dan tetapkan posisi maksimum dan awal.
  3. Ketika animasi selesai, panggil metode hide() metode tersebut pada Slider.Determinate untuk menyembunyikan bilah geser.

Berikut adalah implementasi sederhana yang menganimasikan scroller ke posisi yang ditetapkan saat ketukan pengguna:

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 Ditentukan

Penggeser yang tidak tentu dapat digunakan untuk memuat layar jika sulit untuk menghitung kapan tugas selesai. Anda dapat menambahkan animasi menggunakan Slider.Indeterminate

  1. Gunakan Slider.from() untuk membuat Slider yang menggunakan View untuk menampilkan penggeser.
  2. Mulai animasi dengan Metode Slider.startIndeterminate().
  3. Bila Anda siap menghentikan animasi, panggil metode Metode hide() di Slider.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);
    }
}