Jetpack Pager 使用与原理解析

一、引言

在 Android 开发中，实现页面滑动切换的效果是一个常见需求，比如引导页、图片轮播等场景。Jetpack 中的 Pager 组件为开发者提供了便捷且强大的解决方案，它能够帮助开发者轻松实现页面的滑动切换功能，并且支持多种布局和交互方式。本文将详细介绍 Jetpack Pager 的使用方法，并深入剖析其源码原理。

二、Jetpack Pager 基本介绍

Jetpack Pager 是 Android Jetpack 中的一个组件，主要包括 ViewPager2 和 Compose 中的 HorizontalPager、VerticalPager 等。ViewPager2 是 ViewPager 的升级版，提供了更丰富的功能和更好的性能；而 Compose 中的 Pager 则是为 Jetpack Compose 设计的，更符合声明式 UI 的编程范式。

三、ViewPager2 使用

3.1 添加依赖

在项目的 build.gradle 文件中添加 ViewPager2 的依赖：

implementation 'androidx.viewpager2:viewpager2:1.1.0'

3.2 布局文件中使用 ViewPager2

在布局文件中添加 ViewPager2 组件：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

3.3 创建适配器

ViewPager2 需要一个适配器来提供页面内容，适配器需要继承自 RecyclerView.Adapter。以下是一个简单的适配器示例：

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.pagerdemo.R

class ViewPager2Adapter(private val dataList: List<String>) :
    RecyclerView.Adapter<ViewPager2Adapter.ViewHolder>() {

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.textView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view_pager2, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = dataList[position]
    }

    override fun getItemCount(): Int {
        return dataList.size
    }
}

这里的 item_view_pager2.xml 是每个页面的布局文件，包含一个 TextView 用于显示文本。

3.4 在 Activity 中设置适配器

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.viewpager2.widget.ViewPager2
import com.example.pagerdemo.ViewPager2Adapter

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager2: ViewPager2 = findViewById(R.id.viewPager2)
        val dataList = listOf("Page 1", "Page 2", "Page 3")
        val adapter = ViewPager2Adapter(dataList)
        viewPager2.adapter = adapter
    }
}

通过以上步骤，就可以实现一个简单的 ViewPager2 页面滑动效果。

3.5 设置页面切换动画

ViewPager2 支持设置页面切换动画，通过 ViewPager2.setPageTransformer 方法可以自定义页面切换动画。以下是一个简单的缩放动画示例：

viewPager2.setPageTransformer { page, position ->
    val scaleFactor = if (position < -1 || position > 1) {
        0.8f
    } else {
        1 - 0.2f * Math.abs(position)
    }
    page.scaleX = scaleFactor
    page.scaleY = scaleFactor
}

3.6 监听页面切换事件

可以通过 ViewPager2.registerOnPageChangeCallback 方法监听页面切换事件：

viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels)
        // 页面滚动时的回调
    }

    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        // 页面选中时的回调
    }

    override fun onPageScrollStateChanged(state: Int) {
        super.onPageScrollStateChanged(state)
        // 页面滚动状态改变时的回调
    }
})

四、Compose 中的 Pager 使用

4.1 添加依赖

在项目的 build.gradle 文件中添加 Compose Pager 的依赖：

implementation "androidx.compose.foundation:foundation:1.4.3"
implementation "androidx.compose.foundation:foundation-layout:1.4.3"

4.2 创建 HorizontalPager 示例

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ComposePagerExample() {
    val pagerState = rememberPagerState()
    HorizontalPager(
        pageCount = 3,
        state = pagerState,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Page $page")
        }
    }
}

在这个示例中，使用 HorizontalPager 创建了一个水平滑动的页面，每个页面显示一个文本。

4.3 监听页面切换

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ComposePagerWithListener() {
    val pagerState = rememberPagerState()
    HorizontalPager(
        pageCount = 3,
        state = pagerState,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Page $page")
        }
    }

    LaunchedEffect(pagerState.currentPage) {
        // 页面切换时的回调
        println("Current page: ${pagerState.currentPage}")
    }
}

五、ViewPager2 源码原理解析

5.1 整体架构

ViewPager2 基于 RecyclerView 实现，它继承自 RecyclerView，利用 RecyclerView 的布局和滚动机制来实现页面的滑动切换。ViewPager2 主要由以下几个核心部分组成：

• ViewPager2 类 ：继承自 RecyclerView，是 ViewPager2 的核心类，负责处理页面的滑动、切换等操作。
• Adapter ：继承自 RecyclerView.Adapter，用于提供页面内容。
• PageTransformer：用于自定义页面切换动画。
• OnPageChangeCallback：用于监听页面切换事件。

5.2 初始化过程

在 ViewPager2 的构造函数中，会进行一些初始化操作，包括设置布局管理器、禁用滚动条等：

