安卓TabLayout+ViewPager的使用

step1：效果图

step2：3个java类

1.MainActivity
2.MineFragment
3.MyFragmentPagerAdapter

1.

package com.helloworld.tablayoutviewpager;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private MyFragmentPagerAdapter pagerAdapter;

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

        tabLayout = (TabLayout) this.findViewById(R.id.tablayout_lev);
        viewPager = (ViewPager) this.findViewById(R.id.viewpager_lev);
        initView();
    }

    private void initView() {
        //添加标题
        List<String> title = new ArrayList<>();
        //炼气—筑基—开光—胎息—辟谷—金丹—元婴—出窍—分神—合体—大乘—渡劫
        title.add("筑基");
        title.add("开光");
        title.add("元婴");
        title.add("大乘");
        title.add("渡劫");
        //将循环的fragment装进list中
        List<Fragment> fragments = new ArrayList<>();
        //对标题进行循环取
        for (int i = 0, len = title.size(); i < len; i++) {
            //添加标题
            title.add(title.get(i));
            MineFragment frag = new MineFragment();
            Bundle bundle = new Bundle();
            //把title传过去
            bundle.putString("title", title.get(i));
            frag.setArguments(bundle);
            fragments.add(frag);
        }
        //先移除全部。防止重复显示
        tabLayout.removeAllTabs();
        //MODE_FIXED：固定tabs，并同时显示所有的tabs
        //MODE_SCROLLABLE：可滑动
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //有GRAVITY_CENTER 和 GRAVITY_FILL两种效果。顾名思义，一个是居中，另一个是尽可能的填充
        //注意，GRAVITY_FILL需要和MODE_FIXED一起使用才有效果）
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        //添加分割线
        LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
        //SHOW_DIVIDER_NONE:不显示任何 SHOW_DIVIDER_BEGINNING:开始处显示
        //SHOW_DIVIDER_MIDDLE:每一项都分割  SHOW_DIVIDER_END：末尾处显示
        linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.layout_divider_vertical));
        //上下间距(这里的间距是距离四边的)
        linearLayout.setDividerPadding(20);
        //如果在fragmnet里 第一个参数换成  getChildFragmentManager() 、标题数组、 fragment集合
        pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), title, fragments);
        //绑定adapter
        viewPager.setAdapter(pagerAdapter);
        //预加载：在使用ViewPager加Fragment的时候，滑动每个Fragment的时候，都会重新调用onCreate()方法，因为Fragment页面没有被缓存。
        //使用上面的setOffscreenPageLimit() 方法后，可以缓存Fragment页面，避免滑动显示的时候多次调用onCreate方法来进行刷新
        viewPager.setOffscreenPageLimit(title.size());
        //与viewpager相关联（注意放在setAdapter之后）
        tabLayout.setupWithViewPager(viewPager);
    }
}

2.

package com.helloworld.tablayoutviewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class MineFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //找布局
        View view = inflater.inflate(R.layout.layout_fragment, container, false);
        Bundle bundle = getArguments();
        //判断传值是否为null
        if (bundle != null) {
            String title = bundle.getString("title");
            TextView textView = (TextView) view.findViewById(R.id.te);
            //显标题
            textView.setText(title);
        }
        return view;
    }
}

3.

package com.helloworld.tablayoutviewpager;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;

/**
 * fragment的adapter
 * 可以有title与tabLayout一起使用
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<String> title;
    private List<Fragment> fragments;

    public MyFragmentPagerAdapter(FragmentManager fm, List<String> title, List<? extends Fragment> fragments) {
        super(fm);
        this.title = new ArrayList<>();
        this.fragments = new ArrayList<>();
        this.title.addAll(title);
        this.fragments.addAll(fragments);
    }

    public List<String> getTitle() {
        return title;
    }

    public void setTitle(List<String> title) {
        this.title = title;
    }

    public List<Fragment> getFragments() {
        return fragments;
    }

    public void setFragments(List<Fragment> fragments) {
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments == null ? null : fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments == null ? 0 : fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return title != null && title.size() > position ? title.get(position) : super.getPageTitle(position);
    }
}

step3: 2个布局类和drawable

1.activity_main.xml
2.layout_fragment.xml
3.layout_divider_vertical.xml

1.

<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:gravity="center"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout_lev"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#fff"
        app:layout_collapseMode="pin"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabPadding="5dp"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="#333"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#c9c9c9"/>

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

</LinearLayout>

2.

<?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">

    <TextView
        android:id="@+id/te"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="30sp"
        android:textSize="30sp"/>
</LinearLayout>

3.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#c9c9c9"/>
    <size android:width="1dp"/>
</shape>

step4：结束

TabLayout报错的话

Ctrl+Shift+Alt+S 快捷键

compile 'com.android.support:design:26.0.0-alpha1'

这个并不是唯一的，我这个是系统默认的，可以随便网上找个