ViewPager2 是之前更新釋出的,使用的感覺其實跟 recycler view 非常類似,所以只要熟悉 recycler view,相信 view pager 會很好上手。
這裡就跟 recycler view 一樣,快速做一個簡單的範例做介紹和分享。
可以通過左右滑動改變頁數,總共有五頁。
一樣,首先先在 build.grale(Module: app) 的 dependencies 中加入
// view pager 2
implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation 'com.google.android.material:material:1.3.0-alpha02'
我現在用的是這個版本,若有更新可換
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ViewPagerActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pagerMain"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
把 view pager 2 直接放入 layout 裡面,取個 id 和調整大小即可
Adapter
跟 recycler view 一樣,要顯示裡面的資料,就要有一個 adapter。
可用於 view pager 2 的 Adapter 分為兩個
使用 RecyclerView.Adapter
使用 FragmentStateAdapter
view pager 2 不同於 view pager 的是,view pager 2 可以直接使用 recycler view 的 adapter。除此之外,還有一個專用於切換顯示 fragment 的 adapter。在使用上,我比較常採用第二個。
在這邊就以 FragmentStateAdapter 做示範
建立一個 class,並繼承於 FragmentStateAdapter() 跟實作他的方法
class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
override fun getItemCount(): Int {
TODO("Not yet implemented")
override fun createFragment(position: Int): Fragment {
TODO("Not yet implemented")
目前為止還是可以感覺到跟 RecyclerView 的 Adapter 很相似。
getItemCount() 回傳總頁數
createFragment 是每一頁要執行的事,那這裡因為是要裝入 fragment 所以就在裡面回傳一個 fragment 即可,fragment 會在底下完成。
根據上述的功能,填入需求後,完成以下的方法。
class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
override fun getItemCount(): Int = 5
//共 5 頁
override fun createFragment(position: Int): Fragment {
return ViewPagerFragment(position)
Fragment
這是前面的 ViewPagerFragment()
。
在 fragment 的 alyout 裡面就放一個 text view 顯示在第幾頁而已
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textNumber"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="100sp"
android:text="0"
android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>
在這裡我用建構元把 position 丟入 fragment,讓他自己也能知道自己是第幾頁,再把頁數顯示在這個 text view 上。
不過,要記得:fragment 一定要有一個沒有參數的建構元,所以我的建構元是另外寫在底下。
class ViewPagerFragment(): Fragment() {
private var position: Int = 0
constructor(position: Int) : this() {
this.position = position
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val root = inflater.inflate(R.layout.fragment_pager, container, false)
val textNumber: TextView = root.findViewById(R.id.textNumber)
textNumber.text = (position + 1).toString()
return root
view pager 的 position 是從零開始的,所以在顯示上,我把 position 加上 1。
有了 adapter 以後,就可以來 activity 做使用了。這樣就完成囉
class ViewPagerActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_pager)
val viewPager = findViewById<ViewPager2>(R.id.pagerMain)
val viewPagerAdapter = ViewPagerAdapter(this)
viewPager.adapter = viewPagerAdapter