Bagaimana saya bergumul dengan Transisi Elemen Bersama dan menulis perpustakaan opensource pertama saya

Tidak ada kisah yang lebih menyedihkan di dunia
dari kisah ViewPager'e dan SET'e

Saya ingin memperingatkan bahwa pembuatnya adalah android pemula, jadi artikelnya mengandung begitu banyak ketidakakuratan teknis sehingga Anda sebaiknya diperingatkan bahwa pernyataan yang secara teknis andal dapat muncul dalam artikel tersebut.

Di mana backend mengarah

Sepanjang hidupku aku melihat backend. Awal tahun 2019, sudah ada satu proyek yang sangat ambisius, tetapi belum selesai. Perjalanan sia-sia ke Zurich untuk wawancara dengan satu perusahaan pencarian. Musim dingin, tanah, tidak ada mood. Tidak ada kekuatan dan keinginan untuk menarik proyek lebih jauh.

Saya ingin melupakan backend mengerikan ini selamanya. Untungnya, takdir memberi saya ide - itu adalah aplikasi mobile. Fitur utamanya adalah penggunaan kamera yang tidak standar. Pekerjaan mulai mendidih. Butuh sedikit waktu, dan sekarang prototipe sudah siap. Rilis proyek sudah dekat dan semuanya baik-baik saja dan proporsional, sampai saya memutuskan untuk membuat pengguna " nyaman ".

ViewPager dan Transisi Elemen Bersama. Kami mencari rekonsiliasi

Tidak ada yang ingin mengklik tombol menu kecil pada tahun 2019, baik kanan dan kiri mereka ingin menggesek layar. Dikatakan - dilakukan, dilakukan - rusak. Jadi ViewPager pertama kali muncul di proyek saya (saya telah menguraikan beberapa istilah untuk backend yang sama dengan saya - hanya memindahkan kursor). Dan Transisi Elemen Bersama (selanjutnya SET atau transisi) - elemen tanda tangan Desain Material , dengan tegas menolak untuk bekerja dengan ViewPager , membuat saya memiliki pilihan: gesekan, atau animasi transisi yang indah di antara layar. Saya tidak ingin menolak yang satu atau yang lain. Jadi pencarian saya dimulai.

Jam belajar: puluhan topik di forum dan pertanyaan yang belum terjawab di StackOverflow. Tidak peduli apa yang saya buka, saya ditawari untuk melakukan transisi dari RecyclerView ke ViewPager atau "melampirkan pisang raja Fragment.postponeEnterTransition() ".

Obat tradisional tidak membantu, dan saya memutuskan untuk mendamaikan ViewPager dan Shared Element Transition sendiri.

ViewPager: Darah Pertama

Saya mulai berpikir: "Masalahnya muncul pada saat pengguna berpindah dari satu halaman ke halaman lain ...". Dan kemudian saya sadar: "Anda tidak akan memiliki masalah dengan SET selama perubahan halaman, jika Anda tidak mengubah halaman".

Kita dapat melakukan transisi pada halaman yang sama, dan kemudian hanya mengganti halaman saat ini dengan halaman target di ViewPager .

Pertama, buat fragmen yang dengannya kita akan bekerja.

 SmallPictureFragment small_picture_fragment = new SmallPictureFragment(); BigPictureFragment big_picture_fragment = new BigPictureFragment(); 

Mari kita coba ubah fragmen di halaman saat ini ke yang lain.

 FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); //  View      int fragmentContId = previousFragment.getView().getParent().getId(); //         fragmentTransaction.replace(fragmentContId, nextFragment); fragmentTransaction.commit(); 

Kami meluncurkan aplikasi dan ... dengan lancar beralih ke layar kosong. Apa alasannya

Ternyata wadah dari setiap halaman adalah ViewPager itu sendiri, tanpa perantara seperti Page1Container , Page2Container . Oleh karena itu, hanya mengubah satu halaman ke halaman lainnya tidak berfungsi, seluruh halaman akan diganti.

