如何在App中实现QQ联系人列表般丝滑的页面切换效果？

2023-03-22 21:06:55

如何实现丝滑的页面切换效果：ViewPager 嵌套列表的妙用

在当今移动互联网时代，用户对 App 的体验要求越来越高。流畅的页面切换效果是提升用户体验的重要因素之一。例如，QQ 联系人列表中的 ViewPager 嵌套列表就能够在列表滑动过程中再次左右滑动切换页面，这种体验非常丝滑，让人爱不释手。那么，如何实现这种效果呢？

ViewPager 嵌套列表的原理

要实现这种效果，我们需要使用 ViewPager 嵌套列表。ViewPager 是一个可以左右滑动的容器，而列表是一个可以上下滚动的容器。我们将列表放在 ViewPager 中，就可以实现左右滑动切换页面的效果。同时，我们在列表中添加手势监听器，当用户在列表滑动过程中再次左右滑动时，拦截手势事件并交给 ViewPager 处理，这样就可以实现列表滑动过程中也能切换页面的效果。

实现步骤

1. 布局文件中添加 ViewPager 和列表

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.viewpager.widget.ViewPager>

2. 代码中初始化 ViewPager 和列表

val viewPager = findViewById<ViewPager>(R.id.viewpager)
val list = findViewById<RecyclerView>(R.id.list)

3. 在 ViewPager 中添加 Fragment 或其他页面

viewPager.adapter = MyPagerAdapter()

4. 在列表中添加手势监听器

list.addOnItemTouchListener(object : OnItemTouchListener {
    override fun onInterceptTouchEvent(rv: RecyclerView, e: MotionEvent): Boolean {
        return viewPager.dispatchTouchEvent(e)
    }

    override fun onTouchEvent(rv: RecyclerView, e: MotionEvent) {}

    override fun onRequestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}
})

示例代码

// 布局文件
<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.viewpager.widget.ViewPager>

// 代码
val viewPager = findViewById<ViewPager>(R.id.viewpager)
val list = findViewById<RecyclerView>(R.id.list)

// 初始化 ViewPager
viewPager.adapter = MyPagerAdapter()

// 初始化列表
list.adapter = MyListAdapter()

// 添加手势监听器
list.addOnItemTouchListener(object : OnItemTouchListener {
    override fun onInterceptTouchEvent(rv: RecyclerView, e: MotionEvent): Boolean {
        return viewPager.dispatchTouchEvent(e)
    }

    override fun onTouchEvent(rv: RecyclerView, e: MotionEvent) {}

    override fun onRequestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}
})