Android语言基础教程（66）Android高级用户界面设计高级组件之选项卡：Android选项卡进化史：从“老三样”到Fragment的优雅切换

开发Android应用时，把一个复杂对话框拆成几个标签页，界面顿时清爽多了。

在Android应用开发中，选项卡是一种常见且重要的界面设计模式，它允许用户通过简单的点击操作在不同内容区域之间切换。无论是社交App底部的导航栏，还是设置中的分类界面，选项卡都大大提升了用户体验和应用内容的组织性。

还记得早期Android版本中那些略显笨拙的选项卡实现吗？那时我们需要和TabHost、TabWidget这对“难兄难弟”打交道。随着Android系统演进，选项卡实现方式也发生了巨大变化，如今我们有更优雅的Fragment和ViewPager来创建流畅的选项卡界面。

选项卡的基本概念：为什么它如此重要

选项卡在Android应用中如此流行，原因很简单：它可以在有限屏幕空间内组织大量内容。想象一下，如果没有选项卡，我们可能需要一堆跳转页面来展示不同类别的内容，用户操作路径会变得冗长而繁琐。

一个典型的选项卡界面由两部分组成：

在Android设计中，选项卡主要有两种布局方式：顶部导航栏和底部导航栏。虽然google官方曾推崇顶部导航，但随着大屏手机普及，底部导航因为更符合人体工学而变得越来越流行——用户单手操作时，拇指更容易点击屏幕底部区域。

传统方式：使用TabHost实现选项卡

在Android早期版本中，TabHost是实现选项卡的唯一官方组件。使用它需要三个核心组件协同工作：TabHost（容器）、TabWidget（标签组）和FrameLayout（内容区）。

基本布局结构

下面是传统TabHost布局文件的典型结构：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <!-- 这里定义所有选项卡内容，初始时可以为空 -->
        </FrameLayout>
    </LinearLayout>
</TabHost>

注意一点：TabWidget和FrameLayout必须使用Android系统的标准ID，分别是 @android:id/tabs和 @android:id/tabcontent，这是TabHost正常工作的前提。

实现TabActivity

有了布局文件，接下来需要创建一个继承自TabActivity的Activity来管理这些选项卡：

public class MainActivity extends TabActivity {
    private TabHost tabHost;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // 获取TabHost对象
        tabHost = getTabHost();
        
        // 初始化TabHost，这一步很关键！
        tabHost.setup();
        
        LayoutInflater inflater = LayoutInflater.from(this);
        
        // 加载各个选项卡的布局
        inflater.inflate(R.layout.tab1, tabHost.getTabContentView());
        inflater.inflate(R.layout.tab2, tabHost.getTabContentView());
        inflater.inflate(R.layout.tab3, tabHost.getTabContentView());
        
        // 添加第一个选项卡
        tabHost.addTab(tabHost.newTabSpec("tab01")
                .setIndicator("标签页一")
                .setContent(R.id.linearLayout1));
                
        // 添加第二个选项卡
        tabHost.addTab(tabHost.newTabSpec("tab02")
                .setIndicator("标签页二")
                .setContent(R.id.linearLayout2));
                
        // 添加第三个选项卡
        tabHost.addTab(tabHost.newTabSpec("tab03")
                .setIndicator("标签页三")
                .setContent(R.id.linearLayout3));
    }
}

标签的多样化设计

TabHost不仅支持简单的文本标签，还可以在标签中加入图标，甚至完全自定义标签样式：

// 创建带图标的选项卡
tabHost.addTab(tabHost.newTabSpec("tab1")
        .setIndicator("首页", 
                getResources().getDrawable(R.drawable.home_icon))
        .setContent(R.id.home_content));
 
// 使用自定义View作为选项卡
View customTabView = inflater.inflate(R.layout.custom_tab, null);
TextView tabText = customTabView.findViewById(R.id.tab_text);
tabText.setText("自定义标签");
ImageView tabIcon = customTabView.findViewById(R.id.tab_icon);
tabIcon.setImageResource(R.drawable.custom_icon);
 
tabHost.addTab(tabHost.newTabSpec("tab_custom")
        .setIndicator(customTabView)
        .setContent(R.id.custom_content));

选项卡事件监听

在实际应用中，我们经常需要监听选项卡的切换事件：

// 设置选项卡切换监听器
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
    @Override
    public void onTabChanged(String tabId) {
        // 当用户切换选项卡时执行相关操作
        if ("tab01".equals(tabId)) {
            // 切换到第一个选项卡时的处理
            Log.d("TabHost", "切换到第一个选项卡");
        } else if ("tab02".equals(tabId)) {
            // 切换到第二个选项卡时的处理
            Log.d("TabHost", "切换到第二个选项卡");
        }
    }
});

传统方式的局限性

尽管TabHost在早期Android版本中很实用，但它存在几个明显缺点：

正因为这些局限性，Google引入了更现代化的选项卡实现方式。

现代化方式：使用Fragment实现选项卡

Fragment的出现为Android界面设计带来了革命性变化。Fragment允许我们将界面拆分为独立的模块，每个模块拥有自己的生命周期和响应能力。

