Tablayout+ViewPager实现Tab栏切换

1.引入依赖库

 implementation 'com.android.support:design:28.0.0'

2.xml布局中使用


  
  
  

tablayout属性说明

app:tabIndicatorColor    指示器颜色
app:tabTextColor         tab栏字体颜色
app:tabSelectedTextColor tab栏字体被选颜色
app:tabIndicatorHeight   指示器高度
app:tabBackground        tab背景颜色
app:tabMaxWidth          tab栏最大宽度
app:tabTextAppearance    tab栏字体样式
app:tabMinWidth          tab栏最小宽度

app:tabMode="";有scrollable和fixed两个属性值
scrollable:可滑动;
fixed:不能滑动,平分tabLayout宽度;

app:tabGravity="";有center和fill两个属性值
fill:tabs平均填充整个宽度;
center:tab居中显示;

3、设置tablayout和viewpager关联

方法一

3.1、tablayout和viewpager关联

tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
       //tab被选的时候回调
       viewpager.setCurrentItem(tab.getPosition(),true);
   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
       //tab未被选择的时候回调
   }

   @Override
   public void onTabReselected(TabLayout.Tab tab) {
       //tab重新选择的时候回调
   }
});

3.2、viewpager滑动关联tablayout

viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));

3.3、设置tablayout的标签来自于PagerAdapter

tablayout.setTabsFromPagerAdapter(tabAdapter);

3.4、viewpager设置适配器

viewpager.setAdapter(tabAdapter);

方法二

3.1、viewpager设置适配器

viewpager.setAdapter(tabAdapter);

3.2、tablayout和viewpager相互关联,并设置tablayout文字

tablayout.setupWithViewPager(viewpager);

使用第二种方式需要注意的是setupWithViewPager();方法的调用必须在viewpager设置完适配器后调用,如果在设置适配器之前调用会抛异常。
如果想在底部tab栏文字上面添加图片实现类似微信那样的效果也是可以的,在tablayout和viewpager关联后,获取tablayout的tab数量,并对数量进行遍历获取到每个tab,给每个tab设置相应的view就可以了。

//获取当前tab数量
int tabCount = tablayout.getTabCount();
//遍历循环tab数量
for(int i=0;i

你可能感兴趣的:(Android开发)