TabLayout 和 ViewPager的简单使用

效果：

官网地址 TabLayout

build.gradle 加入（如果编译版本有误，根据提示修改）

implementation 'com.android.support:design:27.1.0'

TabFragment.java

public class TabFragment extends Fragment {  // v4 包
    private String mTitle;

    public void setTitle(String title) {
        this.mTitle = title;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,30);
        textView.setGravity(Gravity.CENTER);
        textView.setText(mTitle);
        return textView;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        app:tabGravity="fill"
        android:id="@+id/TabLayout"
        android:layout_gravity="bottom"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

    </android.support.design.widget.TabLayout>

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

MainActivity.java

	public class MainActivity extends AppCompatActivity {
    ViewPager mViewPager;
    TabLayout TabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mViewPager = findViewById(R.id.vp_pager);
        TabLayout = findViewById(R.id.TabLayout);
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
//            设置 viewPager的标题
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return "标题"+position;
            }

            //创建 Fragment并返回
            @Override
            public Fragment getItem(int position) {
                TabFragment fragment = new TabFragment();
                fragment.setTitle("文本内容"+position);
                return fragment;
            }
            // 返回 item 的数量
            @Override
            public int getCount() {
                return 3;
            }
        });
//        tabLayout 与 viewPager 关联
        TabLayout.setupWithViewPager(mViewPager);

        TabLayout.getTabAt(0).setIcon(R.drawable.ic_launcher_round);
        TabLayout.getTabAt(1).setIcon(R.drawable.ic_launcher_round);
        TabLayout.getTabAt(2).setIcon(R.drawable.ic_launcher_round);
        TabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
//                需要重新指定 viewPager 的显示 item
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

}

总结

1. TabLayout 与 ViewPager 关联使用

TabLayout.setupWithViewPager(mViewPager);

2. 设置TabLayout的监听事件，需要重新设置ViewPager的显示item，因为 viewPager 内部也有一个监听，导致冲突，所以需要重新制定。