在xml文件中,书写TabLayout和ViewPager标签

    <!-- 和viewpager 结合的标签 -->
    <android.support.design.widget.TabLayout
        android:id="@+id/home_tab_"
        app:tabBackground="@android:color/transparent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        app:tabMode="scrollable"
        app:tabIndicatorHeight="3dp"
        app:tabIndicatorColor="@color/pink"
        app:tabSelectedTextColor="@color/pink"
        app:tabTextColor="#000"
        ></android.support.design.widget.TabLayout>

    <!-- 首页主内容区域 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/home_vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

ViewPager的适配器

/**
     * 首页frag布局的适配器,
     */
    class MyHomeVpContentAdapter extends FragmentStatePagerAdapter {

        public MyHomeVpContentAdapter(FragmentManager fm) {
            super(fm);
        }
//          用来设置tablayout的标签名
        @Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case HOME_POS:
                    return mHomeTabFragment;
                case LIVE_POS:
                    return mLiveFragment;
                case FOLLOW_POS:
                    return mFollowFragment;
                case OTHER_POS:
                    return mOtherFragment;
            }
            throw new IllegalStateException("No fragment at position " + position);
        }

        @Override
        public int getCount() {
            return tabs.length;
        }
    }

//         viewpager 和 tablayout的结合
        //初始化 viewpager的 adapter
        MyHomeVpContentAdapter myHomeVpContentAdapter = new MyHomeVpContentAdapter(getFragmentManager());
        //设置为加载一个
        viewpager.setOffscreenPageLimit(1);
        viewpager.setAdapter(myHomeVpContentAdapter);
        //tablayout 绑定 viewpager
        tablayout.setupWithViewPager(viewpager);
        

新建Fragment

参考我的另一篇博客.
Activity,Fragment的基类封装,简化findViewById,Fragment懒加载和不重复加载等