第10天：Fragments（碎片）使用

欢迎来到第10天的Android编程教程！今天我们将深入学习Fragments（碎片），了解其概念、生命周期以及如何在Activity中使用Fragments。通过详细的教程和实践实例，你将掌握如何在应用中灵活运用Fragments来构建模块化和可复用的用户界面。

本节学习内容对应的代码链接: FragmentTabExample

Fragments的概念
Fragment的生命周期
在Activity中使用Fragment
实践实例：创建带有Tab的界面
- 步骤1：创建新的Android项目
- 步骤2：添加必要的依赖
- 步骤3：创建Fragment布局和类
- 步骤4：设置ViewPager2和TabLayout
- 步骤5：创建FragmentStateAdapter
- 步骤6：整合ViewPager2与TabLayout
- 步骤7：运行和测试应用
总结

1. Fragments的概念

**Fragment（碎片）**是Android引入的一种可重用的用户界面组件，旨在简化复杂界面的管理，并提升应用在不同设备上的适应性。Fragments代表了Activity界面的一部分，允许在同一个Activity中组合多个独立的UI模块。

1.1 Fragments的起源与目的

随着Android设备种类的增多，屏幕尺寸和分辨率差异巨大，开发者需要构建能够适应各种屏幕的应用。传统上，开发者需要为不同设备设计不同的Activity，这不仅增加了开发复杂性，还导致代码重复和维护困难。

Fragments的引入解决了这些问题，通过以下方式提升开发效率和应用质量：

模块化设计：将复杂的界面拆分为多个独立的模块，每个模块负责一个特定的功能或界面部分。
可重用性：相同的Fragment可以在多个Activity中复用，减少代码重复。
灵活的布局：在不同设备上，可以灵活地组合和排列Fragments，适应不同的屏幕尺寸和方向。
动态管理：可以在运行时动态添加、替换或移除Fragments，实现更加动态和响应式的用户界面。

1.2 Fragments的主要特点

生命周期独立于Activity：虽然Fragments依附于Activity，但它们拥有自己的生命周期，可以独立于Activity进行管理。
交互与通信：Fragments可以与宿主Activity以及其他Fragments进行通信，传递数据和事件。
管理界面状态：通过Fragments，可以更好地管理界面的状态和导航，提升用户体验。

1.3 Fragments的使用场景

单一Activity，多模块界面：在一个Activity中通过多个Fragments构建复杂的用户界面，如导航栏、侧边栏等。
平板与手机的适配：在手机上使用单一的Fragment，而在平板上同时显示多个Fragments，实现更丰富的界面布局。
动态内容展示：根据用户操作动态加载不同的Fragments，如选项卡切换、详情页展示等。

1.4 Fragments与Activity的关系

Fragments并不是独立存在的，它们必须嵌入在Activity中。一个Activity可以包含一个或多个Fragments，而一个Fragment只能属于一个Activity。这种关系确保了应用界面的统一性和一致性。

1.5 示例：使用Fragments的优势

假设我们正在开发一个新闻应用，包含“头条”、“科技”、“体育”等多个类别。在没有Fragments的情况下，每个类别可能需要一个独立的Activity，导致大量重复代码和复杂的导航逻辑。而使用Fragments，可以在同一个Activity中通过不同的Fragments展示不同类别的新闻，实现模块化和高效管理。

使用Fragments的优势总结：

简化界面管理：将复杂界面拆分为多个小模块，便于管理和维护。
提升代码可维护性：通过模块化设计，减少代码重复，提升代码可读性和可维护性。
增强界面灵活性：适应不同设备和屏幕尺寸，实现响应式设计。
促进团队协作：不同的开发者可以独立开发和测试不同的Fragments，提高团队开发效率。

2. Fragment的生命周期

Fragments拥有一套独立于Activity的生命周期方法，但它们的生命周期与宿主Activity紧密相关。理解和正确管理Fragment的生命周期对于确保应用性能和用户体验至关重要。

