Android: ViewPager PageTransformer seperti pada aplikasi Kurio

disclaimer: saya belum pernah mengakses source code Kurio maupun melakukan reverse engineering terhadap aplikasi tersebut.

Postingan kali ini, saya ingin share gimana caranya membuat animasi page transition seperti di aplikasi Kurio.
Di aplikasi kurio, ada dua jenis animasi page transition:
1. saat kita melakukan navigasi dari satu title berita ke title berita yang lain. animasi yang dilakukan adalah dengan merotasi halaman dengan pivot ujung kanan-bawah halaman.
2. saat kita membaca satu berita dari satu halaman ke halaman berikutnya. animasi yang dilakukan adalah dengan zoom in halaman berikutnya.

nah, untuk postingan bagian pertama ini saya hanya akan menunjukkan cara implementasi animasi jenis yang kedua.
Di android, jika kita menggunakan ViewPager dan ingin membuat animasi yang berbeda dengan animasi default untuk screen sliding antar pagenya, kita bisa melakukan dengan men-set PageTransformer; untung bagi kita, karena cara menggunakan interface PageTransformer ini juga sudah ada contohnya[1].

Permsalahannya, secara default ViewPager akan “menata” pages yang ada di dalamnya secara horizontal; Jadi kita harus melakukan sedikit modifikasi sehingga page menjadi tersusun secara vertical. Tidak perlu repot, ternyata sudah ada yang melakukan sedikit modifikasi sehingga ViewPager bisa tersusun secara vertical disini.

Selanjutnya, yang kita perlukan adalah page transformer sehingga page selanjutnya seakan-akan dimunculkan dari belakang layar sambil di zoom in. Berikut implementasi yang saya buat:

public class DepthPageTransformer implements PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
//            view.setAlpha(1 - position);

            view.setTranslationY(pageHeight * -position);

            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            view.setAlpha(0);
        }
    }
}

dengan men-set PageTransformer dalam view Pager seperti ini:

mPager.setPageTransformer(true, new DepthPageTransformer());

kita bisa menghasilkan animasi transisi seperti yang ada di aplikasi Kurio, berikut demo aplikasinya:

referensi:
1. http://developer.android.com/training/animation/screen-slide.html#pagetransformer

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s