现代Android 选项卡实现方案

前言

在早期的 Android 开发中，ActivityGroup、GridView 和 ViewFlipper 是常见的选项卡实现组件。但随着 Jetpack 组件库的成熟，这些技术已逐渐被更高效、灵活的方案取代。本文将详细讲解如何用现代技术实现类似功能，并提供完整的代码实现和关键优化点。

---

一、新旧技术对比

1. 传统方案的问题

组件	缺点	现代替代方案
ActivityGroup	管理复杂，生命周期混乱，性能开销大	Fragment + ViewPager2
GridView	无法动态回收视图，大数据量下性能差	RecyclerView + GridLayoutManager
ViewFlipper	功能单一，切换动画生硬，扩展性差	ViewPager2 或属性动画实现

2. 现代方案的优势

• 性能优化：RecyclerView 的视图回收机制提升列表性能。
• 灵活性：ViewPager2 支持垂直滑动、RTL（从右到左布局）和自定义动画。
• 架构规范：基于 Fragment 和 ViewModel，符合官方推荐的架构设计。

---

二、完整实现步骤

1. 环境配置

在 build.gradle 中添加依赖：

dependencies {
    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.11.0' // TabLayout
    implementation 'androidx.viewpager2:viewpager2:1.0.0'        // ViewPager2
    implementation 'androidx.recyclerview:recyclerview:1.3.2'     // RecyclerView
}

---

2. 布局文件实现

主页面布局 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 选项卡标签 -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/black" />

    <!-- 页面容器 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Fragment 页面布局 (fragment_tab.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:clipToPadding="false" />

---

3. 代码实现

步骤 1：创建 Fragment 页面

每个选项卡对应一个 Fragment，内部使用 RecyclerView 展示网格数据：

class TabFragment : Fragment() {
    private lateinit var recyclerView: RecyclerView

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_tab, container, false)
        recyclerView = view.findViewById(R.id.recyclerView)
        setupRecyclerView()
        return view
    }

    private fun setupRecyclerView() {
        // 2列网格布局
        recyclerView.layoutManager = GridLayoutManager(context, 2)
        // 模拟数据
        val data = List(20) { "Item ${it + 1}" }
        recyclerView.adapter = TabAdapter(data)
    }

    companion object {
        fun newInstance(title: String) = TabFragment().apply {
            arguments = Bundle().apply { putString("title", title) }
        }
    }
}

步骤 2：实现 RecyclerView 适配器

class TabAdapter(private val data: List<String>) : 
    RecyclerView.Adapter<TabAdapter.ViewHolder>() {

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

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

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

    override fun getItemCount(): Int = data.size
}

步骤 3：绑定 ViewPager2 和 TabLayout

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

        val viewPager = findViewById<ViewPager2>(R.id.viewPager)
        val tabLayout = findViewById<TabLayout>(R.id.tabLayout)

        // 设置 ViewPager2 适配器
        viewPager.adapter = ViewPagerAdapter(this)

        // 绑定 TabLayout 和 ViewPager2
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = "Tab ${position + 1}"
        }.attach()
    }
}

class ViewPagerAdapter(fragmentActivity: FragmentActivity) : 
    FragmentStateAdapter(fragmentActivity) {
    
    override fun getItemCount(): Int = 3

    override fun createFragment(position: Int): Fragment {
        return TabFragment.newInstance("Tab ${position + 1}")
    }
}

---

4. 扩展优化

自定义选项卡样式

修改 TabLayout 的样式（在 res/values/styles.xml 中）：

<style name="CustomTab" parent="Widget.MaterialComponents.TabLayout.Colored">
    <item name="tabTextAppearance">@style/CustomTabText</item>
    <item name="tabIndicatorHeight">4dp</item>
</style>

<style name="CustomTabText" parent="TextAppearance.MaterialComponents.Button">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/selector_tab_text</item>
</style>

添加页面切换动画

在 ViewPager2 中设置页面切换动画：

viewPager.setPageTransformer { page, position ->
    // 自定义动画逻辑，例如缩放效果
    page.scaleX = 0.8f + (1 - abs(position)) * 0.2f
    page.scaleY = 0.8f + (1 - abs(position)) * 0.2f
}

---

三、关键点总结

1. 核心替代方案

   • ActivityGroup → Fragment + ViewPager2
   • GridView → RecyclerView + GridLayoutManager
   • ViewFlipper → ViewPager2 或属性动画

2. 性能优化技巧

   • 使用 FragmentStateAdapter 替代 FragmentPagerAdapter，避免内存泄漏。
   • 在 RecyclerView.Adapter 中复用 ViewHolder。

