如何实现带返回按钮的可滑动Tabs（含标题）及CardView布局？

没问题，我来一步步教你实现这个需求——带滑动标题、返回按钮，并且用CardView展示Tab内容的Swipable Tabs Activity。咱们从基础配置开始：

1. 配置必要依赖 #

首先得在你的build.gradle(Module level)里添加所需组件的依赖：

...
dependencies {
    // ViewPager2 用于页面滑动
    implementation "androidx.viewpager2:viewpager2:1.0.0"
    // Material组件（包含TabLayout）
    implementation "com.google.android.material:material:1.9.0"
    // CardView 用于卡片式布局
    implementation "androidx.cardview:cardview:1.0.0"
}

2. 编写主Activity布局 #

创建activity_main.xml，布局包含Toolbar（带返回按钮）、可滑动的TabLayout和ViewPager2：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 自定义Toolbar，后续设置返回按钮 -->
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="滑动标签示例" />

    <!-- 可滑动的TabLayout：tabMode="scrollable" 开启滑动模式 -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="fill" />

    <!-- ViewPager2 承载各个Tab的内容页面 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

3. 创建Tab内容的Fragment布局（带CardView） #

每个Tab的内容用CardView包裹，创建fragment_tab_content.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    app:cardCornerRadius="8dp" <!-- 卡片圆角 -->
    app:cardElevation="4dp"> <!-- 卡片阴影 -->

    <!-- 这里可以替换成你需要的内容，比如列表、图片等 -->
    <TextView
        android:id="@+id/tab_content_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp" />

</androidx.cardview.widget.CardView>

4. 实现Tab内容的Fragment类 #

创建TabContentFragment.java，用于复用每个Tab的内容页面：

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class TabContentFragment extends Fragment {
    private static final String ARG_TAB_TITLE = "tab_title";
    private String tabTitle;

    // 静态方法创建Fragment实例，传递Tab标题参数
    public static TabContentFragment newInstance(String tabTitle) {
        TabContentFragment fragment = new TabContentFragment();
        Bundle args = new Bundle();
        args.putString(ARG_TAB_TITLE, tabTitle);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            tabTitle = getArguments().getString(ARG_TAB_TITLE);
        }
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab_content, container, false);
        TextView contentText = view.findViewById(R.id.tab_content_text);
        contentText.setText(tabTitle + " 的内容区域");
        return view;
    }
}

5. 实现ViewPager2的适配器 #

创建ViewPagerAdapter.java，负责管理Fragment和Tab标题：

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.Arrays;
import java.util.List;

public class ViewPagerAdapter extends FragmentStateAdapter {
    // 这里定义所有Tab的标题
    private final List<String> tabTitles = Arrays.asList("首页", "发现", "消息", "我的", "设置");

    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        // 根据位置创建对应的Fragment
        return TabContentFragment.newInstance(tabTitles.get(position));
    }

    @Override
    public int getItemCount() {
        return tabTitles.size();
    }

    // 提供Tab标题给TabLayout
    public String getTabTitle(int position) {
        return tabTitles.get(position);
    }
}

6. 主Activity逻辑实现（关联组件+返回按钮） #

修改MainActivity.java，完成Toolbar返回按钮设置、TabLayout与ViewPager2的关联：

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager2 viewPager;

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

        // 配置Toolbar，显示返回按钮
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }

        // 初始化TabLayout和ViewPager2
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);

        // 设置适配器
        ViewPagerAdapter adapter = new ViewPagerAdapter(this);
        viewPager.setAdapter(adapter);

        // 关联TabLayout和ViewPager2，实现标题与页面的联动
        new TabLayoutMediator(tabLayout, viewPager,
                (tab, position) -> tab.setText(adapter.getTabTitle(position))
        ).attach();
    }

    // 处理返回按钮点击事件
    @Override
    public boolean onSupportNavigateUp() {
        onBackPressed();
        return true;
    }
}

一些额外的优化建议 #

• 如果你的标签数量较少，可以把TabLayout的tabMode改成fixed，标签会自动平分宽度
• 可以自定义Tab的样式（比如添加图标），通过TabLayout.Tab.setCustomView()实现
• CardView的样式可以根据需求调整cardBackgroundColor、cardMaxElevation等属性
• 若需要禁止某个方向的滑动，可以调用viewPager.setUserInputEnabled(false)

内容的提问来源于stack exchange，提问作者Mr UUUA