基本Fragment实现

首先，创建一个Fragment的基本类：

public class HomeFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // 加载Fragment的布局文件
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
    
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // 在这里初始化界面组件和设置事件监听器
        TextView textView = view.findViewById(R.id.home_text);
        textView.setText("首页内容");
    }
}

使用RadioGroup实现底部导航

一种简单而有效的选项卡实现方式是使用RadioGroup和Fragment组合：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
        
    <RadioGroup
        android:id="@+id/tab_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#f0f0f0">
        
        <RadioButton
            android:id="@+id/tab_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:drawableTop="@drawable/home_selector"
            android:text="首页"/>
            
        <RadioButton
            android:id="@+id/tab_search"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:drawableTop="@drawable/search_selector"
            android:text="搜索"/>
            
        <RadioButton
            android:id="@+id/tab_profile"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:drawableTop="@drawable/profile_selector"
            android:text="我的"/>
    </RadioGroup>
</LinearLayout>

在Activity中处理Fragment切换：

public class MainActivity extends Activity {
    private FragmentManager fragmentManager;
    private RadioGroup tabGroup;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        fragmentManager = getFragmentManager();
        tabGroup = findViewById(R.id.tab_group);
        
        // 默认显示第一个Fragment
        switchFragment(0);
        
        tabGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                int position = 0;
                if (checkedId == R.id.tab_home) {
                    position = 0;
                } else if (checkedId == R.id.tab_search) {
                    position = 1;
                } else if (checkedId == R.id.tab_profile) {
                    position = 2;
                }
                switchFragment(position);
            }
        });
    }
    
    private void switchFragment(int index) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        Fragment fragment = null;
        
        switch (index) {
            case 0:
                fragment = new HomeFragment();
                break;
            case 1:
                fragment = new SearchFragment();
                break;
            case 2:
                fragment = new ProfileFragment();
                break;
        }
        
        if (fragment != null) {
            transaction.replace(R.id.content, fragment);
            transaction.commit();
        }
    }
}

使用ViewPager2实现可滑动的选项卡

ViewPager2是现代Android开发中实现选项卡交互的推荐方式，它支持水平滑动切换页面，与TabLayout配合使用可以提供出色的用户体验。

首先，在build.gradle中添加依赖：

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
    implementation 'com.google.android.material:material:1.6.0'
}

然后创建布局文件：

 
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
        
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

创建FragmentStateAdapter来管理各个页面：

public class TabAdapter extends FragmentStateAdapter {
    private static final int[] TAB_TITLES = new int[]{
            R.string.tab_home, 
            R.string.tab_search, 
            R.string.tab_profile};
    
    public TabAdapter(FragmentActivity fa) {
        super(fa);
    }
    
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new HomeFragment();
            case 1:
                return new SearchFragment();
            case 2:
                return new ProfileFragment();
            default:
                return null;
        }
    }
    
    @Override
    public int getItemCount() {
        return TAB_TITLES.length;
    }
}

在Activity中设置ViewPager2和TabLayout：

public class MainActivity extends AppCompatActivity {
    private ViewPager2 viewPager;
    private TabLayout tabLayout;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewPager = findViewById(R.id.view_pager);
        tabLayout = findViewById(R.id.tab_layout);
        
        // 设置Adapter
        TabAdapter adapter = new TabAdapter(this);
        viewPager.setAdapter(adapter);
        
        // 将TabLayout与ViewPager2关联
        new TabLayoutMediator(tabLayout, viewPager,
                (tab, position) -> tab.setText(getResources().getString(TAB_TITLES[position]))
        ).attach();
    }
}

选项卡设计的最佳实践

无论选择哪种实现方式，遵循一些设计原则都能让选项卡体验更佳：

1. 保持标签简洁明了

选项卡标签应该清晰传达所代表的内容，避免使用专业术语或过长文本。如果使用图标，确保它们易于理解，必要时配合文字说明。

2. 提供视觉反馈

用户切换选项卡时，应该立即给出明确的视觉反馈，包括选中状态的变化和内容的平滑过渡。

3. 合理规划选项卡数量

选项卡数量不宜过多，通常在3-5个之间比较合适。如果内容分类较多，考虑使用其他导航模式。

4. 优化性能

对于Fragment实现的选项卡，可以使用 setOffscreenPageLimit控制ViewPager预加载的页面数量，平衡流畅性和内存占用。

5. 适配不同屏幕

针对大屏设备，可以调整选项卡的布局方式，比如将标签移到侧边，充分利用屏幕空间。

结语

从传统的TabHost到现代化的Fragment和ViewPager2，Android选项卡的实现方式经历了显著进化。如今，我们拥有更强大灵活的工具来创建流畅、直观的选项卡界面。

作为开发者，理解不同实现方式的优缺点至关重要。对于新项目，推荐使用ViewPager2与TabLayout的组合，它们属于AndroidX库，持续获得更新和支持，并且与Material Design设计语言深度集成。

无论选择哪种技术，记住最终目标始终是提升用户体验。一个好的选项卡设计应该让用户轻松找到所需内容，享受直观顺畅的导航过程。