如何使用带有底部导航和viewpager的tablayout？

<android.support.design.widget.CoordinatorLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

ViewPager viewPager = findViewById(R.id.viewPager);
TabLayout tabLayout = findViewById(R.id.tabLayout);

PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

public class PagerAdapter extends FragmentPagerAdapter {
    private static final int NUM_PAGES = 3;

    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}

public class Fragment1 extends Fragment {
    // 实现Fragment1的布局和逻辑
}

public class Fragment2 extends Fragment {
    // 实现Fragment2的布局和逻辑
}

public class Fragment3 extends Fragment {
    // 实现Fragment3的布局和逻辑
}