Android 中基于TabLayout+ViewPager实现标签卡效果

Android 中基于 TabLayout+ViewPager 实现标签卡效果攻略

1. 添加依赖库

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

implementation 'com.google.android.material:material:1.4.0'

2. 布局文件

在布局文件中，使用 TabLayout 和 ViewPager 组件来实现标签卡效果。以下是一个示例布局文件：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android=\"http://schemas.android.com/apk/res/android\"
    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/tabLayout\"
            android:layout_width=\"match_parent\"
            android:layout_height=\"wrap_content\"
            android:background=\"?attr/colorPrimary\"
            android:elevation=\"6dp\"
            android:theme=\"@style/ThemeOverlay.MaterialComponents.Dark.ActionBar\"/>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id=\"@+id/viewPager\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"match_parent\"
        android:layout_marginTop=\"?attr/actionBarSize\"
        app:layout_behavior=\"@string/appbar_scrolling_view_behavior\"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 创建适配器

创建一个适配器类，继承自 FragmentPagerAdapter，用于管理标签卡对应的页面。以下是一个示例适配器类：

public class TabPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    private List<String> titles;

    public TabPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        this.fragments = fragments;
        this.titles = titles;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

4. 初始化 TabLayout 和 ViewPager

在 Activity 或 Fragment 中，初始化 TabLayout 和 ViewPager，并将它们关联起来。以下是一个示例代码：

TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager viewPager = findViewById(R.id.viewPager);

List<Fragment> fragments = new ArrayList<>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());

List<String> titles = new ArrayList<>();
titles.add(\"Tab 1\");
titles.add(\"Tab 2\");
titles.add(\"Tab 3\");

TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager(), fragments, titles);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

示例说明

示例 1: 添加新的标签卡

如果要添加新的标签卡，只需在初始化代码中的 fragments 和 titles 列表中添加对应的 Fragment 和标题即可。

fragments.add(new Fragment4());
titles.add(\"Tab 4\");
adapter.notifyDataSetChanged();

示例 2: 自定义标签卡样式

可以通过修改布局文件中的 TabLayout 组件的属性来自定义标签卡的样式。例如，可以修改 background 属性来改变背景颜色，修改 elevation 属性来改变阴影效果等。

<com.google.android.material.tabs.TabLayout
    android:id=\"@+id/tabLayout\"
    android:layout_width=\"match_parent\"
    android:layout_height=\"wrap_content\"
    android:background=\"#FF0000\"
    android:elevation=\"2dp\"
    android:theme=\"@style/ThemeOverlay.MaterialComponents.Dark.ActionBar\"/>

以上就是使用 TabLayout 和 ViewPager 实现标签卡效果的完整攻略。通过添加新的标签卡和自定义样式，可以进一步扩展和定制该效果。