3. 扩展性设计

   • 通过 TabLayoutMediator 动态绑定选项卡标签。
   • 利用 ViewPager2.registerOnPageChangeCallback 监听页面滑动事件。

4. 常见问题

   • TabLayout 不显示文字：检查 TabLayoutMediator 是否正确绑定。
   • 页面空白：确保 Fragment 的布局已正确加载。

---

四、完整核心代码实现与参考

（需提前在 build.gradle 中添加 Material Design 和 ViewPager2 依赖）

1. 主 Activity 实现 (MainActivity.kt)

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

        // 绑定 ViewPager2 和 TabLayout
        val viewPager: ViewPager2 = findViewById(R.id.viewPager)
        val tabLayout: TabLayout = findViewById(R.id.tabLayout)

        // 设置 ViewPager2 适配器
        viewPager.adapter = ViewPagerAdapter(this)

        // 绑定 TabLayout 和 ViewPager2（关键！）
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = "Tab ${position + 1}" // 设置选项卡标题
        }.attach()
    }
}

// ViewPager2 适配器
class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int = 3 // 3个选项卡

    override fun createFragment(position: Int): Fragment {
        return TabFragment.newInstance("Tab ${position + 1}") // 传递参数给 Fragment
    }
}

---

2. Fragment 实现 (TabFragment.kt)

class TabFragment : Fragment() {
    private lateinit var recyclerView: RecyclerView

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // 加载 Fragment 布局
        val view = inflater.inflate(R.layout.fragment_tab, container, false)
        recyclerView = view.findViewById(R.id.recyclerView)
        setupRecyclerView()
        return view
    }

    private fun setupRecyclerView() {
        // 2列网格布局
        recyclerView.layoutManager = GridLayoutManager(requireContext(), 2)
        
        // 模拟数据（20个Item）
        val data = List(20) { "Item ${it + 1}" }
        
        // 设置适配器
        recyclerView.adapter = TabAdapter(data)
    }

    companion object {
        fun newInstance(title: String): TabFragment {
            return TabFragment().apply {
                arguments = Bundle().apply {
                    putString("title", title) // 传递标题参数（示例）
                }
            }
        }
    }
}

// RecyclerView 适配器
class TabAdapter(private val data: List<String>) : RecyclerView.Adapter<TabAdapter.ViewHolder>() {
    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.itemText)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_grid, parent, false) // 加载 Item 布局
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = data[position] // 绑定数据
    }

    override fun getItemCount(): Int = data.size
}

---

3. XML 布局文件

主页面布局 (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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 选项卡标签栏 -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/black"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/gray" />

    <!-- 页面容器 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Fragment 布局 (res/layout/fragment_tab.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:clipToPadding="false" />

RecyclerView Item 布局 (res/layout/item_grid.xml)

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/itemText"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:background="#E0E0E0"
    android:gravity="center"
    android:textSize="16sp"
    android:layout_margin="4dp" />

---

4. 依赖配置 (app/build.gradle)

dependencies {
    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.11.0' // TabLayout
    implementation 'androidx.viewpager2:viewpager2:1.0.0'        // ViewPager2
    implementation 'androidx.recyclerview:recyclerview:1.3.2'     // RecyclerView
    implementation 'androidx.fragment:fragment-ktx:1.6.2'         // Fragment
}

---

关键代码解释

1. TabLayoutMediator

   • 负责将 TabLayout 和 ViewPager2 动态绑定，自动同步选项卡点击与页面切换。
   • 通过 attach() 方法激活联动。

2. FragmentStateAdapter

   • 优化内存管理，只会保留当前页面和相邻页面的 Fragment。
   • 比 FragmentPagerAdapter 更适合页面数量较多的场景。

3. GridLayoutManager

   • 通过 spanCount 参数指定列数（示例中为2列），替代传统 GridView。
   • 支持动态调整列数：gridLayoutManager.spanCount = 3

---

运行效果

• 三个可滑动的选项卡（Tab 1/2/3）
• 每个选项卡内显示2列网格布局
• 滑动页面时，TabLayout 的指示器同步更新
• 点击 Tab 标签可快速跳转页面

---

扩展建议

1. 自定义 Tab 样式
   修改 res/values/styles.xml 中的 TabLayout 样式，或直接通过 XML 属性调整。

2. 添加页面切换动画
   使用 ViewPager2.setPageTransformer() 实现缩放、淡入淡出等效果。

3. 懒加载优化
   在 Fragment 中结合 Lifecycle 控制数据加载时机，避免不必要的资源消耗。