Material Design 中 CoordinatorLayout 和 AppBarLayout 实现 TabLayout 方式-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 设计语言中，TabLayout 是一种广泛使用的 UI 组件，用于展示多个有关联的数据或视图。而在实现 TabLayout 时，Google 推荐使用 CoordinatorLayout 和 AppBarLayout，这两个组件也是 Material Design 中的重要组成部分。本文将详细介绍如何使用 CoordinatorLayout 和 AppBarLayout 实现 TabLayout 方式，并提供示例代码。

1. 什么是 CoordinatorLayout 和 AppBarLayout？

CoordinatorLayout 是 Android Support 库中的一个布局容器，它和普通的 ViewGroup 一样，用于组织子 View 的布局和交互。而不同的是，它也提供了一些强大的布局特效和协调的功能，可以在子 View 间协调一些复杂的交互，比如滑动响应、动画交互等。

AppBarLayout 是一个特殊的子 View，专门用于实现 Material Design 中的 AppBar，也就是应用程序的顶部栏。AppBarLayout 可以包含多个子 View，比如 Toolbar、TabLayout 等，这些 View 可一起协作实现顶部栏的特效。

2. TabLayout 实现方式

使用 CoordinatorLayout 和 AppBarLayout 实现 TabLayout 的方式很简单，只需在布局文件中正确嵌套即可。具体实现步骤如下：

2.1 添加依赖

在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.android.support:design:27.1.1'

2.2 布局文件

在布局文件中添加 CoordinatorLayout 和 AppBarLayout，其中 AppBarLayout 内部包含一个 Toolbar 和 TabLayout。具体代码如下：

// javascriptcn.com code example
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:title="AppBar"
            app:layout_scrollFlags="scroll|enterAlways" />
 
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
 
    </android.support.design.widget.AppBarLayout>
 
</android.support.design.widget.CoordinatorLayout>

2.3 设置 TabLayout

在代码中设置 TabLayout，通过 addTab() 方法添加选项卡，并设置选项卡的标题。具体代码如下：

TabLayout tabLayout = findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

2.4 监听 TabLayout 滑动事件

为了让 TabLayout 跟随页面的滑动而改变选中状态，需要对 CoordinatorLayout 进行监听。具体代码如下：

coordinatorLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        int totalScrollRange = appBarLayout.getTotalScrollRange();
        tabLayout.setScrollPosition(tabLength - Math.abs(verticalOffset) * tabLength / totalScrollRange, 0, true);
    }
});

3. 完整示例代码

完整的 TabLayout 示例代码，包括布局文件和 Java 代码，如下所示：

3.1 布局文件

// javascriptcn.com code example
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:title="AppBar"
            app:layout_scrollFlags="scroll|enterAlways" />
 
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
 
    </android.support.design.widget.AppBarLayout>
 
</android.support.design.widget.CoordinatorLayout>

3.2 Java 代码

// javascriptcn.com code example
public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private int tabLength = 3;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
        tabLayout = findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
 
        final CoordinatorLayout coordinatorLayout = findViewById(R.id.coordinatorLayout);
        coordinatorLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                int totalScrollRange = appBarLayout.getTotalScrollRange();
                tabLayout.setScrollPosition(tabLength - Math.abs(verticalOffset) * tabLength / totalScrollRange, 0, true);
            }
        });
    }
}

4. 结论

通过使用 CoordinatorLayout 和 AppBarLayout，可以轻松实现 Material Design 风格下的 TabLayout。此方法不仅简单易用，而且效果出众，可以让应用程序更加美观、简洁。如果你还没有尝试过这个方法，不妨试试看吧！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6735e9d70bc820c582512d6d