如何实现ViewPager中Fragment点击按钮全屏切换至另一Fragment？

核心方案 #

不用嵌套ViewPager，直接通过FragmentTransaction在主布局的容器中添加/替换全屏Fragment，配合自定义过渡动画，就能实现类似Snapchat的全屏切换效果。

步骤1：调整主布局 #

主Activity的布局需要包含原ViewPager和一个用于承载全屏Fragment的FrameLayout（放在ViewPager上方，默认无内容）：

<!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 原ViewPager，承载5个Fragment -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- 全屏Fragment容器，切换时显示 -->
    <FrameLayout
        android:id="@+id/fullscreen_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

步骤2：准备过渡动画资源 #

在res/anim目录下创建4个动画文件，模拟Snapchat的滑入滑出效果：

• slide_in_right.xml（全屏Fragment从右侧滑入）：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%"
    android:toXDelta="0%"
    android:duration="300"/>

• slide_out_left.xml（原ViewPager区域Fragment滑出左侧）：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="-20%"
    android:duration="300"/>

• slide_in_left.xml（返回时原Fragment滑入）：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-20%"
    android:toXDelta="0%"
    android:duration="300"/>

• slide_out_right.xml（返回时全屏Fragment滑出右侧）：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:duration="300"/>

步骤3：处理按钮点击事件（目标Fragment中） #

假设触发跳转的是HomeFragment，在其中给按钮设置点击监听，调用Activity的切换方法：

// HomeFragment.kt
class HomeFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_home, container, false)
        view.findViewById<Button>(R.id.btn_open_fullscreen).setOnClickListener {
            (activity as MainActivity).openFullscreenFragment()
        }
        return view
    }
}

步骤4：主Activity中实现切换逻辑 #

编写切换方法，用FragmentTransaction设置动画并添加回退栈，确保返回键能回到原ViewPager页面：

// MainActivity.kt
class MainActivity : AppCompatActivity() {
    private lateinit var viewPager: ViewPager
    private lateinit var fullscreenContainer: FrameLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        viewPager = findViewById(R.id.viewPager)
        fullscreenContainer = findViewById(R.id.fullscreen_fragment_container)
        
        // 初始化原ViewPager的Adapter（你的5个Fragment逻辑）
        viewPager.adapter = ViewPagerAdapter(supportFragmentManager)
    }

    fun openFullscreenFragment() {
        val fullscreenFragment = FullscreenFragment()
        supportFragmentManager.beginTransaction()
            // 设置双向过渡动画
            .setCustomAnimations(
                R.anim.slide_in_right,
                R.anim.slide_out_left,
                R.anim.slide_in_left,
                R.anim.slide_out_right
            )
            // 替换容器内容为全屏Fragment
            .replace(R.id.fullscreen_fragment_container, fullscreenFragment)
            // 添加到回退栈
            .addToBackStack(null)
            .commit()
    }

    // 处理返回键优先回退Fragment
    override fun onBackPressed() {
        if (supportFragmentManager.backStackEntryCount > 0) {
            supportFragmentManager.popBackStack()
        } else {
            super.onBackPressed()
        }
    }
}

// 原ViewPager的Adapter示例
class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getCount(): Int = 5

    override fun getItem(position: Int): Fragment {
        return when(position) {
            0 -> HomeFragment()
            1 -> Fragment2()
            2 -> Fragment3()
            3 -> Fragment4()
            4 -> Fragment5()
            else -> HomeFragment()
        }
    }
}

步骤5：全屏Fragment的布局与逻辑 #

全屏Fragment布局直接占满屏幕，可添加返回按钮：

<!-- fragment_fullscreen.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="全屏Fragment"
        android:textSize="24sp"/>

    <Button
        android:id="@+id.btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="返回"
        android:layout_marginTop="20dp"/>

</LinearLayout>

在全屏Fragment中处理返回按钮：

// FullscreenFragment.kt
class FullscreenFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_fullscreen, container, false)
        view.findViewById<Button>(R.id.btn_back).setOnClickListener {
            requireActivity().supportFragmentManager.popBackStack()
        }
        return view
    }
}

关键说明 #

• 嵌套ViewPager会增加布局层级和状态管理复杂度，直接用FragmentTransaction切换是更轻量的方案。
• 过渡动画可根据需求修改，比如改成淡入淡出、缩放效果，只需调整anim文件即可。
• 必须添加回退栈，否则返回键会直接退出Activity，无法回到原ViewPager页面。

内容的提问来源于stack exchange，提问作者wabhou