TabLayout使用小结
日常开发中我们会经常使用到TabLayout,现在对TabLayout的使用给个总结：
首先看下：
效果图
TabLayout详解
什么是TabLayout
TabLayout provides a horizontal layout to display tabs.[google]
TabLayout是一个用于放置水平Tab的布局
你可以设置文字，icon，甚至是自定义的View
TabLayout的继承关系
TabLayout可配置属性
| 属性名 | 解释 |
|---|---|
| tabContentStart | 开始位置的偏移量 |
| tabBackground | 设置Tab的背景色 |
| tabGravity | 分为fill,center,Tab的对齐方式 |
| tabIndicatorColor | 导航条的颜色 |
| tabIndicatorHeight | 导航条的高度 |
| tabMaxWidth | Tab的最大宽度 |
| tabMinWidth | Tab的最小宽度 |
| tabMode | 分为scrollable,fixed,Tab的模式(设置为scrollable代表tab足够多的时候可以水平滚动，而设置为fixed则表示所有tab默认在一页显示，不能滚动) |
| tabPadding | Tab的内边距 |
| tabPaddingBottom | Tab的内底边距 |
| tabPaddingEnd | Tab的右内边距 |
| tabPaddingStart | Tab的左内边距 |
| tabPaddingTop | Tab的上内边距 |
| tabSelectedTextColor | Tab文字选中颜色 |
| tabTextColor | Tab文字颜色（未选中） |
| tabTextAppearance | Tab文字样式 |
TabGravity跟tabMode有着紧密的联系，具体区别如图所示：
1，TabGravity:fill & tabMode:fixed
tab较少时 
tab较多时 
2，TabGravity:center & tabMode:fixed
tab较少时 
tab较多时
3，TabGravity:fill & tabMode:scrollable
tab较少时 
tab较多时 
4，TabGravity:center & tabMode:scrollable
tab较少时
tab较多时
TabGravity属性只有在TabMode为fixed情况下才有用
XML配置Tab
效果图：
自定义属性跟布局代码：
首先是我们的自定义属性:
接下来是布局代码：
代码设置Tab
效果图：
代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.mipmap.ic_launcher));//设置为icon
mTabLayout.addTab(mTabLayout.newTab().setText("实时"));
mTabLayout.addTab(mTabLayout.newTab().setText("全球"),0,true);//添加tab指定tab位置并设为选中
mTabLayout.addTab(mTabLayout.newTab().setText("新闻30分"));
mTabLayout.addTab(mTabLayout.newTab().setText("网易"));
mTabLayout.addTab(mTabLayout.newTab().setText("叮当猫"));
//这里都可以用代码设置TabLayout的属性，这里不列
}这里将addTab方法的源码贴出，很明了：
/**
* Add a tab to this layout. The tab will be inserted at position.
* If this is the first tab to be added it will become the selected tab.
*
* @param tab The tab to add
* @param position The new position of the tab
*/
public void addTab(@NonNull Tab tab, int position) {
addTab(tab, position, mTabs.isEmpty());//mTabs用于存储TabLayout的所有tab
}
/**
* Add a tab to this layout. The tab will be added at the end of the list.
*
* @param tab Tab to add
* @param setSelected True if the added tab should become the selected tab.
*/
public void addTab(@NonNull Tab tab, boolean setSelected) {
if (tab.mParent != this) {
throw new IllegalArgumentException("Tab belongs to a different TabLayout.");
}
addTabView(tab, setSelected);
configureTab(tab, mTabs.size());
if (setSelected) {
tab.select();
}
}
/**
* Add a tab to this layout. The tab will be inserted at position.
*
* @param tab The tab to add
* @param position The new position of the tab
* @param setSelected True if the added tab should become the selected tab.
*/
public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
if (tab.mParent != this) {
throw new IllegalArgumentException("Tab belongs to a different TabLayout.");
}
addTabView(tab, position, setSelected);
configureTab(tab, position);
if (setSelected) {
tab.select();
}
}tips
java代码设置默认选中
tablayout.getTabAt(position).select();- 1
监听Tab的各种事件
效果图：
Java代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setText("热点"),false);//不选中
mTabLayout.addTab(mTabLayout.newTab().setText("实时"),false);
mTabLayout.addTab(mTabLayout.newTab().setText("全球"),1,true);//添加tab指定tab位置并设为选中
mTabLayout.addTab(mTabLayout.newTab().setText("新闻30分"),false);
mTabLayout.addTab(mTabLayout.newTab().setText("网易"));
mTabLayout.addTab(mTabLayout.newTab().setText("叮当猫"),false);
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
/**
* 当tab第一次选择时候调用
* @param tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.this, "select tab = "+tab.getText(), Toast.LENGTH_SHORT).show();
}
/**
* 当tab从 选择 ->未选择
* @param tab
*/
@Override
public void onTabUnselected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.this, "unselected = "+tab.getText(), Toast.LENGTH_SHORT).show();
}
/**
* 当tab已是选择状态时，继续点击调用此方法
* @param tab
*/
@Override
public void onTabReselected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.this, "reselected = "+tab.getText(), Toast.LENGTH_SHORT).show();
}
});
}
TabLayout联合ViewPager
效果图:
java代码
public class MainActivity extends AppCompatActivity {
private List titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
titleList = new ArrayList<>();
titleList.add("热点");
titleList.add("全球");
titleList.add("实时");
titleList.add("新闻30分");
titleList.add("网易");
titleList.add("叮当猫");
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
ViewPager mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new CustomPagerAdapter(this));
mTabLayout.setupWithViewPager(mViewPager);
}
class CustomPagerAdapter extends PagerAdapter{
private Context context;
public CustomPagerAdapter(Context context){
this.context = context;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
TextView mTextView = new TextView(context);
mTextView.setText(titleList.get(position));
mTextView.setGravity(Gravity.CENTER);
mTextView.setTextColor(Color.WHITE);
mTextView.setTextSize(20);
container.addView(mTextView);
return mTextView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
return titleList.size() == 0 ? 0 : titleList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
}
XML