Android 开发中 Material Design 风格 TabLayout 使用详解-JavaScript中文网-JavaScript教程资源分享门户

前言

Material Design 风格是 Google 在 Android 5.0 中推出的一种设计风格，是一种基于平面设计、简化设计元素、强调动画效果的设计。在 Android 开发中，经常使用 Material Design 风格的控件，其中 TabLayout 是常用的一个控件，在这篇文章中，我们将介绍 TabLayout 的使用方法以及相关技术点。

什么是 TabLayout？

TabLayout 是 Android Design Support Library 中的一个控件，用于实现带有多个选项卡的界面。TabLayout 可以和 ViewPager 配合使用，实现滑动切换选项卡的效果。TabLayout 也可以单独使用，实现选项卡之间的点击切换。

如何使用 TabLayout？

1. 添加依赖

在工程的 build.gradle 文件中添加 Design Support Library 的依赖：

dependencies {
    implementation 'com.google.android.material:material:1.2.0'
}

2. 在布局文件中添加 TabLayout

在布局文件中添加 TabLayout 控件，一般放置在布局的顶部。

// javascriptcn.com 代码示例
<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="center"
    app:tabIndicatorHeight="2dp"
    app:tabSelectedTextColor="@color/selected_tab_text_color"
    app:tabTextColor="@color/tab_text_color" />

在 TabLayout 中，我们可以设置的属性有：

app:tabMode：选项卡展示模式，可选值有 fixed 和 scrollable。fixed 模式表示选项卡宽度固定，如果选项卡过多则可能无法展示完全；scrollable 模式表示选项卡可以滑动，可以展示所有选项卡。
app:tabGravity：选项卡对齐方式，可选值有 center、fill 和 left。center 表示选项卡居中对齐；fill 表示选项卡平均分布，与左右两端对齐；left 表示选项卡左对齐。
app:tabIndicatorHeight：选项卡指示线的高度。
app:tabSelectedTextColor：选项卡选中时的字体颜色。
app:tabTextColor：选项卡未选中时的字体颜色。

3. 创建选项卡

在代码中创建选项卡，可以通过 TabLayout 的 newTab() 方法来创建一个选项卡。

// javascriptcn.com 代码示例
// 获取 TabLayout 控件
TabLayout tabLayout = findViewById(R.id.tab_layout);

// 创建选项卡
TabLayout.Tab tab1 = tabLayout.newTab().setText("Tab1");
TabLayout.Tab tab2 = tabLayout.newTab().setText("Tab2");
TabLayout.Tab tab3 = tabLayout.newTab().setText("Tab3");

// 将选项卡添加到 TabLayout 中
tabLayout.addTab(tab1);
tabLayout.addTab(tab2);
tabLayout.addTab(tab3);

4. 设置选项卡点击事件

为选项卡设置点击事件，可以通过 TabLayout 的 addOnTabSelectedListener() 方法来实现。

// javascriptcn.com 代码示例
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) {
        // 选项卡再次被选中时回调
    }
});

在 onTabSelected() 方法中，我们可以将选项卡的位置传递给 ViewPager，实现选项卡与页面的联动效果。

示例代码

以下是一个包含 TabLayout 和 ViewPager 的示例代码，可供参考：

// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViewPager();
        initTabLayout();
    }

    private void initViewPager() {
        viewPager = findViewById(R.id.view_pager);
        List<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(new Fragment1());
        fragmentList.add(new Fragment2());
        fragmentList.add(new Fragment3());
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager(),
                FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }
        };
        viewPager.setAdapter(adapter);
    }

    private void initTabLayout() {
        tabLayout = findViewById(R.id.tab_layout);
        TabLayout.Tab tab1 = tabLayout.newTab().setText("Tab1");
        TabLayout.Tab tab2 = tabLayout.newTab().setText("Tab2");
        TabLayout.Tab tab3 = tabLayout.newTab().setText("Tab3");
        tabLayout.addTab(tab1);
        tabLayout.addTab(tab2);
        tabLayout.addTab(tab3);
        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) {

            }
        });
    }
}

总结

TabLayout 是 Android 开发中常用的一个控件，可以实现带有多个选项卡的界面，同时也可以和 ViewPager 配合使用，实现滑动切换选项卡的效果。在使用 TabLayout 的过程中，需要注意选项卡的创建和点击事件的处理。希望本文能够对大家在 Android 开发中应用 Material Design 风格的 TabLayout 控件有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652de05c7d4982a6ebefba6c