(TabLayout)Fragment 页面,标题和小滑块切换

TabLayout是design库提供的控件,可以方便的使用指示器,功能类似ViewPagerIndicator. 

Fragment 页面标题和小滑块切换效果：

(必须先下载一个依赖包： design )

直接上代码：

public class DiscoverFragment extends Fragment{

    TabLayout  tabLayout;
    ViewPager viewPager;
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return  inflater.inflate(R.layout.fragment_discover,null);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {

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

 //对viewPager进行监听，得到小滑块要放置的位置（互相监听）
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
               tabLayout.getTabAt(position).select();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

//设置标题栏项目
        tabLayout.addTab(tabLayout.newTab().setText("推荐"));
        tabLayout.addTab(tabLayout.newTab().setText("分类"));
        tabLayout.addTab(tabLayout.newTab().setText("电台"));
        tabLayout.addTab(tabLayout.newTab().setText("主播"));

    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        List<Fragment>fragmentList=new ArrayList<>();
        fragmentList.add(new RecommendFragment());
        fragmentList.add(new TypeFragment());
        fragmentList.add(new RadioFragment());
        fragmentList.add(new AuthorFragment());

        //fragmen嵌套fragment用getChildfragmrntManager
        CommAdapter pageradapter=new CommAdapter(getChildFragmentManager(),fragmentList);
        viewPager.setAdapter(pageradapter);

//对小滑块的监听，得到标题当前应在的位置（互相监听）
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

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

            }

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

            }
        });
    }
}

//布局

<!--导航Tab-->
<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:id="@+id/discover_t1"
    app:tabSelectedTextColor="@color/public_red"
    app:tabTextColor="@color/public_gray"
    android:layout_height="wrap_content">

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

</android.support.v4.view.ViewPager>