使用TabLayout 实现顶部选项卡功能

Demo下载连接 ：点击打开链接

TabLayout  是谷歌在2015年I/O大会中提出的 很方便的实现顶部选项卡功能  文档中的描述：

Population of the tabs to display is done through TabLayout.Tab instances. You create tabs via newTab(). From there you can change the tab's label or icon via setText(int) and setIcon(int) respectively. To display the tab, you need to add it to the layout via one of the addTab(Tab) methods. For example: TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

简单就是说选项卡是通过Tablayout实现的 通过newTab创建每一个tab 可以通过setText()和setIcon分别设置文本和icon 最后通过addTab将newTab处的选项卡添加上去 即可 但是这个是单一的选项卡使用 一般使用选项卡我们都是和viewpager相结合使用的  谷歌文档中也告诉了我们的实现方法：

You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab's selection state has been changed.If you're using a ViewPager together with this layout, you can use setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs using the given PagerAdapter's page titles. You should also use a TabLayout.TabLayoutOnPageChangeListener to forward the scroll and selection changes to this layout like so: ViewPager viewPager = ...; TabLayout tabLayout = ...; viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout));

通过设置setOnTabSelectedListener(OnTabSelectedListener)去监听tab的切换事件 如果使用viewpager和TabLayout相结合的话 要设置Tablayout的setTabsFromPagerAdapter(PagerAdapter)的方法 并且将viewpagerAdapter传入 这个viewpagerAdapter中需要返回title 即要实现getPagerTitle()方法 同时也需要设置TabLayout.TabLayoutOnPageChangeListener 去监听viewpager的左右滑动事件 

综合上述文档我们可以轻松的实现一个简单的TabLayout的Demo

public class NewsViewPagerFragment extends Fragment {    private View inflate;    private TabLayout tabLayout;    private ViewPager vp;    public static String[] names = {"第一个标签", "第二个标签", "第三个标签"};    public static int[] layouts = {R.layout.explore, R.layout.hot, R.layout.account};    private MyAdapter myAdapter;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        inflate = inflater.inflate(R.layout.blog, null);        tabLayout = (TabLayout) inflate.findViewById(R.id.tab_layout);        vp = (ViewPager) inflate.findViewById(R.id.viewpager);        myAdapter = new MyAdapter();        tabLayout.setTabsFromPagerAdapter(myAdapter);        vp.setAdapter(myAdapter);        vp.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));        tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.blue)); //设置线的颜色        tabLayout.setTabTextColors(getResources().getColor(R.color.yellow), getResources().getColor(R.color.blue)); //设置文本的颜色        return inflate;    }    @Override    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {  //tab被选中是触发                int position = tab.getPosition();                vp.setCurrentItem(position);            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }    class MyAdapter extends PagerAdapter {        @Override        public int getCount() {            return layouts.length;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public CharSequence getPageTitle(int position) {            return names[position];        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            View inflate = View.inflate(getActivity(), layouts[position], null);            container.addView(inflate);            return inflate;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }

布局文件 

<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:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="56dp"        android:background="#f0f0f0"        app:tabMode="fixed">    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </android.support.v4.view.ViewPager></LinearLayout>

可以下载实例代码看下 

点击打开链接