Nah, untuk mengubah konten setiap halaman secara terpisah, kami membuat beberapa fragmen wadah untuk setiap halaman.

 RootSmallPictureFragment root_small_pic_fragment = new RootSmallPictureFragment(); RootBigPictureFragment root_big_pic_fragment = new RootBigPictureFragment(); 

Sesuatu tidak akan mulai lagi.

java.lang.IllegalStateException: Tidak dapat mengubah ID kontainer fragmen BigPictureFragment {...}: tadinya 2131165289 sekarang 2131165290

Kami tidak dapat melampirkan fragmen halaman kedua ( BigPictureFragment ) ke yang pertama, karena sudah terlampir pada wadah halaman kedua.

Setelah mengepalkan gigi, kami menambahkan lebih banyak fragmen ganda.

 SmallPictureFragment small_picture_fragment_fake = new SmallPictureFragment(); BigPictureFragment big_picture_fragment_fake = new BigPictureFragment(); 

Menghasilkan! Kode transisi yang pernah saya salin dari bentangan GitHub sudah berisi animasi fade in dan fade out . Oleh karena itu, sebelum transisi, semua elemen statis dari fragmen pertama menghilang, lalu gambar bergerak, dan baru kemudian elemen-elemen halaman kedua muncul. Bagi pengguna, ini terlihat seperti perpindahan nyata antar halaman.

Semua animasi telah berlalu, tetapi ada satu masalah. Pengguna masih di halaman pertama, tetapi harus di halaman kedua.

