TabLayout的使用

TabLayout 这个实在Google 2015 年的时候在 Android Support Design 包中包含的之前看过这个控件的使用 但是一直没有机会去用，最近闲的没事想开始积累一些知识所以无意中就使用到了它。下面来看下简单的使用：

以前的时候我相信每个人肯定遇到过顶部菜单栏的问题吧 各种五花八门的解决方案，如下图是我早年坐过的一个项目的功能，之前的实现思路是这样的 先写一个布局的模板 inflate 出来，设置宽高、设置title文字 ，添加到一个Linearlayout布局中，设置点击事件，然后把整个view添加到集合中 循环做单选效果，十分的麻烦而且不能单独的封装，性能又不好 ，不过google出了TabLayout这个控件就统一也简单多了。

对于这个效果的实现就可以几行代码就搞定了：
XML布局：

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>
    <RelativeLayout
        android:id="@+id/relativelayout"
        android:layout_below="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#5bdb2c"
        >

    </RelativeLayout>

顶部一个TabLayout下部一个布局就可以了，不过这里一定要注意：布局的设置不要让下方的布局把TabLayout遮盖住我们可以给下方布局添加android:layout_below否则tablayout就点不动了。。。真是经验和教训啊55555，我们还可以设置：
tabIndicatorColor //指示器的颜色。
tabSelectedTextColor //tab选择之后文字的颜色
tabTextColor //默认的tab文字的颜色
tabMode=”fixed” //可以设置Tab的模式 可滑动还是不可滑动

这个Tablayout 还以可以加入 icon 代码如下：

 tabLayout =(TabLayout)findViewById(R.id.tablayout);
        tabLayout.addTab(tabLayout.newTab().setText("头条").setIcon(R.mipmap.ic_launcher),0);
        tabLayout.addTab(tabLayout.newTab().setText("精选").setIcon(R.mipmap.ic_launcher),1);
        tabLayout.addTab(tabLayout.newTab().setText("娱乐").setIcon(R.mipmap.ic_launcher),2);
        tabLayout.addTab(tabLayout.newTab().setText("体育").setIcon(R.mipmap.ic_launcher),3);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i("TAG","onTabSelected Posion:--->"+tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.i("TAG","onTabUnselected Posion:--->"+tab.getPosition());

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.i("TAG","onTabReselected Posion:--->"+tab.getPosition());

            }
        });

addOnTabSelectedListener就不说了一看就知道干啥用的

运行效果图：

如果你想让图片在文字的左边 那么得自定义下layout了

        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),0);
        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),1);
        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),2);
        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),3);

但是大多数我们一般都配合Fragment一起使用 代码如下：

        tabLayout =(TabLayout)findViewById(R.id.tablayout);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),0);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),1);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),2);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),3);
        ViewPager   viewPager=(ViewPager)findViewById(R.id.viewpage);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);

哎呀~我们发现title明明设置了怎么会不见了呢

然后我们去源码中寻找原因 tab与viewpage 唯一关联的一句代码是 tabLayout.setupWithViewPager(viewPager);当我们找到这个方法的时候：

 private void populateFromPagerAdapter() {
        removeAllTabs();

        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

            // Make sure we reflect the currently set ViewPager item
            if (mViewPager != null && adapterCount > 0) {
                final int curItem = mViewPager.getCurrentItem();
                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                    selectTab(getTabAt(curItem));
                }
            }
        }
    }

removeAllTabs(); 看到了源码 把我们添加的tab去全部移除了，又重新创建了新的tab
for (int i = 0; i < adapterCount; i++) {
addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
}
有点无语但是好歹把原因找到了，有问题就有解决问题的方法， 可以在tabLayout.setupWithViewPager（）之后重新设置它的tab这里要注意一点的是
tabLayout.getChildCount() 和tabLayout.getTabCount()

       int  count= tabLayout.getTabCount();
        Log.i("TAG",count+"---count->");
        for (int i=0;i<count;i++){
            TabLayout.Tab tab=tabLayout.getTabAt(i);
            tab.setText("窗前"+i);
            Log.i("TAG",i+"---->");
            tab.setIcon(R.mipmap.ic_launcher);
        }

效果图

以下是完整的代码

package view.custom.yyr.com.viewpageindicator;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import java.util.ArrayList;

public class TabLayoutUse extends AppCompatActivity {
    TabLayout  tabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_use);
        tabLayout =(TabLayout)findViewById(R.id.tablayout);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),0);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),1);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),2);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),3);
        ViewPager   viewPager=(ViewPager)findViewById(R.id.viewpage);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);
       int  count= tabLayout.getTabCount();
        Log.i("TAG",count+"---count->");
        for (int i=0;i<count;i++){
            TabLayout.Tab tab=tabLayout.getTabAt(i);
            tab.setText("窗前"+i);
            Log.i("TAG",i+"---->");
            tab.setIcon(R.mipmap.ic_launcher);
        }
    }

    class  MyFragmentPagerAdapter  extends FragmentPagerAdapter {
//        ArrayList<String> mTextList = new ArrayList<String>();
        ArrayList<Fragment> mFragmentsList =new ArrayList<Fragment>();

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
            initDatas();
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentsList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentsList.size();
        }
        //        @Override
//        public CharSequence getPageTitle(int position) {
//            return mTextList.get(position);//页卡标题
//        }
        private void initDatas() {
            for(int i=0;i<4;i++) {
//                mTextList.add("测试--->" + i);
                Fragment  fragment=SimpleFragment.newInstance("Fragmnet" + i);
                mFragmentsList.add(fragment);
            }
        }
    };
}