2.1 Fragment生命周期概述

Fragment的生命周期分为多个阶段，每个阶段对应不同的生命周期方法。以下是Fragment的主要生命周期方法及其调用顺序：

onAttach()：Fragment与Activity关联时调用。
onCreate()：创建Fragment时调用，用于初始化非视图相关的组件。
onCreateView()：创建并返回Fragment的视图层次结构。
onViewCreated()：视图创建完成后调用，用于进一步初始化视图组件。
onStart()：Fragment对用户可见时调用。
onResume()：Fragment开始与用户交互时调用。
onPause()：Fragment即将停止与用户交互时调用。
onStop()：Fragment对用户不可见时调用。
onDestroyView()：销毁Fragment的视图层次结构时调用。
onDestroy()：销毁Fragment时调用。
onDetach()：Fragment与Activity解除关联时调用。

2.2 生命周期方法详解

2.2.1 onAttach()

调用时机：Fragment被添加到Activity时调用，意味着Fragment与Activity建立了关联。
用途：可以在此方法中获取宿主Activity的引用，进行一些依赖于Activity的初始化操作。

示例：

override fun onAttach(context: Context) {super.onAttach(context)// 例如：初始化回调接口
}

2.2.2 onCreate()

调用时机：Fragment被创建时调用，此时Fragment还没有创建视图。
用途：进行非视图相关的初始化操作，如初始化数据、配置选项等。

示例：

override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 初始化数据
}

2.2.3 onCreateView()

调用时机：Fragment需要创建其视图时调用。
用途：通过LayoutInflater加载布局文件，创建并返回Fragment的视图层次结构。

示例：

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?
): View? {// 加载布局return inflater.inflate(R.layout.fragment_example, container, false)
}

2.2.4 onViewCreated()

调用时机：在onCreateView()方法返回视图后立即调用。
用途：对创建的视图进行进一步初始化，如设置监听器、绑定数据等。

示例：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)// 初始化视图组件val button: Button = view.findViewById(R.id.button)button.setOnClickListener {// 处理点击事件}
}

2.2.5 onStart()

调用时机：Fragment即将对用户可见时调用。
用途：进行一些与用户界面相关的准备工作，如注册广播接收器、启动动画等。

示例：

override fun onStart() {super.onStart()// 启动动画或注册接收器
}

2.2.6 onResume()

调用时机：Fragment开始与用户交互时调用。
用途：恢复用户界面状态，启动需要与用户交互的功能。

示例：

override fun onResume() {super.onResume()// 恢复UI状态或启动交互功能
}

2.2.7 onPause()

调用时机：Fragment即将停止与用户交互时调用。
用途：暂停正在进行的操作，如停止动画、保存数据等。

示例：

override fun onPause() {super.onPause()// 暂停动画或保存数据
}

2.2.8 onStop()

调用时机：Fragment对用户不可见时调用。
用途：释放占用的资源，如取消注册广播接收器、停止服务等。

示例：

override fun onStop() {super.onStop()// 释放资源或取消注册
}

2.2.9 onDestroyView()

调用时机：Fragment的视图层次结构即将被销毁时调用。
用途：清理与视图相关的资源，如解除绑定、清除引用等。

示例：

override fun onDestroyView() {super.onDestroyView()// 清理视图相关资源
}

2.2.10 onDestroy()

调用时机：Fragment即将被销毁时调用。
用途：进行最终的清理工作，如释放内存、关闭数据库连接等。

示例：

override fun onDestroy() {super.onDestroy()// 释放内存或关闭连接
}

2.2.11 onDetach()

调用时机：Fragment与Activity解除关联时调用。
用途：进行与Activity解除关联的清理工作，如释放Activity引用。

示例：

override fun onDetach() {super.onDetach()// 释放Activity引用
}

2.3 生命周期方法调用顺序

以下是Fragment生命周期方法的典型调用顺序：

