从TabLayout源码告诉你使用它的正确姿势

sunrui9521 8年前
   <p>前言:以前总是觉得tablayout使用特别麻烦,所以一直选择第三方库,都不用它,仔细研究发现我们都错过了它,看完这篇让你爱上它,使用非常简单</p>    <ul>     <li> <p>布局文件</p> <pre>  <code class="language-java"><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" /></code></pre>      <ul>       <li>常用的属性有三个: <pre>  <code class="language-java">app:tabSelectedTextColor:Tab被选中字体的颜色  app:tabTextColor:Tab未被选中字体的颜色  app:tabIndicatorColor:Tab指示器下标的颜色</code></pre> </li>       <li>TabLayout常用的方法如下: <pre>  <code class="language-java">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 联动</code></pre> </li>      </ul> </li>     <li>代码中,使用只需要四步,非常简单:      <ol>       <li>找到控件<br> tabLayout = (TabLayout)findViewById(R.id.tabs);</li>       <li>设置模式(当然这步是可以放到布局文件中的)<br> tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置tab模式,MODE_FIXED是固定的,不能超出屏幕,MODE_SCROLLABLE可超出屏幕范围滚动的</li>       <li>关联viewpager<br> tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。</li>       <li>为tab设置适配器<br> tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器</li>      </ol> </li>     <li> <p>到此就完了,可能很多人就要说我这个有问题呀,都没设置tablayout中的tab,网上大多数的dome是这样的:</p> <pre>  <code class="language-java">tabLayout = (TabLayout)findViewById(R.id.tabs);        //设置tab模式,MODE_FIXED是固定的,MODE_SCROLLABLE可超出屏幕范围滚动的        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        //网上很多dome都是在这里把tab添加到tablayout中的,但实际上这是多余的        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)));        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(3)));        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(4)));        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(5)));          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://www.jianshu.com/users/2229fd214880/latest_articles");            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设置适配器</code></pre> <p>但实际上是多余的,其实只要为tab设置了适配器就已经完成了这一步了,下面就来看看源码吧</p> <pre>  <code class="language-java">//这里我只提出来了一些重要的代码块  /**       *为tab设置适配器               */    @Deprecated    public void setTabsFromPagerAdapter(@Nullable final PagerAdapter adapter) {        setPagerAdapter(adapter, false);    }    void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {        .        .        .          // Finally make sure we reflect the new adapter        populateFromPagerAdapter();    }    void populateFromPagerAdapter() {        removeAllTabs();//清除所有的tab,所以你如果在设置适配器之前addTab就是多余的了    //这里在一次从adapter中getPageTitle添加到tab        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));                }            }        }    }</code></pre> </li>     <li>不过可能有认是跟我的步骤一步步敲下来的但是却发现,麻痹,出现的效果是这样的</li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8ef0e88d4911235b085e271c792f9191.gif"></p>    <p style="text-align:center">错误示范</p>    <p>那是因为少了一步重要的步骤,重写TabFragmentAdapter中的getPageTitle方法</p>    <p><em>说到这里很多人可能会说,你如果之前在代码中使用addTab方法把tab添加进去就不会出现这个问题了吧,残忍的告诉你还是这样的,原因,我已经在解析源码的时候告诉大家了,就是因为你再一次调用为tablayout设置适配器的时候,tablayout做了一次清空tab的处理</em></p>    <p><em>可能有人又会想那我先给tablayout设置适配器,再去调用addTab方法啥,显示是残酷的,还是不行,效果和上面一样</em></p>    <ul>     <li>所一还是重写TabFragmentAdapter中的getPageTitle方法吧 <pre>  <code class="language-java">@Override    public CharSequence getPageTitle(int position) {        return mTitles.get(position);    }</code></pre> </li>     <li style="text-align:center">效果图<br> <img src="https://simg.open-open.com/show/f942243784fcfa32da646bb272cfb7f6.gif"></li>    </ul>    <p> </p>    <p style="text-align:center">tablayout</p>    <p><strong>接下来贴一下代码</strong></p>    <ul>     <li> <p>TabFragment</p> <pre>  <code class="language-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 + "");    }  }</code></pre> </li>     <li> <p>TabFragmentAdapter</p> <pre>  <code class="language-java">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);    }  }</code></pre> </li>     <li>activity <pre>  <code class="language-java">List<String> tabList = new ArrayList<>();        tabList.add("Tab1");        tabList.add("Tab2");        tabList.add("Tab3");        tabList.add("Tab5");        tabList.add("Tab6");        tabList.add("Tab7");        tabLayout = (TabLayout)findViewById(R.id.tabs);        //设置tab模式,MODE_FIXED是固定的,MODE_SCROLLABLE可超出屏幕范围滚动的        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        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://www.jianshu.com/users/2229fd214880/latest_articles");            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设置适配器</code></pre> </li>    </ul>    <p> </p>    <p>来自:http://www.jianshu.com/p/8090ca4564c2</p>    <p> </p>