【Android】ViewPager2 左右滑動 範例

ViewPager2 是 Android 中用於在屏幕上滑動頁面的組件。它是 ViewPager 的更新版本，主要改進了性能和穩定性。

ViewPager2 可以用於實現幻燈片效果、頁面分頁等功能。它支持横向和縱向滑動，並且支持使用RecyclerView作為數據源。

使用 ViewPager2 需要使用 PagerAdapter 作為數據源，可以方便地綁定數據與頁面的關係。

---

文章目錄

1. ViewPager2 DiceFragment
2. ViewPager2 PokerFragment
3. ViewPager2
4. Developer Documents ViewPager2

---

1.ViewPager2 DiceFragment

fragment_dice.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.AppCompatImageView
            android:src="@drawable/dice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </androidx.appcompat.widget.LinearLayoutCompat>
</layout>

DiceFragment.kt

class DiceFragment : Fragment(R.layout.fragment_dice)

2.ViewPager2 PokerFragment

fragment_poker.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.AppCompatImageView
            android:src="@drawable/poker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </androidx.appcompat.widget.LinearLayoutCompat>
</layout>

PokerFragment.kt

class PokerFragment : Fragment(R.layout.fragment_poker)

3.ViewPager2

PagingAdapter.kt

class PagingAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) :
    FragmentStateAdapter(fragmentManager, lifecycle) {

    var fragments = arrayListOf(DiceFragment(), PokerFragment())

    override fun getItemCount() = fragments.size

    override fun createFragment(position: Int) = fragments[position]

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        binding.pager.adapter = PagingAdapter(supportFragmentManager, lifecycle)
        setContentView(binding.root)
    }

}

4.Developer Documents ViewPager2

Open in Documents ViewPager2