TabLayout

TabLayout使用

最近在做一个项目，用到了TabLayout这个新型控件，所以写此文章记录下学习成果。

先来看一下效果图

实现这个效果其实很简单

• 第一步：在Android Studio中，按ctrl+alt+shift+s,然后在Dependencies中添加design依赖。如图
  

• 第二步：声明控件：

  

• 第三步:使用TabLayout

• `package com.yutianwang.test;

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends Activity {

private TabLayout tabLayout;
private ViewPager vp_out;
private ViewPager vp_in;
private String[] tab = new String[]{"Tab1","Tab2","Tab3","Tab4","Tab5","Tab6","Tab7","Tab8","Tab9","Tab10"};
private ArrayList<String> mList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    tabLayout = (TabLayout) findViewById(R.id.tl);
    vp_out = (ViewPager) findViewById(R.id.vp_out);

    initData();
    vp_out.setAdapter(new MyOutPagerAdapter());
    tabLayout.setupWithViewPager(vp_out);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

}

private void initData() {
    for (int i = 0; i < tab.length; i++) {
        mList.add(tab[i]);
    }
}

public class MyOutPagerAdapter extends PagerAdapter{
    @Override
    public CharSequence getPageTitle(int position) {
        return mList.get(position);
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView mText = new TextView(MainActivity.this);
        mText.setText(mList.get(position));
        mText.setGravity(Gravity.CENTER);
        mText.setTextSize(28);
        container.addView(mText);
        return mText;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
}

}
`

拿到相应的控件之后，写一个正常的ViewPager的PagerAdapter类，然后setAdapter.要想实现上图效果，还需在PagerAdapter中多覆写一个getPageTitle(),返回标签文字。最后需要将TabLayout和ViewPager建立连接，还有就是可以设置TabLayout的TabMode.这里用的是SCROLLERABLE。其实他还有另一个TabMode,MODEFIXED,那么它们到底有什么区别呢？？？

如果你用的是FIXED的话，那么当你的getTabTitle返回数字比较小的话，他会自动调整大小

如果你用的是SCROLLERABLE,那么它会缩在一块了。

补充

TabLayout还有一些常用的属性：

        app:tabIndicatorColor="#F00" 标签下划线的颜色
        app:tabSelectedTextColor="#f00"  标签文字选中的颜色
        app:tabTextColor="#797070"    标签正常的颜色

注意

使用TabLayout绑定ViewPager之前一定要先调用ViewPager的setAdapter()

总结

TabMode.SCROLLERABLE适用于Tab数量多的场景，TabMode.FIXED适用于Tab数量少的场景。
最后祝大家生活愉快！