使用Desgin包组件 TabLayout助你轻松打造网易搜狐顶部导航栏

谷歌最近推出的Android Design Support Library给我们带来了许多强大的组件，TabLayout 便是其中之一。 TabLayout控件是用来干嘛的呢？从字面上来看，应该是属于选项卡切换的一类控件吧。带着这个疑问，小编特地查询了一下谷歌的开发博客，看到了TabLayout 的使用简介如下图所示。

看到此图不禁让我们想起了github上面JakeWharton大牛开源的组件ViewPagerIndicator

我们知道使用ViewPagerIndicator组件的TabPageIndicator是可以轻松实现出网易，搜狐顶部导航栏的效果的。

那么问题来了，我们是否可以使用TabLayout 来实现此效果呢？这在小编就不卖关子了，答案是必须的！！而且让人欣喜的是使用TabLayout 更加简单，让我们摆脱了众多第三方组件的依赖，回归于正统！这里不得不为谷歌的工程师们大大的点一个赞，你们又给我们众多的开发者带来了惊喜！
好了,题外话叨了这么多，我们就来学习如何使用TabLayout 组件吧，并且我们使用TabLayout 组件来轻松实现网易，搜狐顶部导航栏的效果。
如何使用该组件来实现呢？
1：首先我们需要加入Degsin的依赖包（这里使用的Android Studio开发）：

compile 'com.android.support:design:22.2.0'

2：编写布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    android:orientation="vertical">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        >        <ImageView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:paddingTop="10dp"            android:paddingBottom="10dp"            android:paddingRight="5dp"            android:src="@drawable/icotitlebar_sohu_v5"             />        <android.support.design.widget.TabLayout            android:id="@+id/tabLayout"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="5"            android:scrollbars="none"            app:tabIndicatorColor="@android:color/holo_red_dark"            app:tabIndicatorHeight="2dp"            app:tabPaddingTop="0dp"            app:tabPaddingBottom="0dp"            app:tabMode="scrollable"            app:tabSelectedTextColor="@android:color/holo_red_dark" />        <ImageView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:padding="10dp"            android:paddingRight="5dp"            android:paddingLeft="5dp"            android:src="@drawable/icotitlebar_personal_v5"            />    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout>

在这里要说明一下TabLayout 里面的属性：

-

app:tabIndicatorHeight=”2dp”
app:tabPaddingTop=”0dp”
app:tabPaddingBottom=”0dp”
app:tabMode=”scrollable”，

郁闷的是在官方文档上面并没有这几个属性的描述

但是却有setTabMode(int mode)方法。所以查看源码却发现了该属性(不光要学控件的使用，还要学习谷歌大牛如何开发控件，另外TabLayout 和TabPageIndicator都是扩展自HorizontalScrollView有兴趣的朋友可以看一源码对比一下二者实现的异同)：

从该源码来看，可以清楚的知道
tabIndicatorHeight用来设置底部指示器的高度
tabIndicatorColor用来设置底部指示器的颜色
tabMode用来设置TabLayout的布局模式有两个参数
MODE_FIXED：固定不可滚动
MODE_SCROLLABLE: 可滚动的。
还有不少属性请各位自行查看源码这里就不再一一列举。
这里我们的新闻导航是很多个的。所以则使用scrollable，可滚动。这里各位可以使用fixed试一下当Tab的个数很多会是什么效果？
3：Activity代核心码如下：

 //初始化TabLayout        mTagLayout = (TabLayout) findViewById(R.id.tabLayout);        mTitles=getResources().getStringArray(R.array.news_tags);        //根据新闻标题添加Tab        for (int i = 0; i <mTitles.length; i++) {            mTagLayout.addTab(mTagLayout.newTab().setText(mTitles[i]));        }        //实例化ViewPager        mViewPager = (ViewPager)findViewById(R.id.viewpager);        adapter = new MyPagerAdapter(getSupportFragmentManager(), mTitles);        mViewPager.setAdapter(adapter);        //给ViewPager添加监听(这里我们直接使用TabLayout里面提供的TabLayoutOnPageChangeListener无需自己再编写)        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTagLayout));        //设置setOnTabSelectedListener        mTagLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                //切换到指定的item                mViewPager.setCurrentItem(tab.getPosition());            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }    /**     * 自定义一个PagerAdapter     */    class MyPagerAdapter extends FragmentPagerAdapter {        String[] newsTags = null;        public MyPagerAdapter(FragmentManager fm, String[] newsTags) {            super(fm);            this.newsTags = newsTags;        }        @Override        public Fragment getItem(int position) {            Fragment fg=new NewsFragment();            Bundle bundle=new Bundle();            //实例化新闻Fragment            bundle.putString(NewsFragment.NEWS_KEY,newsTags[position]);            fg.setArguments(bundle);            return fg;        }        @Override        public int getCount() {            return (newsTags != null) ? newsTags.length : 0;        }    }

NewFragment较为简单这里不再贴出。到此一个类似网易，搜狐的顶部导航栏就制作完毕了效果图如下:

最后我们总结一下TabLayout组件的使用：
newTab()方法用来实例化一个Tab
removeAllTabs()删除所有的Tab
removeTab(TabLayout.Tab tab) 删除指定的Tab
removeTabAt(int position)删除指定的Tab
setTabMode(int mode)设置TabLayout的模式

Interface :TabLayout.OnTabSelectedListener：监听Tab选中的事件
Class : TabLayout.TabLayoutOnPageChangeListener：配合Viewpager使用的PageChangeListener用来切换Tab。这里TabLayout已经帮我实现好了。

到此TabLayout组件讲解就完毕了。后续我会继续讲解Desgin包中的新组件。在这里附上源码一份！如有不当之处请各位多多指正！