onAttach()
onCreate()
onCreateView()
onViewCreated()
onStart()
onResume()
onPause()
onStop()
onDestroyView()
onDestroy()
onDetach()

2.4 生命周期管理的最佳实践

避免内存泄漏：在生命周期结束时，确保释放所有占用的资源，避免内存泄漏。例如，在onDestroyView()中清理视图绑定。
遵循生命周期方法的职责分离：将不同的初始化和清理操作放在适当的生命周期方法中，确保代码逻辑清晰和可维护。
处理配置变化：在生命周期方法中妥善处理配置变化（如屏幕旋转），确保数据和UI状态的正确恢复。
使用ViewModel与LiveData：结合使用ViewModel和LiveData，可以更好地管理数据的生命周期，避免在Fragment生命周期方法中处理复杂的数据逻辑。

3. 在Activity中使用Fragment

在Android应用中，Fragments可以通过两种主要方式在Activity中使用：静态添加和动态添加。了解这两种方式及其适用场景，有助于你灵活地构建应用界面。

3.1 静态添加Fragment

静态添加指的是在Activity的布局文件中直接定义Fragments。这种方式适用于界面结构相对固定，且不需要在运行时动态更改Fragments的场景。

3.1.1 优点

简单易用：通过XML布局文件直接定义Fragments，减少了代码量。
布局可视化：在设计器中可以直观地看到Fragments的布局效果。

3.1.2 缺点

灵活性较低：无法在运行时动态更改Fragments的数量或类型。
复用性有限：静态添加的Fragments难以在不同的Activity中复用。

3.1.3 示例：静态添加Fragment

假设我们有一个简单的Activity布局，需要在其中嵌入一个静态的Fragment。

步骤1：创建Fragment布局文件 fragment_static.xml

<!-- res/layout/fragment_static.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#E0F7FA"android:padding="16dp"><TextViewandroid:id="@+id/tv_static_fragment"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是一个静态添加的Fragment"android:textSize="18sp"android:layout_gravity="center" />
</FrameLayout>

步骤2：创建Fragment类 StaticFragment.kt

// com.example.fragmenttabexample.StaticFragment.kt
package com.example.fragmenttabexampleimport android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass StaticFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_static, container, false)}
}

步骤3：在Activity布局文件中添加Fragment

<!-- res/layout/activity_static_fragment.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/static_fragment_container"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/static_fragment"android:name="com.example.fragmenttabexample.StaticFragment"android:layout_width="match_parent"android:layout_height="match_parent" />
</FrameLayout>

步骤4：在Activity中设置布局

// com.example.fragmenttabexample.StaticFragmentActivity.kt
package com.example.fragmenttabexampleimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundleclass StaticFragmentActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_static_fragment)}
}

运行效果：

启动 StaticFragmentActivity，你将看到一个带有蓝色背景和文本“这是一个静态添加的Fragment”的界面。

3.2 动态添加Fragment

动态添加指的是在Activity运行时通过代码添加、替换或移除Fragments。这种方式适用于需要根据用户操作或应用状态动态调整界面的场景。

3.2.1 优点

高度灵活：可以在运行时根据需要动态调整Fragments，适应不同的用户操作和应用状态。
增强复用性：同一个Fragment可以在多个不同的场景中动态加载，提升复用性。

3.2.2 缺点

增加代码复杂性：需要通过代码管理Fragments的添加、替换和移除，增加了代码的复杂性。
生命周期管理：需要注意Fragments与Activity的生命周期同步，避免内存泄漏和状态异常。

3.2.3 示例：动态添加Fragment

假设我们有一个Activity，用户点击按钮后动态添加一个Fragment到界面中。

步骤1：创建动态添加的Fragment布局文件 fragment_dynamic.xml

<!-- res/layout/fragment_dynamic.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFF9C4"android:padding="16dp"><TextViewandroid:id="@+id/tv_dynamic_fragment"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是一个动态添加的Fragment"android:textSize="18sp"android:layout_gravity="center" />
</FrameLayout>

