//////主頁面//////
package com.list.viewpager;

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

import com.list.viewpager.adapter.MyAdapter;
import com.list.viewpager.frag.Frag1;
import com.list.viewpager.frag.Frag2;
import com.list.viewpager.frag.Frag3;
import com.list.viewpager.frag.Frag4;

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

public class MainActivity extends AppCompatActivity {
private TabLayout tab;
private ViewPager viewpager;
private List tabs = new ArrayList<>();
private List fragments = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //初始化控制元件
    tab = findViewById(R.id.tab);
    viewpager = findViewById(R.id.viewpager);
    //頭部切換滑動
    //頭部的頁卡資料
    tabs.add("tab1");
    tabs.add("tab2");
    tabs.add("tab3");
    tabs.add("tab4");
    //設定樣式
    tab.setTabMode(TabLayout.MODE_FIXED);//預設樣式
    //新增資料
    tab.addTab(tab.newTab().setText(tabs.get(0)));
    tab.addTab(tab.newTab().setText(tabs.get(1)));
    tab.addTab(tab.newTab().setText(tabs.get(2)));
    tab.addTab(tab.newTab().setText(tabs.get(3)));
    //viewpager資料
    fragments.add(new Frag1());
    fragments.add(new Frag2());
    fragments.add(new Frag3());
    fragments.add(new Frag4());
    //介面卡
    MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(), fragments, tabs);
    viewpager.setAdapter(myAdapter);
    //關聯TabLayout和ViewPager
    tab.setupWithViewPager(viewpager);
}
 

}

/////////////Fragment類–例子–/////////////
package com.list.viewpager.frag;

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;
import android.view.ViewParent;

import com.list.viewpager.R;

public class Frag1 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag1, container, false);
ViewGroup parent = (ViewGroup) view.getParent();
if (parent != null) {
parent.removeView(view);
}
return view;
}
}

///////////////介面卡///////////////
package com.list.viewpager.adapter;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v7.app.ActionBar;

import java.util.List;

public class MyAdapter extends FragmentPagerAdapter {
List fragments;
List tabs;

public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> tabs) {
    super(fm);
    this.fragments = fragments;
    this.tabs = tabs;
}

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

@Override
public int getCount() {
    return fragments.size();
}
//展示頁面

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

}
/////////主頁面佈局////////

<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="50dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>