TabLayout

转载自http://blog.csdn.net/feiduclear_up/article/details/46500865

Tabs选项卡，效果类似网易新闻客户端的Tab。其实实现Tabs选项卡的效果有很多中方法，Github上也有很多好

用的开源控件，只是这次谷歌把它官方化了，使得开发者无需引用第三方库，就能方便的使用。效果图：

XML布局如下：

 <android.support.design.widget.TabLayout        android:id="@+id/tabs"    <!--Tab被选中字体的颜色-->        app:tabSelectedTextColor="@android:color/holo_blue_bright"    <!--Tab未被选中字体的颜色-->        app:tabTextColor="@android:color/black"    <!--Tab指示器下标的颜色-->        app:tabIndicatorColor="@android:color/holo_blue_bright"        android:layout_width="match_parent"        android:layout_height="wrap_content" />

常用的属性有三个：

1. app:tabSelectedTextColor：Tab被选中字体的颜色
2. app:tabTextColor：Tab未被选中字体的颜色
3. app:tabIndicatorColor：Tab指示器下标的颜色

TabLayout常用的方法如下： 
- addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中 
- addTab(TabLayout.Tab tab, boolean setSelected) 同上 
- addTab(TabLayout.Tab tab) 同上 
- getTabAt(int index) 得到选项卡 
- getTabCount() 得到选项卡的总个数 
- getTabGravity() 得到 tab 的 Gravity 
- getTabMode() 得到 tab 的模式 
- getTabTextColors() 得到 tab 中文本的颜色 
- newTab() 新建个 tab 
- removeAllTabs() 移除所有的 tab 
- removeTab(TabLayout.Tab tab) 移除指定的 tab 
- removeTabAt(int position) 移除指定位置的 tab 
- setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器 
- setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置 
- setTabGravity(int gravity) 设置 Gravity 
- setTabMode(int mode) 设置 Mode,有两种值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分别表示当tab的内容超过屏幕宽度是否支持横向水平滑动，第一种支持滑动，第二种不支持，默认不支持水平滑动。 
- setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色 
- setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中 
- setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter 
- setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动

一般TabLayout都是和ViewPager共同使用才发挥它的优势，现在我们通过代码来看看以上方法的使用。

viewPager = findView(R.id.viewPager);        tabLayout = findView(R.id.tabs);        List<String> tabList = new ArrayList<>();        tabList.add("Tab1");        tabList.add("Tab2");        tabList.add("Tab3");        tabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(0)));//添加tab选项卡        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(1)));        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(2)));        List<Fragment> fragmentList = new ArrayList<>();        for (int i = 0; i < tabList.size(); i++) {            Fragment f1 = new TabFragment();            Bundle bundle = new Bundle();            bundle.putString("content", "http://blog.csdn.net/feiduclear_up \n CSDN 废墟的树");            f1.setArguments(bundle);            fragmentList.add(f1);        }        TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragmentList, tabList);        viewPager.setAdapter(fragmentAdapter);//给ViewPager设置适配器        tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。        tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器

就不解释了，都有注释，来看看以上代码的TabFragmentAdapter和TabFragment实现如下：

TabFragmentAdapter

public class TabFragmentAdapter extends FragmentStatePagerAdapter {    private List<Fragment> mFragments;    private List<String> mTitles;    public TabFragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {        super(fm);        mFragments = fragments;        mTitles = titles;    }    @Override    public Fragment getItem(int position) {        return mFragments.get(position);    }    @Override    public int getCount() {        return mFragments.size();    }    @Override    public CharSequence getPageTitle(int position) {        return mTitles.get(position);    }}

<span style="white-space: nowrap; font-family: "microsoft yahei"; background-color: rgb(255, 255, 255);">TabFragment</span>

<span style="white-space: nowrap; font-family: "microsoft yahei"; background-color: rgb(255, 255, 255);"></span><pre name="code" class="java">public class TabFragment extends Fragment {    private String content;    private View view;    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(R.layout.item, container,false);        return view;    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        content = getArguments().getString("content");        TextView tvContent = (TextView) view.findViewById(R.id.tv_tab_content);        tvContent.setText(content + "");    }}

<span style="white-space: nowrap; font-family: "microsoft yahei"; background-color: rgb(255, 255, 255);">注意</span><span style="white-space: nowrap; font-family: "microsoft yahei"; background-color: rgb(255, 255, 255);"> ：有这么一种情况，当Tabs中的内容超过了手机屏幕的宽度时，Tabs选项卡中的tab为什么不支持水平滑动？其实TabLayout是支持水平滑动的，只需要你在代码中添加如下一行即可：</span>

<span style="white-space: nowrap; font-family: "microsoft yahei"; background-color: rgb(255, 255, 255);"></span><pre name="code" class="java">tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置tab模式