步骤2：创建Fragment类 DynamicFragment.kt

// com.example.fragmenttabexample.DynamicFragment.kt
package com.example.fragmenttabexampleimport android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass DynamicFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_dynamic, container, false)}
}

步骤3：创建Activity布局文件 activity_dynamic_fragment.xml

<!-- res/layout/activity_dynamic_fragment.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/dynamic_fragment_container"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/btn_add_fragment"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="添加Fragment"android:layout_gravity="center_horizontal"android:layout_margin="16dp" /><FrameLayoutandroid:id="@+id/fragment_container"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /></LinearLayout>

步骤4：在Activity中实现动态添加Fragment的逻辑

// com.example.fragmenttabexample.DynamicFragmentActivity.kt
package com.example.fragmenttabexampleimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Buttonclass DynamicFragmentActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_dynamic_fragment)val addButton: Button = findViewById(R.id.btn_add_fragment)addButton.setOnClickListener {// 创建Fragment实例val dynamicFragment = DynamicFragment()// 获取FragmentManagerval fragmentManager = supportFragmentManager// 开启事务val fragmentTransaction = fragmentManager.beginTransaction()// 添加Fragment到容器fragmentTransaction.add(R.id.fragment_container, dynamicFragment)// 可选：添加到回退栈，方便用户按返回键撤销操作fragmentTransaction.addToBackStack(null)// 提交事务fragmentTransaction.commit()}}
}

运行效果：

启动 DynamicFragmentActivity，点击“添加Fragment”按钮，界面下方将动态添加一个带有黄色背景和文本“这是一个动态添加的Fragment”的Fragment。如果多次点击按钮，多次添加相同的Fragment（实际应用中可以进行逻辑控制，避免重复添加）。

3.3 动态管理Fragments的最佳实践

使用标签管理Fragments：在添加Fragments时，使用唯一的标签（tag）来标识，便于后续查找和管理。例如：
```
fragmentTransaction.add(R.id.fragment_container, dynamicFragment, "DYNAMIC_FRAGMENT")
```
添加到回退栈：在进行Fragment事务时，添加到回退栈（Back Stack）中，方便用户通过返回键撤销操作。
```
fragmentTransaction.addToBackStack(null)
```
避免内存泄漏：确保在生命周期结束时，解除所有引用，避免Fragment持有Activity的引用，导致内存泄漏。
使用Fragment容器：为Fragments预留专门的容器（如FrameLayout），便于管理和布局调整。
处理配置变化：在Fragment中妥善处理配置变化（如屏幕旋转），确保数据和UI状态的正确恢复。可以通过setRetainInstance(true)保持Fragment实例不被销毁，或结合使用ViewModel管理数据。

4. 实践实例：创建带有Tab的界面

在本节中，我们将通过一个具体的项目实例，演示如何使用Fragments、ViewPager2和TabLayout创建一个带有多个标签（Tab）的用户界面。每个Tab对应一个独立的Fragment，用户可以通过点击不同的标签切换显示内容。

项目概述

我们将创建一个名为 FragmentTabExample 的Android项目，该项目包含两个主要Fragment：“首页”和“设置”。用户可以通过顶部的TabLayout切换这两个Fragment。

步骤1：创建新的Android项目

打开Android Studio，点击 “Start a new Android Studio project”。
选择 “Empty Activity” 模板，点击 “Next”。
配置项目：
- Name: FragmentTabExample
- Package name: com.example.fragmenttabexample
- Save location: 选择一个合适的位置。
- Language: Kotlin
- Minimum SDK: 根据需要选择（建议API 21+）。
点击 “Finish”，等待项目创建完成。

步骤2：添加必要的依赖

为了使用ViewPager2和TabLayout，需要在项目的build.gradle文件中添加相关依赖。

打开 app/build.gradle 文件。

在 dependencies 部分添加以下依赖：

