TabLayout的使用及详解

TabLayout    配合  ViewPager使用

步骤1：

<android.support.design.widget.TabLayout
    android:id="@+id/me_shop_order_tab"
    style="@style/Me_Shop_Order_TabLayout_Style"
    app:tabIndicatorColor="@color/black"
    app:tabSelectedTextColor="@color/gray"
    app:tabTextColor="@color/black"
    >
    <!--app:tabBackground="@color/colorPrimary"-->
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/me_shop_order_viewpager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</android.support.v4.view.ViewPager>

步骤2： 进行findviewbyid

shop_order_tabLayout = (TabLayout) findViewById(R.id.me_shop_order_tab);
shop_order_viewpager = (ViewPager) findViewById(R.id.me_shop_order_viewpager);

步骤3： 标题集合

List<String> titleList = new ArrayList<>();

titleList.clear();
titleList.add("全部");
titleList.add("待付款");
titleList.add("待发货");
titleList.add("待收货");
titleList.add("已完成");

步骤4： 页面 此处使用的是  自定义的page

List<BasePage> pagesList = new ArrayList<>();

pagesList.clear();
pagesList.add(new AllProductPage(mContext));
pagesList.add(new WaitPayPage(mContext));
pagesList.add(new WaitSendPage(mContext));
pagesList.add(new WaitReceivePage(mContext));
pagesList.add(new FinishedPage(mContext));

/**
 * @Author Xi
 * Created by zz.wbkj.xi on 2016/8/16.
 */
public abstract class BasePage {
    public Context mContext;

    public BasePage(Context context) {
        this.mContext = context;
    }

    public abstract View initView();
    public abstract void initData();
    public abstract void initListener();

    // TODO 访问网络数据	这块儿 需要自己写
}

步骤5： 设置模式

shop_order_tabLayout.setTabMode(TabLayout.MODE_FIXED);

步骤6： viewpager设置适配器

// 设置viewpager适配器
shop_order_viewpager.setAdapter(new BasePagerAdapter<BasePage>(mContext,pagesList) {
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        BasePage basePage = pagesList.get(position);
        View currentItemView = basePage.initView();
        basePage.initData();
        basePage.initListener();
        container.addView(currentItemView);
        return currentItemView;
    }
});

/**
 * @Author Xi
 * Created by zz.wbkj.xi on 2016/8/13.
 */
public abstract class BasePagerAdapter<T> extends PagerAdapter {

    public Context mContext;
    public List<T> dataList;

    public BasePagerAdapter(Context context , List<T> dataList) {
        this.mContext = context;
        this.dataList = dataList;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    @Override
    public abstract Object instantiateItem(ViewGroup container, int position) ;
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }


}

步骤7：   给tablayout 设置 viewpager

shop_order_tabLayout.setupWithViewPager(shop_order_viewpager);

步骤8： 设置tablayout的标题

// 设置tablayout的标题
for (int i = 0; i < titleList.size() ; i++) {
    shop_order_tabLayout.getTabAt(i).setText(titleList.get(i));
}

设置标题时  如果采用下面这种方式  设置 标题部分的  问题不会显示：

shop_order_tabLayout.newTab().setText("test1");

原因是 ：

 翻源码吧  在给tablayout设置viewpager 的时候 会自动包含  adapter的改变  滑动状态的改变  点击  tabs 显示 增加titles 等

/**
 * The one-stop shop for setting up this {@link TabLayout} with a {@link ViewPager}.
 *
 * <p>This method will link the given ViewPager and this TabLayout together so that any
 * changes in one are automatically reflected in the other. This includes adapter changes,
 * scroll state changes, and clicks. The tabs displayed in this layout will be populated
 * from the ViewPager adapter's page titles.</p>
 *
 * <p>After this method is called, you will not need this method again unless you want
 * to change the linked ViewPager.</p>
 *
 * <p>If the given ViewPager is non-null, it needs to already have a
 * {@link PagerAdapter} set.</p>
 *
 * @param viewPager The ViewPager to link, or {@code null} to clear any previous link.
 */
public void setupWithViewPager(@Nullable final ViewPager viewPager)