Tidak banyak waktu berlalu sejak 7 Februari 2019 Google merilis versi alpha dari Android ViewPager2 . Informasi lebih lanjut tentang rilis ini dapat ditemukan di sini . Sekarang mari kita lihat apa itu ViewPager2.
Fitur baru
- Tata letak dukungan dari kanan ke kiri,
- Mendukung orientasi vertikal,
PageChangeListener ditingkatkan.
Apa yang berubah?
ViewPager2 dirilis untuk Android X, jadi jika Anda ingin menggunakannya, proyek Anda harus menggunakan Android X. Mari kita lihat bagaimana kita dapat menggunakan ViewPager2 baru ini.
Tambahkan ketergantungan
Tambahkan dependensi berikut ke file build.gradle tingkat aplikasi:
dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01" }
Setelah itu, sinkronkan proyek Anda.
Kustomisasi
Tambahkan widget ViewPager2 ke Aktivitas atau fragmen Anda:
<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/>
Mari kita buat tata letak untuk halaman yang akan ditampilkan di ViewPager2:
item_page.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_centerInParent="true" tools:text= "item" android:textSize="32sp" android:layout_height="wrap_content" /> </RelativeLayout>
Selanjutnya kita perlu membuat Adapter untuk ViewPager2. Ini yang paling menarik. Untuk ini kita bisa menggunakan RecyclerView.Adapter . Bukankah itu keren?
ViewPagerAdapter.kt
class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH = PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)) override fun getItemCount(): Int = colors.size override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run { tvTitle.text = "item $position" container.setBackgroundResource(colors[position]) } } class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView)
Ini adalah adaptor yang sama yang kami gunakan untuk RecyclerView biasa, dan ini berfungsi dengan baik dengan ViewPager2.
Langkah terakhir, instal adaptor untuk ViewPager2:
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } }
Itu saja! Kami mendapatkan hasil yang sama seperti ketika menggunakan ViewPager lama dengan PagerAdapter:
Pengguliran vertikal
Sebelumnya, Anda harus menggunakan perpustakaan pihak ketiga untuk menerapkan pengguliran vertikal, karena sejauh ini, Google belum memberikan peluang seperti itu. ViewPager2 baru ini sekarang memiliki dukungan untuk pengguliran vertikal. Ubah saja orientasi dalam ViewPager2 dan pengguliran vertikal akan diaktifkan. Sangat mudah!
viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL
Inilah hasilnya:
Menggunakan FragmentStateAdapter
Anda juga dapat menggunakan fragmen sebagai halaman, seperti pada ViewPager yang lama. Ada FragmentStateAdapter untuk ini. Mari kita lihat bagaimana kita bisa menggunakannya.
Pertama-tama, kita perlu membuat sebuah fragmen:
class PagerFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.item_page, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { container.setBackgroundResource(it.getInt("color")) tvTitle.text = "Item ${it.getInt("position")}" } } }
Sekarang kita akan membuat adaptor untuk ViewPager2. Kami akan meneruskan FragmentManager ke konstruktornya, yang akan mengelola fragmen:
class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun getItem(position: Int): Fragment = PagerFragment().apply { arguments = bundleOf( "color" to colors[position], "position" to position ) } override fun getItemCount(): Int = colors.size }
Sekarang instal adaptor baru ini di ViewPager2, dan Anda selesai:
viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager)
Peningkatan OnPageChangeCallback
Di ViewPager lama, antarmuka OnPageChangeListner dirancang untuk menerima perubahan halaman / gulir acara. Dan itu sangat merepotkan, karena kami perlu mengganti ketiga metode ( onPageScrollStateChanged , onPageScrolled , onPageSelected ), bahkan jika kami tidak mau.
oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) {
Sekarang kita memiliki OnPageChangeCallback , kelas abstrak dengan metode non-abstrak. Yang secara harfiah berarti bahwa kita tidak perlu mendefinisikan ulang semua metode ini, kita cukup mendefinisikan kembali yang kita butuhkan atau yang ingin kita gunakan. Jadi, misalnya, kita dapat melacak acara perubahan halaman:
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position)
Perhatian!
Karena ViewPager2 ada dalam versi alpha, ada beberapa fungsi dari ViewPager lama yang belum diimplementasikan atau tidak berfungsi dengan baik dalam versi ini.
Masalah yang diketahui sesuai dokumentasi:
- ClipToPadding,
- Tidak ada integrasi dengan TabLayout,
- Tidak ada kontrol di luar layar,
- Tidak dapat mengatur lebar halaman (100% secara default)
Informasi lebih lanjut tentang masalah yang diketahui ada di sini . Saya harap semua ini akan diperbaiki pada pembaruan selanjutnya. Saya menantikan versi stabil dari ViewPager2 baru ini. Sampai saat itu, kode yang bagus untuk semua orang!