dependencies {implementation 'androidx.appcompat:appcompat:1.6.1'implementation 'com.google.android.material:material:1.9.0'implementation 'androidx.constraintlayout:constraintlayout:2.1.4'implementation 'androidx.viewpager2:viewpager2:1.0.0'// 其他依赖...
}

点击 “Sync Now” 以同步项目。

步骤3：创建Fragment布局和类

我们将创建两个简单的Fragments，每个Fragment显示不同的内容。

3.1 创建第一个Fragment：`FirstFragment`

右键点击 com.example.fragmenttabexample 包，选择 “New” > “Fragment” > “Fragment (Blank)”。
命名为 FirstFragment，取消勾选 “Generate Fragment Layout File”（我们将手动创建布局文件），然后点击 “Finish”。

在 res/layout 目录下创建布局文件 fragment_first.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFCDD2"android:padding="16dp"><TextViewandroid:id="@+id/tv_first"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是第一个Fragment"android:textSize="18sp"android:layout_gravity="center" />
</FrameLayout>

修改 FirstFragment.kt 文件，使其加载新的布局：

package com.example.fragmenttabexampleimport android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass FirstFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_first, container, false)}
}

3.2 创建第二个Fragment：`SecondFragment`

右键点击 com.example.fragmenttabexample 包，选择 “New” > “Fragment” > “Fragment (Blank)”。
命名为 SecondFragment，取消勾选 “Generate Fragment Layout File”，然后点击 “Finish”。

在 res/layout 目录下创建布局文件 fragment_second.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#C8E6C9"android:padding="16dp"><TextViewandroid:id="@+id/tv_second"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是第二个Fragment"android:textSize="18sp"android:layout_gravity="center" />
</FrameLayout>

修改 SecondFragment.kt 文件，使其加载新的布局：

package com.example.fragmenttabexampleimport android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass SecondFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_second, container, false)}
}

步骤4：设置ViewPager2和TabLayout

我们将在主Activity的布局中添加ViewPager2和TabLayout，以实现标签切换的功能。

打开 res/layout/activity_main.xml，修改为以下内容：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/teal_700"app:tabSelectedTextColor="@color/teal_700"app:tabTextColor="@color/black" /><androidx.viewpager2.widget.ViewPager2android:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /></LinearLayout>

步骤5：创建FragmentStateAdapter

为了解决Fragments与ViewPager2的关联问题，我们需要创建一个适配器类，该类负责管理Fragments的创建和销毁。

在 com.example.fragmenttabexample 包下创建一个新Kotlin类，命名为 MyFragmentStateAdapter.kt。

在 MyFragmentStateAdapter.kt 中添加以下代码：

package com.example.fragmenttabexampleimport androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapterclass MyFragmentStateAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {// 定义要显示的Fragment列表private val fragments = listOf(FirstFragment(),SecondFragment())// 定义Tab标题private val fragmentTitles = listOf("首页","设置")override fun getItemCount(): Int = fragments.sizeoverride fun createFragment(position: Int): Fragment = fragments[position]// 提供Tab标题的方法fun getPageTitle(position: Int): String = fragmentTitles[position]
}

代码解释：

fragments：一个包含所有要显示的Fragment的列表。
fragmentTitles：每个Fragment对应的Tab标题。
getItemCount()：返回Fragment的数量。
createFragment(position: Int)：根据位置返回相应的Fragment实例。
getPageTitle(position: Int)：返回Tab的标题，用于TabLayout显示。

步骤6：整合ViewPager2与TabLayout

现在，我们需要在主Activity中将ViewPager2和TabLayout进行关联，使得用户可以通过点击Tab切换不同的Fragment。

打开 MainActivity.kt，修改为以下内容：

