TabLayout 的用法

TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用. 我将全面地讲解其用法. 反正我是没看过比我还详细的了.

演示

添加依赖

这是Android Design 包下的类, 该包是Android5.0 引入的UI包

compile'com.android.support:design:25.2.0'

布局

代码

publicclassMainActivityextendsAppCompatActivity{@BindView(R.id.tab_layout)    TabLayout mTabLayout;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        mTabLayout.addTab(mTabLayout.newTab().setText("首页"));        mTabLayout.addTab(mTabLayout.newTab().setText("分类"));        mTabLayout.addTab(mTabLayout.newTab().setText("设置"));    }}

第二种方式

完全通过布局创建

TabLayout

方法有点多

属性

修改布局的属性

显示模式

可滑动

app:tabMode="scrollable"

固定

app:tabMode="fixed"

指示器选项

app:tabIndicatorHeight="10dp"//指示器高度app:tabIndicatorColor="@color/colorPrimary"// 指示器颜色

文字选项

app:tabSelectedTextColor="#ffffff"// 选择的Tab的文字颜色app:tabTextColor="#000000"// 未选择的Tab文字颜色app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large"// 文字样式

背景设置

两者没什么区别

android:background="@color/colorAccent"// 背景app:tabBackground="@color/colorPrimary"//背景

标签距离

app:tabPaddingStart="10dp"app:tabPaddingBottom="10dp"app:tabPadding="10dp"app:tabPaddingEnd="10dp"app:tabPaddingTop="10dp"

对齐方式

居中显示

app:tabGravity="center"

填充

app:tabGravity="fill"

偏移

从左边开始偏移距离, 必须是可滑动的模式 scrollable

app:tabContentStart="200dp"

标签宽度限制

最大宽度

app:tabMaxWidth="50dp"

最小宽度

app:tabMinWidth="100dp"

代码

TabLayout提供的方法

标签

创建标签

TabLayout.TabnewTab()

添加标签, 只有添加后才能显示

voidaddTab(TabLayout.Tab tab)voidaddTab(TabLayout.Tab tab,intposition)voidaddTab(TabLayout.Tab tab,booleansetSelected)voidaddTab(TabLayout.Tab tab,intposition,booleansetSelected)

删除标签

voidremoveTab(TabLayout.Tab tab)

通过索引删除标签

voidremoveTabAt(intposition)

删除全部标签

voidremoveAllTabs()

得到标签

TabLayout.TabgetTabAt(intindex)

得到标签总数

intgetTabCount()

设置样式

指示器

voidsetSelectedTabIndicatorColor(intcolor)// 指示器颜色voidsetSelectedTabIndicatorHeight(intheight)// 指示器高度

标签文本

voidsetTabTextColors(intnormalColor,// 正常颜色intselectedColor)// 选择状态颜色voidsetTabTextColors(ColorStateList textColor)// 状态颜色

显示模式

这个之前属性里面介绍过了

intgetTabMode()voidsetTabMode(intmode)

mode:

MODE_SCROLLABLE

MODE_FIXED

对齐方式

voidsetTabGravity(intgravity)intgetTabGravity()

添加View

不止是添加标签Tab还可以直接添加View

voidaddView(View child)voidaddView(View child,intindex)voidaddView(View child,

ViewGroup.LayoutParams params)voidaddView(View child, // View对象intindex, // 位置索引                ViewGroup.LayoutParams params)// 布局参数

得到当前选择的位置

intgetSelectedTabPosition()

监听器

选择监听器

该方法已经被废弃, 不推荐使用.

voidsetOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)

替代的方法是

voidaddOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)

该监听器用完后需要删除

voidremoveOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)

一次性删除所有添加的选择监听器

voidclearOnTabSelectedListeners()

Tab

该类是TabLayout的内部类, 表示TabLayout中的每一个标签. 我将介绍这个类的所有方法

判断是否被选择

booleanisSelected()

设置为被选择状态

voidselect()

描述内容

如果你没用设置描述内容, 默认的是标签的标题

TabLayout.TabsetContentDescription(intresId)// 用strings id的TabLayout.TabsetContentDescription(CharSequence contentDesc)CharSequencegetContentDescription()

自定义标签的内容

每个标签可以尽情的自定义视图

TabLayout.TabsetCustomView(intresId)TabLayout.TabsetCustomView(View view)

标签的标签

给Tab设置tag, 然后就可以通过tag得到Tab

TabLayout.TabsetTag(Object tag)ObjectgetTag()

添加图标

TabLayout.TabsetIcon(Drawable icon)TabLayout.TabsetIcon(intresId)DrawablegetIcon()

标题的文字

TabLayout.TabsetText(intresId)TabLayout.TabsetText(CharSequence text)CharSequencegetText()

当前标签位置

intgetPosition()

关联ViewPager

​

TabLayout和ViewPager配合使用是最常见的运用方式, 可以说量身打造. 这里我将介绍两种方式.

两者配合使用后TabLayout就不能通过自己创建Tab了, 需要PagerAdapter中实现 getPagerTitle() 方法返回标签的文字. 标签的数量有ViewPager的分页数量决定.

布局中嵌套

布局

代码

publicclassMainActivityextendsAppCompatActivity{@BindView(R.id.tab_layout)    TabLayout mTabLayout;@BindView(R.id.viewpager)    ViewPager mViewpager;privateArrayList mList;privateString[] mTitle;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        initData();        mViewpager.setAdapter(newPagerAdapter() {@OverridepublicintgetCount(){returnmList.size();            }@OverridepublicbooleanisViewFromObject(View view, Object object){returnview == object;            }@OverridepublicObjectinstantiateItem(ViewGroup container,intposition){                View view = mList.get(position);                container.addView(view);returnview;            }@OverridepublicvoiddestroyItem(ViewGroup container,intposition, Object object){                container.removeView((View) object);            }@OverridepublicCharSequencegetPageTitle(intposition){returnmTitle[position];            }        });    }    privatevoidinitData(){        View viewpagerA = getLayoutInflater().inflate(R.layout.viewpager_a,null);        View viewpagerB = getLayoutInflater().inflate(R.layout.viewpager_b,null);        View viewpagerC = getLayoutInflater().inflate(R.layout.viewpager_c,null);        mList =newArrayList<>();        mList.add(viewpagerA);        mList.add(viewpagerB);        mList.add(viewpagerC);        mTitle =newString[]{"首页","分类","设置"};    }

布局中关联

如果布局没有嵌套

就需要在ViewPager设置PagerAdapter之前关联两者

mTabLayout.setupWithViewPager(mViewpager);

虽然配合ViewPager后TabLayout创建的Tab并不能正常显示, 因为setupWithViewPager内部方法是先删除所有的标签再添加.

但是还是可以通过 getTabAt() 得到标签之后进行修改.

来自：http://liangjingkanji.coding.me/2017/03/03/TabLayout/