public ViewPager2(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // 初始化布局管理器
    mLayoutManager = new LinearLayoutManager(context, orientation, false);
    setLayoutManager(mLayoutManager);
    // 禁用滚动条
    setVerticalScrollBarEnabled(false);
    setHorizontalScrollBarEnabled(false);
    // 其他初始化操作
}

5.3 页面切换实现

ViewPager2 的页面切换主要通过 RecyclerView 的滚动机制实现。当用户滑动页面时，RecyclerView 会根据滚动距离和方向来判断是否需要切换到下一个页面。以下是 ViewPager2 处理滚动事件的部分代码：

@Override
public boolean onTouchEvent(MotionEvent ev) {
    if (mIsFakeDragging) {
        return mFakeDragger.onTouchEvent(ev);
    }
    if (!isUserInputEnabled()) {
        return false;
    }
    return super.onTouchEvent(ev);
}

@Override
public void onScrolled(int dx, int dy) {
    super.onScrolled(dx, dy);
    // 处理滚动事件，判断是否需要切换页面
    if (mScrollEventAdapter != null) {
        mScrollEventAdapter.onScrolled(dx, dy);
    }
}

在 onScrolled 方法中，会调用 ScrollEventAdapter 的 onScrolled 方法来处理滚动事件，判断是否需要切换页面。

5.4 页面切换动画实现

当设置了 PageTransformer 时，ViewPager2 会在页面滚动过程中调用 PageTransformer 的 transformPage 方法来实现页面切换动画：

private void applyPageTransformer() {
    if (mPageTransformer == null) {
        return;
    }
    final int childCount = getChildCount();
    for (int i = 0; i < childCount; i++) {
        final View child = getChildAt(i);
        final float position = getChildPosition(child);
        mPageTransformer.transformPage(child, position);
    }
}

在 applyPageTransformer 方法中，会遍历所有子视图，根据子视图的位置调用 PageTransformer 的 transformPage 方法来应用动画效果。

六、Compose Pager 源码原理解析

6.1 整体架构

Compose 中的 Pager 是基于 Compose 的布局和手势系统实现的。它主要由以下几个核心部分组成：

• PagerState ：用于管理 Pager 的状态，包括当前页面索引、滚动位置等。
• HorizontalPager/VerticalPager ：具体的 Pager 组件，负责处理页面的布局和滚动。
• PagerScope ：提供了一些与 Pager 相关的作用域方法，方便开发者进行操作。

6.2 初始化过程

在 HorizontalPager 或 VerticalPager 的初始化过程中，会创建 PagerState 对象，并将其传递给内部的布局和手势处理逻辑：

@Composable
@OptIn(ExperimentalFoundationApi::class)
fun HorizontalPager(
    pageCount: Int,
    state: PagerState = rememberPagerState(),
    modifier: Modifier = Modifier,
    // 其他参数
) {
    // 初始化 PagerState
    val pagerState = remember(pageCount) {
        state.apply {
            this.pageCount = pageCount
        }
    }
    // 其他初始化操作
    PagerLayout(
        state = pagerState,
        modifier = modifier,
        // 其他参数
    )
}

6.3 页面布局和滚动实现

Pager 的页面布局和滚动主要通过 Compose 的布局和手势系统实现。在 PagerLayout 中，会根据 PagerState 的状态来布局页面，并处理用户的手势事件：

@Composable
@OptIn(ExperimentalFoundationApi::class)
private fun PagerLayout(
    state: PagerState,
    modifier: Modifier = Modifier,
    // 其他参数
) {
    Layout(
        modifier = modifier
           .pointerInput(state) {
                // 处理手势事件，实现页面滚动
                detectDragGestures(
                    onDragStart = {
                        // 开始拖动时的处理
                    },
                    onDrag = { change, dragAmount ->
                        // 拖动过程中的处理
                        state.dragBy(dragAmount.x)
                    },
                    onDragEnd = {
                        // 拖动结束时的处理
                    }
                )
            },
        content = {
            // 页面内容布局
            for (page in 0 until state.pageCount) {
                key(page) {
                    pageContent(page)
                }
            }
        }
    ) { measurables, constraints ->
        // 页面测量和布局逻辑
    }
}

在 PagerLayout 中，使用 Layout 组件来布局页面内容，并通过 pointerInput 处理用户的手势事件，调用 PagerState 的 dragBy 方法来实现页面滚动。

七、总结

Jetpack Pager 为 Android 开发者提供了强大而便捷的页面滑动切换解决方案。ViewPager2 基于 RecyclerView 实现，适用于传统的 View 体系；而 Compose 中的 Pager 则更符合声明式 UI 的编程范式，适用于 Jetpack Compose 开发。通过对它们的使用和源码分析，我们可以更好地理解其工作原理，从而在实际开发中灵活运用，实现各种复杂的页面滑动切换效果。无论是引导页、图片轮播还是其他需要页面切换的场景，Jetpack Pager 都能帮助我们高效地完成开发任务。