package com.example.fragmenttabexampleimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.tabs.TabLayout
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayoutMediatorclass MainActivity : AppCompatActivity() {private lateinit var tabLayout: TabLayoutprivate lateinit var viewPager: ViewPager2private lateinit var pagerAdapter: MyFragmentStateAdapteroverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 设置Activity的布局setContentView(R.layout.activity_main)// 初始化ViewPager2和TabLayoutviewPager = findViewById(R.id.view_pager)tabLayout = findViewById(R.id.tab_layout)// 创建适配器并设置给ViewPager2pagerAdapter = MyFragmentStateAdapter(this)viewPager.adapter = pagerAdapter// 将TabLayout和ViewPager2关联起来TabLayoutMediator(tabLayout, viewPager) { tab, position ->tab.text = pagerAdapter.getPageTitle(position)}.attach()}
}

代码解释：

初始化视图组件：通过 findViewById 获取布局中的 ViewPager2 和 TabLayout。
设置适配器：创建 MyFragmentStateAdapter 的实例，并将其设置给 ViewPager2。
关联TabLayout和ViewPager2：使用 TabLayoutMediator 将 TabLayout 与 ViewPager2 关联起来，并为每个Tab设置标题。

步骤7：运行和测试应用

连接设备或启动模拟器。
点击 “Run” 按钮，编译并运行应用。
你将看到一个带有两个标签（“首页” 和 “设置”）的界面，点击不同的标签会切换显示对应的Fragment内容。

预期效果：

首页 Tab：显示带有红色背景和 “这是第一个Fragment” 文本的界面。
设置 Tab：显示带有绿色背景和 “这是第二个Fragment” 文本的界面。

代码汇总

为了方便理解，以下是关键代码的汇总。

4.1 `fragment_first.xml`

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFCDD2"android:padding="16dp"><TextViewandroid:id="@+id/tv_first"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是第一个Fragment"android:textSize="18sp"android:layout_gravity="center" />
</FrameLayout>

4.2 `FirstFragment.kt`

package com.example.fragmenttabexampleimport android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass FirstFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_first, container, false)}
}

4.3 `fragment_second.xml`

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#C8E6C9"android:padding="16dp"><TextViewandroid:id="@+id/tv_second"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是第二个Fragment"android:textSize="18sp"android:layout_gravity="center" />
</FrameLayout>

4.4 `SecondFragment.kt`

package com.example.fragmenttabexampleimport android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass SecondFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_second, container, false)}
}

4.5 `MyFragmentStateAdapter.kt`

package com.example.fragmenttabexampleimport androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapterclass MyFragmentStateAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {// 定义要显示的Fragment列表private val fragments = listOf(FirstFragment(),SecondFragment())// 定义Tab标题private val fragmentTitles = listOf("首页","设置")override fun getItemCount(): Int = fragments.sizeoverride fun createFragment(position: Int): Fragment = fragments[position]// 提供Tab标题的方法fun getPageTitle(position: Int): String = fragmentTitles[position]
}

4.6 `activity_main.xml`

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/teal_700"app:tabSelectedTextColor="@color/teal_700"app:tabTextColor="@color/black" /><androidx.viewpager2.widget.ViewPager2android:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /></LinearLayout>

4.7 `MainActivity.kt`

package com.example.fragmenttabexampleimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.tabs.TabLayout
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayoutMediatorclass MainActivity : AppCompatActivity() {private lateinit var tabLayout: TabLayoutprivate lateinit var viewPager: ViewPager2private lateinit var pagerAdapter: MyFragmentStateAdapteroverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 设置Activity的布局setContentView(R.layout.activity_main)// 初始化ViewPager2和TabLayoutviewPager = findViewById(R.id.view_pager)tabLayout = findViewById(R.id.tab_layout)// 创建适配器并设置给ViewPager2pagerAdapter = MyFragmentStateAdapter(this)viewPager.adapter = pagerAdapter// 将TabLayout和ViewPager2关联起来TabLayoutMediator(tabLayout, viewPager) { tab, position ->tab.text = pagerAdapter.getPageTitle(position)}.attach()}
}