一、效果展示

中间部分可滑动切换

二、布局

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".first_home.horizontal_menus.water_quality_management.ManagementActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:background="#328BBA"
        >
        <ImageView
            android:id="@+id/back"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:padding="11dp"
            android:src="@mipmap/fanhui2"
            android:gravity="center"
            android:textColor="@color/black"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="水质管理"
            android:textSize="20sp"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:textColor="@color/white"
            />
    </LinearLayout>


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="3dp"
        app:tabIndicatorColor="#328BBA"
        app:tabSelectedTextColor="#328BBA"
        app:tabTextColor="@color/black"
        app:tabIndicatorHeight="5dp"
        app:tabMode="fixed"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="115dp"/>

</LinearLayout>

三、创建需要的子fragment

三个feagment布局都一样，都只有一个TextView，下面只给出一个例子

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".first_home.horizontal_menus.water_quality_management.ZhiBiaoFragment">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="水质各项指标页面" />

</FrameLayout>

package com.example.crab_breeding.first_home.horizontal_menus.water_quality_management;

import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.crab_breeding.R;

/**
 * 水质各项指标含义说明页面
 */
public class ZhiBiaoFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_zhibiao, container, false);
        return view;
    }
}

四、activity代码中实现功能

package com.example.crab_breeding.first_home.horizontal_menus.water_quality_management;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

import com.example.crab_breeding.R;
import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

public class ManagementActivity extends AppCompatActivity {

    private ImageView back;//返回键
    private ViewPager viewPager;//中间显示内容
    private TabLayout tabLayout;//顶部导航

    private List<String> titles = new ArrayList<>();//放标题
    private List<Fragment> fragments = new ArrayList<>();//放fragment

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_management);
        //影藏自带标题栏
        ActionBar actionBar=getSupportActionBar();
        if (actionBar!=null){
            actionBar.hide();
        }
        //初始化控件
        init();
    }

    private void init(){
        tabLayout=findViewById(R.id.tab_layout);
        viewPager=findViewById(R.id.view_pager);
        back=findViewById(R.id.back);

        fragments.add(new ZhiBiaoFragment());
        fragments.add(new YaoQiuFragment());
        fragments.add(new WenTiFragment());
        titles.add("指标含义");
        titles.add("水质要求");
        titles.add("常见问题");
        //添加tab标签
        for (int i=0;i<titles.size();i++){
            tabLayout.addTab(tabLayout.newTab().setText(titles.get(i)));
        }
        //添加设置适配器
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
        //把TabLayout与ViewPager关联起来
        tabLayout.setupWithViewPager(viewPager);

        //返回按钮
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
    }
    //自定义适配器
    class ViewPagerAdapter extends FragmentStatePagerAdapter{
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        
        @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);
        }
    }
}

五、完成，nice！