TabLayout+ViewPager+Fragment实现页面滑动

①在main布局创建TabLayout与ViewPager；②在main的Java代码中找到TabLayout与ViewPager空间，并创建标题title与内容fragment；③将title与fragment赋值给ViewPager，并将TabLayout与ViewPager建立联系；④自定义fragment，用if进行判断，滑动到相应的界面

项目具体代码加详细解释：

MainActivity:

package com.example.appbase;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {
    
    

    ViewPager mView;//选项对应的页面
    TabLayout myTab;//选项
    List<String> mtitle;//选项标题（即选项一等）
    List<Fragment> fragment;//选项内容

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

        //先找到相对应的控件
        myTab = findViewById(R.id.myTab);
        mView=findViewById(R.id.myView);
        mView.setOffscreenPageLimit(2);//预加载
//        myTab.addTab(myTab.newTab().setText("选项卡一").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡二").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡三").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡四").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡五").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡六").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡七").setIcon(R.drawable.ic_launcher_background));
//        myTab.addTab(myTab.newTab().setText("选项卡八").setIcon(R.drawable.ic_launcher_background));

        //创建标题
        mtitle = new ArrayList<>();
        mtitle.add("选项卡一");
        mtitle.add("选项卡二");
        mtitle.add("选项卡三");

        //创建选项内容，且自定义每个选项所对应的页面
        fragment = new ArrayList<>();
        fragment.add(new MyFragment(R.layout.item_01));
        fragment.add(new MyFragment(R.layout.item_02));
        fragment.add(new MyFragment(R.layout.item_03));

        //将标题和内容赋值到相应的页面中
        mView.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
    
    
            @Override
            public Fragment getItem(int i) {
    
    
                return fragment.get(i);//获取第i个内容
            }

            @Override
            public int getCount() {
    
    
                return fragment.size();//获取总的内容的大小
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
    
    
                return mtitle.get(position);//获取标题
            }
        });

        myTab.setupWithViewPager(mView);//将选项与页面建立联系，很重要的一步
    }


}

MyFragment(Java):

package com.example.appbase;


import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment extends Fragment {
    
    

    private int layout;
    private View mView;

    @SuppressLint("ValidFragment")
    public MyFragment (int layout){
    
    
        this.layout=layout;//自定义构造函数获取页面布局
    }

    public MyFragment(){
    
    

    }


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    
    

        //不同的选项对应不同的页面，即页面滑动
        if(layout==R.layout.item_01){
    
    
            mView = inflater.inflate(R.layout.item_01,container,false);
        }
        else if(layout==R.layout.item_02){
    
    
            mView = inflater.inflate(R.layout.item_02,container,false);
        }
        else if(layout==R.layout.item_03){
    
    
            mView = inflater.inflate(R.layout.item_03,container,false);
        }
        return mView;
    }
}

activity_main:

<?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="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        //选项，根据需要，选项可放在页面上面或下面
        <android.support.design.widget.TabLayout
            android:id="@+id/myTab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="#ffffff"
            >
        </android.support.design.widget.TabLayout>

        //页面
        <android.support.v4.view.ViewPager
            android:id="@+id/myView"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="0dp">
        </android.support.v4.view.ViewPager>

    </LinearLayout>
</LinearLayout>

item_01(02、03类似):

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第一个"
        android:textSize="50dp"
        android:gravity="center"
        />

</LinearLayout>