Material Design 是 Google 推出的一种全新的设计语言，旨在为用户提供更加直观、更加自然的视觉体验。选项卡是 Material Design 中常用的一种控件，可以让用户快速切换页面内容。本文将详细介绍如何在 Material Design 中使用选项卡控件实现页面选项卡效果，并提供示例代码。
选项卡控件的基本用法
选项卡控件可以通过 TabLayout 类来实现。在布局文件中添加如下代码：
<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" />其中，tabMode 属性用于设置选项卡的模式，可选值包括 fixed 和 scrollable。fixed 模式下，所有选项卡的宽度相同，可以在屏幕内全部显示；scrollable 模式下，选项卡的宽度根据内容自适应，可以通过滑动来查看所有选项卡。tabGravity 属性用于设置选项卡的对齐方式，可选值包括 fill 和 center。fill 模式下，选项卡填充整个 TabLayout 区域；center 模式下，选项卡居中显示。
在 Java 代码中，需要通过 TabLayout 对象来添加选项卡。可以通过 addTab() 方法来添加一个选项卡：
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("选项卡1"));
tabLayout.addTab(tabLayout.newTab().setText("选项卡2"));
tabLayout.addTab(tabLayout.newTab().setText("选项卡3"));其中，setText() 方法用于设置选项卡的文本内容。可以通过 setSelectedTabIndicatorColor() 方法来设置选中选项卡的指示器颜色：
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF0000"));选项卡控件的高级用法
除了基本用法外，选项卡控件还提供了许多高级用法，可以满足更加复杂的需求。下面介绍几种常用的高级用法。
自定义选项卡样式
选项卡控件支持自定义选项卡的样式，可以通过 TabLayout.Tab 类来实现。在 Java 代码中，可以通过 setCustomView() 方法来设置选项卡的自定义视图：
TabLayout.Tab tab = tabLayout.newTab(); tab.setCustomView(R.layout.custom_tab); tabLayout.addTab(tab);
其中，R.layout.custom_tab 是自定义视图的布局文件。在布局文件中，可以根据需求添加各种控件，例如图标、文字等。
选项卡的监听器
选项卡控件支持选项卡的监听器，可以在选项卡被选中或取消选中时执行相应的操作。在 Java 代码中，可以通过 addOnTabSelectedListener() 方法来添加选项卡的监听器：
// www.javascriptcn.com code example
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 选项卡被选中时执行的操作
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// 选项卡取消选中时执行的操作
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// 选项卡重新被选中时执行的操作
}
});ViewPager 与选项卡的结合使用
选项卡控件通常与 ViewPager 控件一起使用，可以通过滑动来切换页面内容。在 Java 代码中，需要先创建一个 ViewPager 对象，并设置对应的 PagerAdapter：
ViewPager viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
其中，MyPagerAdapter 是一个自定义的 PagerAdapter 类，需要实现 getItem() 和 getCount() 方法。在 getItem() 方法中返回对应位置的 Fragment 对象，getCount() 方法返回 Fragment 的数量。
然后，需要将 ViewPager 控件与选项卡控件进行绑定，可以通过 setupWithViewPager() 方法来实现：
tabLayout.setupWithViewPager(viewPager);
示例代码
下面是一个完整的示例代码，实现了选项卡与 ViewPager 的结合使用：
// www.javascriptcn.com code example
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>// www.javascriptcn.com code example
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = findViewById(R.id.tab_layout);
viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setIcon(R.drawable.ic_home);
tabLayout.getTabAt(1).setIcon(R.drawable.ic_dashboard);
tabLayout.getTabAt(2).setIcon(R.drawable.ic_notifications);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private static class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new HomeFragment();
case 1:
return new DashboardFragment();
case 2:
return new NotificationsFragment();
default:
return null;
}
}
@Override
public int getCount() {
return 3;
}
}
public static class HomeFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_home, container, false);
return view;
}
}
public static class DashboardFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_dashboard, container, false);
return view;
}
}
public static class NotificationsFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_notifications, container, false);
return view;
}
}
}其中，R.layout.fragment_home、R.layout.fragment_dashboard 和 R.layout.fragment_notifications 是自定义的 Fragment 布局文件，可以根据需求添加各种控件。R.drawable.ic_home、R.drawable.ic_dashboard 和 R.drawable.ic_notifications 是自定义的图标资源文件，可以根据需求替换。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da4adda941bf7134230cd2