Untuk memperbaikinya, kami dengan hati-hati mengganti halaman ViewPager terlihat ViewPager yang kedua. Dan kemudian kita mengembalikan konten halaman pertama ke keadaan awal.

  handler.postDelayed( () -> { //       activity.viewPager.setCurrentItem(nextPage, false); FragmentTransaction transaction = fragmentManager.beginTransaction(); //   . //       //    Shared Element Transition transaction.replace(fragmentContainer, previousFragment); transaction.commitAllowingStateLoss(); }, //      ,     FADE_DEFAULT_TIME + MOVE_DEFAULT_TIME + FADE_DEFAULT_TIME ); } 

Apa hasilnya? (animasi - 2,7 mb)

Proyek ini dapat dilihat di GitHub .

Untuk meringkas. Kode mulai terlihat jauh lebih solid: daripada 2 fragmen awal, saya mendapat sebanyak 6, instruksi muncul di dalamnya yang mengontrol kinerja, mengganti fragmen pada waktu yang tepat. Dan ini hanya di demo.

Dalam proyek yang sama, satu demi satu dalam kode, cadangan mulai muncul di tempat-tempat yang paling tak terduga. Mereka tidak membiarkan aplikasi berantakan ketika pengguna mengklik tombol dari halaman "salah" atau membatasi kerja latar belakang dari duplikat fragmen.

Ternyata android tidak memiliki panggilan balik untuk menyelesaikan transisi , dan waktu pelaksanaannya sangat sewenang-wenang dan tergantung pada banyak faktor (misalnya, seberapa cepat RecyclerView memuat dalam fragmen yang dihasilkan). Hal ini menyebabkan fakta bahwa penggantian fragmen di handler.postDelayed() sering dieksekusi terlalu cepat atau terlambat, yang hanya memperburuk masalah sebelumnya.

Sorotan terakhir adalah bahwa selama animasi, pengguna cukup menggesek ke halaman lain dan menonton dua layar kembar, setelah itu aplikasi juga menariknya ke layar yang diinginkan.

Artefak yang menarik dari pendekatan ini (animasi - 2,7 mb)

Keadaan ini tidak cocok untukku, dan aku, penuh kemarahan yang saleh, mulai mencari solusi lain.

Cara membuat Transisi Elemen Bersama di Viewpager dengan benar

Mencoba PageTransformer

Masih belum ada jawaban di Internet, dan saya berpikir: bagaimana lagi transisi ini dapat dihidupkan. Sesuatu dalam subkorteks kesadaran berbisik kepada saya: "Gunakan PageTransformer , Luke." Gagasan itu tampak menjanjikan bagi saya dan saya memutuskan untuk mendengarkan.

Idenya adalah membuat PageTransformer , yang, tidak seperti Android SET , tidak akan membutuhkan pengulangan beberapa setTransitionName(transitionName) dan FragmentTransaction.addSharedElement(sharedElement,name) di kedua sisi transisi. Ini akan memindahkan elemen setelah babatan dan memiliki antarmuka yang sederhana seperti:

  public void addSharedTransition(int fromViewId, int toViewId) 

Kami melanjutkan ke pengembangan. Saya akan menyimpan data dari metode addSharedTransition(fromId, toId) ke Set from Pair dan mendapatkannya dalam metode PageTransfomer

 /**     ,   ,     */ public void transformPage(@NonNull View page, float position) 

Di dalam, saya akan melihat semua pasangan View tersimpan, di antaranya saya perlu membuat animasi. Dan saya akan mencoba memfilternya sehingga hanya elemen yang terlihat yang dianimasikan.

Pertama, mari kita periksa apakah elemen yang perlu dianimasikan telah dibuat. Kami bukan pemilih, dan jika View tidak dibuat sebelum dimulainya animasi, kami tidak akan memecah seluruh animasi (seperti Transisi Elemen Bersama ), tetapi mengambilnya ketika elemen dibuat.

 for (Pair<Integer,Integer> idPair : sharedElementIds) { Integer fromViewId = idPair.first; Integer toViewId = idPair.second; View fromView = activity.findViewById(fromViewId); View toView = activity.findViewById(toViewId); if (fromView != null && toView != null) { 

Saya menemukan halaman-halaman di mana gerakan itu terjadi (bagaimana saya menentukan nomor halaman akan dijelaskan di bawah).

 View fromPage = pages.get(fromPageNumber); View toPage = pages.get(toPageNumber); 

Jika kedua halaman sudah dibuat, maka saya sedang mencari sepasang View pada mereka, yang perlu saya menghidupkan.

 If (fromPage != null && toPage != null) { fromView = fromPage.findViewById(fromViewId); toView = toPage.findViewById(toViewId); 

Pada tahap ini, kami memilih View, yang terletak pada halaman di mana pengguna menggulir.

Saatnya untuk mendapatkan banyak variabel. Saya menghitung poin referensi:

 //         //     float fromX = fromView.getX() - fromView.getTranslationX(); float fromY = fromView.getY() - fromView.getTranslationY(); float toX = toView.getX() - toView.getTranslationX(); float toY = toView.getY() - toView.getTranslationY(); float deltaX = toX - fromX; float deltaY = toY - fromY; //      float fromWidth = fromView.getWidth(); float fromHeight = fromView.getHeight(); float toWidth = toView.getWidth(); float toHeight = toView.getHeight(); float deltaWidth = toWidth - fromWidth; float deltaHeight = toHeight - fromHeight; //       boolean slideToTheRight = toPageNumber > fromPageNumber; 

Dalam cuplikan terakhir, saya mengatur slideToTheRight , dan sudah dalam hal ini akan berguna bagi saya. Terjemahan masuk tergantung padanya, yang menentukan View akan terbang ke tempatnya atau di suatu tempat di luar layar.

 float pageWidth = getScreenWidth(); float sign = slideToTheRight ? 1 : -1; float translationY = (deltaY + deltaHeight / 2) * sign * (-position); float translationX = (deltaX + sign * pageWidth + deltaWidth / 2) * sign * (-position); 

Menariknya, rumus offset untuk X dan Y untuk kedua View , pada halaman awal dan halaman yang dihasilkan, ternyata sama, meskipun ada beberapa offset awal.

Tetapi dengan skalanya, sayangnya, trik ini tidak akan berhasil - Anda perlu mempertimbangkan apakah View ini View awal atau akhir dari animasi.

Ini mungkin mengejutkan bagi seseorang, tetapi transformPage(@NonNull View page, float position) dipanggil berkali-kali: untuk setiap halaman yang di-cache (ukuran cache dapat disesuaikan). Dan, agar tidak menggambar ulang tampilan animasi beberapa kali, untuk setiap panggilan ke transformPage() , kami hanya mengubah yang ada di page saat ini.

 //   View     if (page.findViewById(fromId) != null) { //      fromView.setTranslationX(translationX); fromView.setTranslationY(translationY); / /   float scaleX = (fromWidth == 0) ? 1 : //  View   , //        (fromWidth + deltaWidth * sign * (-position)) / fromWidth; float scaleY = (fromHeight == 0) ? 1 : //  View   , //        (fromHeight + deltaHeight * sign * (-position)) / fromHeight; fromView.setScaleX(scaleX); fromView.setScaleY(scaleY); } //   View     if (page.findViewById(toId) != null) { toView.setTranslationX(translationX); toView.setTranslationY(translationY); float scaleX = (toWidth == 0) ? 1 : (toWidth + deltaWidth * sign * (-position)) / toWidth; float scaleY = (toHeight == 0) ? 1 : (toHeight + deltaHeight * sign * (-position)) / toHeight; toView.setScaleX(scaleX); toView.setScaleY(scaleY); } 

Pilih halaman untuk menggambar animasi

ViewPager tidak terburu-buru untuk berbagi informasi antara halaman mana yang sedang bergulir. Seperti yang saya janjikan, sekarang saya akan memberi tahu Anda bagaimana kami mendapatkan informasi ini. Di PageTransformer kami PageTransformer kami mengimplementasikan antarmuka ViewPager.OnPageChangeListener lain. Setelah mempelajari output onPageScrolled() melalui System.out.println() saya sampai pada rumus berikut:

 public void onPageScrolled( int position, float positionOffset, int positionOffsetPixels ) { Set<Integer> visiblePages = new HashSet<>(); visiblePages.add(position); visiblePages.add(positionOffset >= 0 ? position + 1 : position - 1); visiblePages.remove(fromPageNumber); toPageNumber = visiblePages.iterator().next(); if (pages == null || toPageNumber >= pages.size()) toPageNumber = null; } public void onPageSelected(int position) { this.position = position; } public void onPageScrollStateChanged(int state) { if (state == SCROLL_STATE_IDLE) { //      ,    fromPageNumber = position; resetViewPositions(); } } 

Itu saja. Kami berhasil! Animasi memonitor gerakan pengguna. Mengapa memilih antara gesek dan Transisi Elemen Bersama , saat Anda dapat meninggalkan semuanya.

Saat menulis artikel ini, saya menambahkan efek dari hilangnya elemen statis - itu masih sangat kasar, sehingga belum ditambahkan ke perpustakaan.

Lihat apa yang terjadi pada akhirnya (animasi - 2,4 mb)

Seperti apa fungsinya dengan perpustakaan

Konfigurasi ini ternyata cukup ringkas.

 ArrayList<Fragment> fragments = new ArrayList<>(); fragments.add(hello_fragment); fragments.add(small_picture_fragment); fragments.add(big_picture_fragment); SharedElementPageTransformer transformer = new SharedElementPageTransformer(this, fragments); transformer.addSharedTransition(R.id.smallPic_image_cat2, R.id.bigPic_image_cat, true); transformer.addSharedTransition(R.id.smallPic_text_label3, R.id.bigPic_text_label, true); transformer.addSharedTransition(R.id.hello_text, R.id.smallPic_text_label3, true); viewPager.setPageTransformer(false, transformer); viewPager.addOnPageChangeListener(transformer); 

onClick , termasuk semua transisi, mungkin terlihat seperti ini:

 smallCatImageView.setOnClickListener( v -> activity.viewPager.setCurrentItem(2) ); 

Agar kode tidak hilang, saya meletakkan perpustakaan di repositori JCenter dan di GitHub . Jadi saya menghubungi dunia opensource. Anda dapat mencobanya di proyek Anda hanya dengan menambahkan

 dependencies { //... implementation 'com.github.kirillgerasimov:shared-element-view-pager:0.0.2-alpha' } 

Semua sumber tersedia di GitHub

Kesimpulan

Sekalipun Internet tidak tahu jawabannya, ini tidak berarti tidak. Cari solusi, coba sampai berhasil. Mungkin Anda akan menjadi yang pertama untuk mencapai bagian bawah ini dan membaginya dengan komunitas.