Materail Design 入门（六）—— TabLayout之使用介绍（1）

在进入正题之前首先我们来看一张效果图，如下图：

看到这样的Tab效果你通常会怎么做呢？思考3秒钟，在Materail Design之前你可能会用3个Button或者CheckedTextView,TabHost，RadioGroup等等。这些都是最原始的处理方法，修为高点的同学呢可能会在github上面找一些大牛们推荐的第三方框架来实现，简单又方便，比如PagerSlidingTabStrip去实现，或者viewpagerindicator。但是现在Materail Design已经为我们提供了一个简便快捷的实现方式TabLayout，为什么不用呢？快点让自己懒起来吧，哈哈。
老规矩，直接上代码，同时为大家分析总结TabLayout的用法和注意事项，动起来吧。

<android.support.design.widget.TabLayout
            android:id="@+id/activity_ykq_js_tl"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabIndicatorHeight="@dimen/dimen_4"
            app:tabMaxWidth="@dimen/dimen_90"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabTextAppearance="@style/TabLayoutTextSize"
            app:tabTextColor="@color/white_60"/>

1、TabLayout属性介绍

1.改变选中字体的颜色
app:tabSelectedTextColor=”@android:color/holo_orange_light”
2.改变未选中字体的颜色
app:tabTextColor=”@color/colorPrimary”
3.改变指示器下标的颜色
app:tabIndicatorColor=”@android:color/holo_orange_light”
4.改变指示器下标的高度
app:tabIndicatorHeight=”4dp”
5.改变整个TabLayout的颜色
app:tabBackground=”color”//这里不能直接写RGB，需要@color/xx
6.改变TabLayout内部字体大小
app:tabTextAppearance=”@android:style/TextAppearance.Holo.Large”//设置文字的外貌，也可以自己新建一个style进行设置

<style name="TabLayoutTextSize"
       parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
       <item name="android:textSize">16sp</item>
       <item name="android:textAllCaps">false</item>字母全部大写
</style>

7.添加图标
tabLayout.addTab(tabLayout.newTab().setText(“Tab1”).setIcon(R.mipmap.ic_launcher));
8.加入Padding
设置Tab内部的子控件的Padding：
app:tabPadding=”xxdp”
app:tabPaddingTop=”xxdp”
app:tabPaddingStart=”xxdp”
app:tabPaddingEnd=”xxdp”
app:tabPaddingBottom=”xxdp”
设置整个TabLayout的Padding：
app:paddingEnd=”xxdp”
app:paddingStart=”xxdp”
9.内容的显示模式
app:tabGravity=”center”//居中，如果是fill，则是充满
10.Tab的宽度限制
设置最大的tab宽度：
app:tabMaxWidth=”xxdp”
设置最小的tab宽度：
app:tabMinWidth=”xxdp”
11.Tab的“Margin”：TabLayout开始位置的偏移量：
app:tabContentStart=”100dp”
12.Tab的模式
数据很多的时候我们应该怎么办呢，莫着急，设置TabLayout的模式，让它滚动起来：
tabLayout.addTab(tabLayout.newTab().setText(“Tab 4”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab 5”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab 6”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab 7”));
然后设置属性为：
app:tabMode=”scrollable”
默认是fixed：固定的，标签很多时候会被挤压，不能滑动。

2、TabLayout的监听事件

abLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
    @Override
    public voidonTabSelected(TabLayout.Tab tab) {
        //选中了tab的逻辑
    }

    @Override
    public voidonTabUnselected(TabLayout.Tab tab) {
        //未选中tab的逻辑
    }

    @Override
    public voidonTabReselected(TabLayout.Tab tab) {
        //再次选中tab的逻辑
    }
});

补充：默认选中某项
tablayout.getTabAt(position).select();

3、TabLayout+ViewPager+Fragment demo实现

（1）首先我们需要在项目中添加依赖库，这里我用的是AS，所以直接在build.gradle中添加： compile ‘com.android.support:design:24.0.0’
（2）编写xml布局文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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:background="@color/white"
              android:fitsSystemWindows="true"
              android:orientation="vertical">

     <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />

     <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</LinearLayout>

（3）JAVA代码实现：

public class BookDetailActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private  Book mBook;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_appbar_detail);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(mViewPager);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.addTab(tabLayout.newTab().setText("内容简介"));
        tabLayout.addTab(tabLayout.newTab().setText("作者简介"));
        tabLayout.addTab(tabLayout.newTab().setText("目录"));
        tabLayout.setupWithViewPager(mViewPager);
    }


    private void setupViewPager(ViewPager mViewPager) {
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(DetailFragment.newInstance(mBook.getSummary()), "内容简介");
        adapter.addFragment(DetailFragment.newInstance(mBook.getAuthor_intro()), "作者简介");
        adapter.addFragment(DetailFragment.newInstance(mBook.getCatalog()), "目录");
        mViewPager.setAdapter(adapter);
    }


    static class MyPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mFragmentTitles.add(title);
        }

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

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitles.get(position);
        }
    }
}

注意：
1.setupWithViewPager必须在ViewPager.setAdapter()之后调用；源码如下：

public void setupWithViewPager(ViewPager viewPager) {
    PagerAdapter adapter = viewPager.getAdapter();
    if(adapter == null) {
        throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
    } else {
        ...
    }
}

2.tabLayout.setTabMode(TabLayout.MODE_FIXED);运行后，三个TabLayout标签会挤到一起；解决办法：
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);

TabGravity：放置Tab的Gravity,有GRAVITY_CENTER 和 GRAVITY_FILL两种效果。顾名思义，一个是居中，另一个是尽可能的填充（注意，GRAVITY_FILL需要和MODE_FIXED一起使用才有效果）

TabMode：布局中Tab的行为模式（behavior mode），有两种值：MODE_FIXED 和 MODE_SCROLLABLE。
MODE_FIXED：固定tabs，并同时显示所有的tabs。
MODE_SCROLLABLE：可滚动tabs，显示一部分tabs，在这个模式下能包含长标签和大量的tabs，最好用于用户不需要直接比较tabs。
MODE_SCROLLABLE适合很多tabs的情况；
3. 使用Tablayout出现标题消失的原因：setupWithViewPager（）的大坑。这个问题要仔细说一说了，坑死我了。首先上源码：

由源码可知：setupWithViewPager（）在设置Viewpager时，先将原来设置的tab全部清除后，又重新addTab了，所以之前设置的title全部都没有了。知道了原理之后解决这个方法就容易多了，既然是在设置viewPager的时候重设的title那我们就可以在设置viewpager时将title重新加上去。由步骤3可知，它是通过getPageTitle()方法重新设置的title，所以我们可以在getPageTitle()中设置标题。

 @Override
 public CharSequence getPageTitle(int position) {
      return mFragmentTitles.get(position);
 }

好了，TabLayout第一节入门介绍到此就结束了，如果大家有什么疑问欢迎留言交流。
Materail Design 入门（六）—— TabLayout之使用介绍（2）